H5视频可视化播放RTSP/RTMP/HLS/HTTP视频流媒体的几种可行方案

Myth丶恋晨 2023-10-14 20:16 60阅读 0赞

经过多年的项目实战和研发经验的积累，总结了一下对于H5视频可视化在视频播放上如何做到无插件H5展示的方法，尤其是契合安防行业的方案；

除了HTTP、WebSocket类的传输协议，其他是无法通用地传输到浏览器的，所以，如果要做一款通用的H5视频播放器，基本上就是一款HTTP/WebSocket协议的视频播放器，如果是类似于RTMP、RTSP类型协议的视频源，是不可避免，需要经过服务器转换的，那么我们可以总结Web网页可视化直播的几个刚性需求：

*  H5播放只支持HTTP、WebSocket协议的流媒体源；
 *  需要同时支持H.264、H.265视频编码格式；
 *  支持低延时的实时视频以及录像回放视频；

#### 可行方案：WebSocket透传 ####

通过WebSocket代理服务器，建立透传通道，转发各种不同协议的视频流，WebSocket类似于一个管道，只做原样的数据转发，将源设备与H5客户端之间建立一条由WebSocket包裹的传输通道，具体的协议交互过程还是按照原协议进行，RTSP、SIP类的文本协议按照文本协议的方式，RTMP类的字节流协议按照字节流协议的方式；

方案难点：

*  前端兼容性开发难度高：前端对于各种信令协议、字节流协议、以及解包、缓冲区、时间戳同步、解码、显示、播放，都要开发，对于前端开发的要求比较高；
 *  H.265播放技术：安防场景下，大部分摄像机都采用的是H.265编码格式，所以，要前端Web支持H.265格式，需要引入wasm技术；

方案优缺点：

*  优点：后端开发简单，速度快；
 *  缺点：后端只做管道，不具备实际的设备信息知悉权，这对于设备的管控是无法做到的，例如，无法快照、无法录像、无法获取设备具体的错误信息；
 *  #### H.265网页播放方案 ####

#### 可行方案：liveweb协议互转 ####

采用liveweb的接入方案，将各种不同协议类型的视频源（RTSP、RTMP推流/拉流、HTTP、UDP等）、视频文件，通过标准化的协议转换，统一可以输出为HTTP-FLV（实时流）、HLS（直播流/点播流）对终端进行输出，就达到了标准化、全终端、全平台输出了；

liveWeb支持多种协议(RTSP/RTMP/HLS/HTTP-FLV/WebSocket-FLV/GB28181/HTTP-TS/WebSocket-TS/HTTP-fMP4/WebSocket-fMP4/MP4/WebRTC),支持协议互转。

全面支持H265/H264/AAC/G711/OPUS。

支持WebRTC推流，支持转其他协议

支持WebRTC播放，支持其他协议转WebRTC

支持TWCC rtcp动态调整码率

支持remb/pli/sr/rr rtcp