Web浏览器(B/S)端流媒体最新方案

1.1 MSE+FMP4无插件方案

1.1.1 MSE+(Websocket+FMP)

(1)现状:已实现

(2)原理:在服务端对裸H264帧转封装成FMP4,通过Websocket转发客户端。客户Web端通过自定义js来收流,将FMP利用中间件(Media Sources Extensions)“喂给”video进行播放。

java流媒体框架 web流媒体_websocket


(PS:服务端完成对每一个裸帧进行FMP4封装。客户端websocket receive数据帧后,直接通过MSE喂给video。为了避免前期花屏,最好过滤一些杂帧,等到收到IDR再送video)

(3)优点:数据达到帧级可控,延迟低、无插件,兼容性好,客户端不涉及复杂业务,单页面播放可达9路
(4)缺点:(a)需要一台流媒体转封装服务主机,且工作量集中在服务端 (b)如需叠加弹幕、矩形框等,只能通过CSS或WebGL叠加绘制自定义内容 (c)由于web权限问题,无法静默处理本地截图、本地录像等文件操作,云台控制只能走API

1.1.2 (MSE+FMP4)+Websocket

(1)现状:已实现

(2)原理:服务端对裸H264帧不做处理,通过Websocket原样转发客户端。客户Web端通过js将收到的 H264帧转化成fMP4 fragment包,通过MSE“喂给”video进行播放。和1.1.1的区别就是封装FMP4的工作由web端本地js来处理

java流媒体框架 web流媒体_javascript_02


(3)优点:数据达到帧级可控,延迟低、无插件,兼容性好,服务器端不涉及复杂业务,单页面9路播放

(4)缺点:(a)需要一台流媒体服务主机 ,web端的js涉及转封装(b)只能通过CSS或WebGL叠加自定义内容 (c)无法静默处理本地截图、录像等文件操作,云台控制只能走API

1.2 自定义插件方案

1.2.1 插件+MSE+FMP4

(1)现状:已实现
(2)原理:插件用c++编写,内部集成流媒体SDK,负责平台取流、本地截图、录像和PTZ交互,同时开启本地监听,向web端传递视频帧和其他交互操作。c++端或web端的js都可以转封装FMP4,通过MSE“喂给”video进行播放。
(3)优点:去中心化,不需要额外的流媒体服务器,底层可以集成各家SDK,兼容性好。由于直接和平台交互,延迟性较好。解决了本地文件操作等问题,让c++干c++的事情,web干web的事情,单web页面可达9路
(4)缺点:只能通过CSS或WebGL叠加自定义内容,除非插件直接向web端传递解码叠加后的数据
(PS:插件要安装,设置自启动,保证常驻系统才行)

1.2.2 插件+Qt

(1)现状:在win7上已实现,win10正在寻找最优方案
(2)原理:c++的插件只负责和Web端的通信交互,流媒体部分全部交给Qt窗体来完成,通过位置叠加的方式,实现类似于插件的效果
(3)优点:流媒体工作全部由QT完成,性能和并发路数安全看QT
(4)缺点:位置叠加模拟的“嵌入”效果体验上可能有瑕疵。
(PS:这个方案在win10 64bit上一直没解决,找到的谷歌浏览器句柄貌似只能叠加在标题栏,而且变成半透明状。如果有人找到能把QT子窗口,覆盖在谷歌浏览器DIV对应位置的的方法,请不吝赐教,不胜感激 )