如何在手机APP中通过H5方式集成监控摄像头实时直播画面

Posted 2023-02-18 zhiboshequ

当前，视频监控应用在各种应用场景下已经大面积应用，并且经过多年日积月累的建设，所采用的厂商设备也是五花八门，比如有海康、大华、宇视、天地伟业等各种品牌的摄像头。

同时，随着各种数字化应用系统的建设，很多单位都需要开发自己的移动智能化应用，安防视频作为一项重要的数据元素需要在移动APP中引用。移动APP的开发以H5技术路线为主，这样可以实现一套代码在多个平台上运行，包含主流的android平台和ios平台。因此，行业内迫切需要一种将安防视频信号以H5方式在移动APP中快速集成的方法。

技术路线分析：

为了实现这种应用，当前主要有如下几种技术实现方式：

1. 通过监控厂商提供的SDK来实现摄像头信号在APP中的接入。

         各家监控设备厂商都免费提供了这方面的SDK开发接口，但是都存在如下问题：

        1）所提供的接口不是H5方式的，需要在APP打包时引入厂商自己的动态库文件；

        2）SDK只支持厂商自己的设备，不兼容其它监控厂商的设备，如果在同一个系统中有多家厂商的设备，就需要与多个监控厂商进行对接；

2. 通过将安防摄像头信号转换成HLS协议的视频流进行发布。

这是当前应用最为普遍的一种技术实现方式，它的优缺点如下：

优点：

1）该方案具有通用性，因为经过流媒体服务器转换后输出的HLS协议视频流可以兼容Android和iOS两大移动端平台；

2）可以兼容各个厂商的安防摄像头和NVR设备；

3）移动端对接完全兼容html5技术标准，实现起来简单方便；

缺点：

1）转换后的直播流延时增大，画面的实时性差。端到端延时通常都在3秒以上；

这是由于Apple公司开发的HLS协议本身的缺陷导致的，并且无法优化。

3. 通过我们开发的支持H5的低延时通信技术来实现摄像头信号在APP中的接入。

系统架构图如下：

这套系统的主要构成如下：

1.低延时视频转码工作站

   用来实现前端各个厂商安防摄像头的统一接入，并实现统一的协议与编码格式转换，并以低           延时模式推送给低延时直播发布服务器。

2.低延时直播发布服务器

  用来实现各种网络流的低延时转发，面向各种终端设备（PC、iOS设备、Android设备）以          HTML5方式进行发布，支持一对多高并发应用。

该方案可以支持以下设备终端：

PC终端	Android终端	iOS终端
操作系统类型： Windows/Linux/MacOS 浏览器类型： Chrome/Firefox/Safari/Edge	浏览器类型： Chrome/Firefox 微信、微信小程序	浏览器类型： Safari 微信、微信小程序

 低延时技术指标：

该系统的端到端延时主要出现在以下几个环节：

1. 视频采集和编码延时；

这部分延时出现在摄像头端，延时在20~50ms范围；

2. 视频接入和转码延时；

这部分延时出现在低延时视频转码工作站端，在进行协议转换和视频编码格式转换时产品，延时在10~30ms范围；

3. 直播发布服务延时；

这部分延时出现在低延时直播发布服务器端，该服务器在接收低延时视频转码工作站推送过来的网络流时，需要在本地缓存2~3帧的数据，用于抵抗网络带宽抖动带来的影响，避免画面卡顿。

根据不同的网络流格式，这部分延时在40~100ms范围；

4. 客户端解码播放延时：

客户端HTML5播放器在进行网络流播放时，需要等待把一帧完整的数据接收完成后才能解码输出，而且同样基于抗击网络抖动的影响需要缓存1~2帧的数据，因此这部分延时在20~80ms范围；

 端到端整体延时指标：

综上所述，整个端到端系统的延迟时间通常在300~500ms范围，与监控厂商的浏览器插件模式基本一致。

该方案的优缺点：

优点：

1. 该方案支持多终端H5方式集成；
2. 支持各种品牌的监控摄像头接入；
3. 端到端延时极低，专网环境下端到端延时不超过300ms；
4. 能够适配各种播放终端，包含Windows系统PC终端、Linux系统PC终端、国产化系统PC终端、Android系统终端、iOS系统终端、微信小程序；

缺点：

建设成本相对较高。

该方案的实际效果：

可以访问公网的在线测试系统直观地看到实际效果。

移动端访问地址：

播放器接口http://www.shunjingtech.com/xmms/mobile.html

（可以在微信或者Chromium内核的移动端浏览器中直接访问）

PC端访问地址：

播放器接口http://www.shunjingtech.com/xmms/base.html

（可以在Chrome、Firefox、Edge等chromium内核浏览器中直接访问）