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

<div id="playercontainer"></div>
<script type="text/javascript" src="player/cyberplayer.js"></script>
<script type="text/javascript">
    var player = cyberplayer("playercontainer").setup({
        width: 680,
        height: 448,
        // <—rtmp or flv直播地址
        file: "rtmp://cyberplayerplay.kaywang.cn/cyberplayer/demo201711-L1",
        // <— 备用播放地址,为了手机上能进行直播,设置hls直播流
        fallbackfile: "http://cyberplayerplay.kaywang.cn/cyberplayer/demo201711-L1.m3u8", 
        autostart: true,
        stretching: "uniform",
        volume: 100,
        controls: true,
        ak: "xxxxxxxxxxxxxxxx" // 公有云平台注册即可获得accessKey
    });
</script>

看起来是rtmp/flv+hls的,使用了video标签。打开Chrome控制台,可以找到加载的flv.js
注:在支持<a href="http://caniuse.com/#search=MSE" target="_blank">MediaSourceExtension的浏览器环境</a>,且播放地址支持跨域访问(设置了Access-Control-Allow-Origin),则播放器使用H5来播放flv视频。''其他pc上,系统自动加载flash进行播放。<br/>目前手机上还不支持播放flv格式视频。
在hls.js也有类似描述
'注:在非IE环境下必须引入3个videojs文件!否则只能用flash来播放<br />' + '兼容性:高优使用H5播放器,在不支持MSE的环境上自动加载flash进行播放<br />' + '大部分手机浏览器上都原生支持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 <video> 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 的倍数。

    <canvas id="video-canvas"></canvas>
    <script type="text/javascript" src="jsmpeg.min.js"></script>
    <script type="text/javascript">
        var canvas = document.getElementById('video-canvas');
        var url = 'ws://'+document.location.hostname+':8082/';
        var player = new JSMpeg.Player(url, {canvas: canvas});
    </script>

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、聊天、摄像头等功能我们暂时不会考虑去支持。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,980评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,178评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,868评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,498评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,492评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,521评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,910评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,569评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,793评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,342评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,931评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2 342

推荐阅读更多精彩内容