基于Gb28181的Websocket无插件流媒体方案

基于GB28181的Websocket无插件流媒体方案

1. 公司的项目需要接入大华、海康设备，要求在360、谷歌浏览器上无插件流畅播放；
2. 采用DSS平台的SDK取流后，前期尝试转码RTMP，本地用video.js播放。实测发现效果不是很好，360浏览器能播放，谷歌浏览器要开启flash或干脆就播不了；
3. 最后选定的方案是走websocket+wasm：提取h264后直接websocket发到服务器，服务器转发到客户端，客户端采用wasm的方式解码播放；
4. 实测效果很好，我的视频流都是2048*1536的，本地解码播放依然很流畅；
5. 后来我把DSS SDK拿掉，换成了自己写的GB28181平台，设备接入国标，这样取流更方便；
6. 测试了服务端的20路并发，感觉占用CPU不大，毕竟不涉及到解码，路数多了性能主要受带宽影响；

1.DSS取流转码RTMP

对接大华DSS linux SDK，获取PS私有流，转码RTMP，流程如下所示：

2.GB28181取流+叠加自定义信息+Websocket发送

1. 通过GB28181获取PS的H264视频流后，添加自定义信息（如矩形坐标、附加文本等），传输使用websocket协议，自己编写Websocket流媒体服务器，Web前端采用Websocket收流。
2. 自己制作二进制解码库，解码库使用linux-ffmpeg3.1 的WebAssembly封装。Websocket收流后，js把取到的h264媒体数据通过封装好的接口传递给二进制解码库解码（输入H264 Nalu帧，输出缩放和叠加矩形框后的YUV420或RGBA32）。
3. 自己编写Html5的Canvas+WebGL播放器。前端Websocket获取到解码库解码后的数据：若浏览器支持WebGL，则解码至YUV420即可渲染播放，否则，要解码转换为RGBA32后在canvas 2D上播放。
4. 解码库和播放器之间通过Web Workers传递数据，保证js主线程的交互流畅性。
   主要流程如下：
   
   

效果图

兼容360和谷歌，支持手机端微信浏览器（老旧手机可能不行），解码性能强大，有人说wasm最多只能到h264的720p，反正我普通的台式机解码的视频最大分辨率是2048x1536+25帧，很流畅。该方案最大的好处就是无插件、无插件、无插件（重要的事情说三遍）
测试地址（1920x1080p+25帧），点击play进行切换：http://118.31.249.228/H264Player/lzs/

东西较多不放了

QQ：909675470