H5直播系列五 H5实现调查(flv.js,cyberplayer,JWPlayer,videojs,hls.js)

参考
想做移动端网页视频直播，请问除了 hls 之外还有其他可选方案吗？

总结一下，除了flash方案外，基本都受限于MSE的兼容性问题。关于MSE，可以参考H5直播系列二 MSE(Media Source Extensions)

一、JWPlayer

https://support.jwplayer.com/
https://github.com/jwplayer/jwplayer
JWPlayer快速入门指南（中文）
JWPlayer 7的正确使用方法及Flash plugin failed to load解决方法
JW Player 使用 RTMP 流
jwplayer +ffmpeg+red5 实现摄像头的直播

1.不支持移动端
RTMP Videos on mobile platform
RTMP renders in Flash mode and requires Flash for playback. Mobile devices don’t natively support Flash, that is why you are having issues with mobile.
Adaptive Streaming

2.不支持移动端
Error loading player: No playable sources found
On my machine IE 11 was working, but Firefox failed with message "Error loading player: No playable sources found" (because of missing Flash plugin).

二、百度音视频cyberplayer

cyberplayerDemo

看起来是rtmp/flv+hls的，使用了video标签。打开Chrome控制台，可以找到加载的flv.js
注：在支持MediaSourceExtension的浏览器环境，且播放地址支持跨域访问（设置了Access-Control-Allow-Origin），则播放器使用H5来播放flv视频。''其他pc上，系统自动加载flash进行播放。
目前手机上还不支持播放flv格式视频。
在hls.js也有类似描述
'注：在非IE环境下必须引入3个videojs文件！否则只能用flash来播放
' + '兼容性：高优使用H5播放器，在不支持MSE的环境上自动加载flash进行播放
' + '大部分手机浏览器上都原生支持hls播放，但部分android上的浏览器原生不支持'

三、videojs

参考搭建rtmp直播流服务之4:videojs和ckPlayer开源播放器二次开发(播放rtmp、hls直播流及普通视频)

Paste_Image.png

四、flv.js

flv.js works by transmuxing FLV file stream into ISO BMFF (Fragmented MP4) segments, followed by feeding mp4 segments into an HTML5 element through Media Source Extensions API.
flv.js is written in ECMAScript 6, transpiled into ECMAScript 5 by Babel Compiler, and bundled with Browserify.

参考
Bilibili/flv.js
如何看待哔哩哔哩的开源 HTML5 播放器内核 flv.js?
作者谦谦谈开发flv.js历程
FLV.JS 代码解读--demux部分
B站视频开源代码flv.js的使用部署心得（代码案例应用）
Bilibili 向 HTML5 进发，播放器内核 flv.js 开源
//issues begin
mseFlvPlayback为true即可播放点播视频，mseLiveFlvPlayback为true才可播放httpflv直播流
flv直播流在chrome下播放
关于不能直播FLV流的理解
作者大大，请问一下，我在谷歌浏览器上的话，是秒开视频，但是到了Safari，手机上就都不行了，请问是为啥？
MSE 浏览器兼容性问题
//issues end

五、hls.js

hls.js is a JavaScript library which implements an HTTP Live Streaming client. It relies on HTML5 video and MediaSource Extensions for playback.

参考
hls.js 源码解读【1】
hls.js 源码解读【2】
hls.js 源码解读【3】

六、shaka-player

Shaka Player is an open-source JavaScript library for adaptive media. It plays adaptive media formats (such as DASH and HLS) in a browser, without using plugins or Flash. Instead, Shaka Player uses the open web standards MediaSource Extensions and Encrypted Media Extensions.

参考谷歌开源 H5 流媒体播放器 shaka-player 初探

七、纯 JS 实现的视频解码器

参考HTML5 视频直播（二）
1.Broadway 是一个 H.264 解码器，使用 Emscripten 工具从 Android 的 H.264 解码器转化而成，它还针对 WebGL 做了一些优化。这个解码器支持 mp4 后缀的视频文件，有一些限制：不支持 weighted prediction for P-frames 和 CABAC entropy encoding。例如 iPhone 拍摄的视频它就不支持，可以用 FFmpeg 转一下

在虚拟桌面网页版实时音视频直播方案中，作者提到在github上有一个demo，经过测试，broadway解码效率不高。（测试环境 chrome book） 参考https://github.com/131/h264-live-player。同时作者还提到了https://github.com/ChihChengYang/wfs.js，这个方案使用websocket 从服务端传输h264编码数据到浏览器， 在浏览器端使用JS 解析h264数据 ， 封装成fMP4 fragment, 喂给media source 中的sourceBuffer， 浏览器video tag自动获取sourceBuffer中的数据进行解码渲染。

2.jsmpeg 则是一个 MPEG1 解码器，它是由作者从零编写出来的，并不像 Broadway 那样是从其他语言翻译而成，所以代码可读性要好很多，代码也更轻量级。jsmpeg 也对视频文件编码方式有一些要求：不支持 B-Frames，视频宽度必须是 2 的倍数。

3.prism.js
参考Web端解码视频流：（Part1 纯Java Script 解码[不建议大家这样做，因为普适性不强]）

八、MonaClient

用Html5技术播放rtmp视频直播流的方案，采用本人开发的csharprtmp作为服务器，Broadway作为视频解码方案，speex.js作为音频解码方案，emscripten作为编译器的创新技术，需要浏览器支持AudioContext，WebSocket，webgl（可选），TypedArray,等H5功能支持才可以正常使用。ns.initAudio(50);这段代表音频缓冲50帧播放，因为实际测试发现，不缓冲的话声音播放不出来
参考
MonaClients
MonaClient测试地址
使用JS实现RTMP协议直播（三）
H5RtmpClient 详细介绍
speex移植到crotex-M4，注意事项
LEBO游戏 Laya+MonaClient

2018.11.07更新
这里同样原理的方案还有OV视云，在监控直播中打开ovplayer.min.js可以看到Broadway的身影

九、Laya引擎未来支持度

参考希望和FLASH一样支持RTMP视频直播流
由于LayaFlash主要是以游戏移植和游戏开发为主，layaFlash的引擎类库也并不是支持所有的flash API，目前主要是以实现游戏功能API为主。类似即时串流的播放、视频（RTMP）、流式播放、p2p、聊天、摄像头等功能我们暂时不会考虑去支持。