HTML5的GB/T28181协议监控视频直播技术

àì夳堔傛蜴生んèń 2023-10-14 13:40 57阅读 0赞

采用GB/T28181协议的监控视频直播系统中，由于GB/T 28181媒体流无法在Web页面中通过Flash插件或HTML5<audio>和<video>标签进行直接播放，故需要将GB/T28181协议转换为RTMP协议、HLS协议或WebRTC协议方可实现跨浏览器/跨平台直播。Flash插件技术已呈现被HTML5技术替代的趋势，故本文研究一种基于HTML5的GB/T 28181协议监控视频直播技术方案。

该方案中根据监控视频直播终端的操作系统和浏览器环境的不同选择不同的直播协议：对于Windows+IE浏览器环境仍采用主流的ActiveX插件技术，使用GB/T 28181 SIP协议作为控制信令，使用GB/T 28181 RTP(Real-time Transport Protocol)/RTCP(Real-time Transport Control Protocol)协议传输流媒体数据；对于支持WebRTC协议的浏览器环境(如Windows+Chrome浏览器环境等)采用HTML5 WebRTC直播技术，使用GB/T 28181 SIP协议作为控制信令，使用WebRTC协议传输流媒体数据；对于不支持WebRTC协议但支持HLS协议的浏览器环境(如Android+UC及iOS+Safari浏览器环境等)采用基于HTTP协议传输的GB/T 28181 SIP协议作为控制信令，使用HLS协议传输流媒体数据。

**1.技术原理**

采用HTML5技术实现现有成熟的GB/T28181监控视频直播系统的视音频跨浏览器/跨平台直播，核心技术是实现系统服务端对GB/T 28181协议与HTML5 WebRTC/HLS协议的兼容转换。GB/T 28181协议的控制信令基于SIP协议、媒体流采用RTP/RTCP协议进行传输、视频压缩采用H.264等编码算法、音频压缩采用G.711等常见算法。GB/T 28181的基础协议栈如图（3）所示。

![图片][8b9c3bc943892a3f36cead9f1825af93.jpeg]

![图片][b3338043231da65f19a32b2736c6a88d.png]

图3 GB/T 28181基础协议栈示意图

基于HTML5 HLS协议的GB/T28181监控视频直播，需实现GB/T 28181协议与HLS协议的转换。按照本文介绍的HLS协议直播架构，将GB/T 28181 协议中广泛使用的MPEG2-PS流转换为MPEG-2-TS流，将非H.264编码的视频流转码为H.264格式，将GB/T 28181规定的音频码流转码为AAC格式，并进一步分割为MPEG2-TS文件片段序列进行存储，而后由Web服务(如nginx服务器等)进行分发即可。

相对于HLS协议，基于HTML5 WebRTC协议的GB/T28181监控视频直播实现起来复杂得多。虽然WebRTC协议中规定媒体流基于SRTP/SRTCP协议进行传输，本质上与GB/T28181协议的媒体流传输协议相似，但WebRTC协议对数据传输的安全性以及NAT穿越能力考虑得更为成熟：这给GB/T28181协议与WebRTC协议的转换带来更大的难度和复杂度。另外WebRTC协议本身并未指定控制信令，需业务应用根据自身的需要自主选择适当的控制协议。本文研究的基于HTML5 WebRTC协议的GB/T28181监控视频直播技术方案推荐使用基于HTTP传输的GB/T 28181 SIP协议作为WebRTC的配套控制信令。采用GB/T 28181 SIP协议和WebRTC协议的监控视频直播协议栈如图（4）所示。

![图片][df47e281433281bac710b0b5352b3512.jpeg]

![图片][e05f3540896e0e2e660333928d003843.png]

图4 采用GB/T 28181 SIP协议和WebRTC协议的监控视频直播协议栈

参考图（3）与图（4），基于HTML5 WebRTC协议的GB/T28181监控视频直播，需将GB/T 28181 协议中广泛使用的MPEG2-PS流转换为ES流，将非H.264编码的视频流转码为H.264格式，将非G.711编码的音频流转码为G.711/AAC/MP3格式，而后将视频流及音频流分别封装为SRTP数据包、DTLS加密后进行分发即可。直播系统服务端需实现基于HTTP传输的GB/T 28181 SIP协议控制信令与标准GB/T 28181 SIP信令的双向兼容转换。

**2.系统架构**

基于HTML5的GB/T 28181协议监控视频直播系统采用上文中介绍的跨浏览器直播技术原理：系统服务端将GB/T 28181协议标准转换为HTML5 WebRTC/HLS协议，对外同时提供GB/T 28181流媒体服务、HTML5 WebRTC流媒体服务以及HTML5 HLS流媒体服务；摄像机等视频监控前端设备以GB/T 28181协议接入直播系统并向系统推送符合GB/T 28181标准的媒体流；监控视频直播终端根据操作系统和浏览器环境的不同选择不同的直播协议访问系统服务。基于HTML5的GB/T 28181协议监控视频直播系统架构如图（5）所示。

![图片][df47e281433281bac710b0b5352b3512.jpeg]

![图片][0c430c9ff5d064c6dc90ea599828bedc.png]

图5 基于HTML5的GB/T 28181协议监控视频直播系统架构图

图（5）中，GB/T 28181监控视频直播系统服务端包括标准WEB业务服务器、SIP信令服务器、流媒体服务器、数据库服务器、WebRTC视频接入服务器以及HLS视频接入服务器等。其中，WebRTC视频接入服务器接受SIP信令服务器管理和调度，承担GB/T 28181协议与WebRTC协议的转换功能并对外提供HTML5 WebRTC流媒体服务；HLS视频接入服务器接受SIP信令服务器管理和调度，承担GB/T 28181协议与HLS协议的转换功能并对外提供HTML5 HLS流媒体服务。直播系统接入的前端监控设备主要包括符合GB/T 28181标准的IPC摄像机及移动监控设备等。系统直播终端包括运行于Windows/Android/iOS等PC/移动操作系统主流浏览器(如IE/Chrome/Safari等)环境的Web客户端以及APP客户端等。

GB/T 28181监控视频直播系统终端通过HTTP协议访问系统WEB业务服务器进行用户登录身份验证，验证通过后获取监控设备资源列表；通过标准GB/T 28181协议或基于HTTP协议传输的GB/T 28181协议向SIP信令服务器或WebRTC视频接入服务器或HLS视频接入服务器请求目标设备媒体流；WebRTC视频接入服务器或HLS视频接入服务器对直播终端请求进行转换并转发给SIP信令服务器；直播系统将接收到的前端监控设备媒体流通过流媒体服务器或WebRTC视频接入服务器或HLS视频接入服务器转发给目标直播终端实现跨浏览器播放展示。

**3.实验结果**

基于HTML5 WebRTC及HLS协议的、GB/T 28181监控视频跨浏览器直播系统接入和管理主流安防厂商视频监控设备(如IPC等)，系统直播终端用户可通过IE及Chrome等浏览器登陆系统并预览实时监控视频。

实际测试过程中，使用Windows等操作系统IE/Chrome等浏览器环境登陆访问直播系统并请求监控设备实时视频，能够较为稳定地获取媒体流并播放显示，跨浏览器直播效果良好，且基于HTML WebRTC协议的GB/T 28181监控视频单域直播延时约为1秒,实时性高。

本文研究一种基于HTML5标签技术、采用WebRTC和HLS协议的、GB/T 28181监控视频跨浏览器直播技术方案，并将该方案应用于GB/T28181监控视频直播系统。该方案将GB/T 28181协议标准转换为HTML5 WebRTC/HLS协议，实现GB/T 28181标准监控视频在Google Chrome、Mozilla Firefox、Microsoft IE以及Apple Safari等多种浏览器、PC、平板以及手机等多种终端设备上的实时播放与展示。实际测试表明本技术方案跨浏览器直播兼容效果良好，且基于WebRTC的GB/T 28181监控视频直播实时性高。

[8b9c3bc943892a3f36cead9f1825af93.jpeg]: https://img-blog.csdnimg.cn/img_convert/8b9c3bc943892a3f36cead9f1825af93.jpeg
[b3338043231da65f19a32b2736c6a88d.png]: https://img-blog.csdnimg.cn/img_convert/b3338043231da65f19a32b2736c6a88d.png
[df47e281433281bac710b0b5352b3512.jpeg]: https://img-blog.csdnimg.cn/img_convert/df47e281433281bac710b0b5352b3512.jpeg
[e05f3540896e0e2e660333928d003843.png]: https://img-blog.csdnimg.cn/img_convert/e05f3540896e0e2e660333928d003843.png
[0c430c9ff5d064c6dc90ea599828bedc.png]: https://img-blog.csdnimg.cn/img_convert/0c430c9ff5d064c6dc90ea599828bedc.png