如何在手机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方式集成监控摄像头实时直播画面的主要内容，如果未能解决你的问题，请参考以下文章