如何在手机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范围,与监控厂商的浏览器插件模式基本一致。
该方案的优缺点:
优点:
- 该方案支持多终端H5方式集成;
- 支持各种品牌的监控摄像头接入;
- 端到端延时极低,专网环境下端到端延时不超过300ms;
- 能够适配各种播放终端,包含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方式集成监控摄像头实时直播画面的主要内容,如果未能解决你的问题,请参考以下文章