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

Posted 直播社区

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在手机APP中通过H5方式集成监控摄像头实时直播画面相关的知识,希望对你有一定的参考价值。

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

同时,随着各种数字化应用系统的建设,很多单位都需要开发自己的移动智能化应用,安防视频作为一项重要的数据元素需要在移动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内核浏览器中直接访问)

以上是关于如何在手机APP中通过H5方式集成监控摄像头实时直播画面的主要内容,如果未能解决你的问题,请参考以下文章

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

Home Assistant系列 -- 接入手机摄像头做实时监控和人脸识别

微信中通过页面(H5)直接打开本地app的解决方案

h5启动原生APP总结

海康大华等监控摄像头通过H5方式无插件低延时播放方案

如何把头歌的摄像头改成虚拟摄像头