如何在手机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方式集成监控摄像头实时直播画面相关推荐

客户端相关知识学习（一）之混合开发，为什么要在App中使用H5页面以及应用场景、注意事项...
混合开发随着移动互联网的高速发展,常规的开发速度已经渐渐不能满足市场需求.原生H5混合开发应运而生,目前,市场上许多主流应用都有用到混合开发,例如支付宝.美团等.下面,结合我本人的开发经验,简单谈一 ...
app 中嵌入H5页面，H5跳转H5页面的跳转实现
app 中嵌入H5页面,H5跳转H5页面的跳转实现模拟创建a标签,并将href给到a标签点击实现: 模拟创建a标签,并将href给到a标签点击实现: var a = document.createE ...
手机App中的“窃听风云”
前几天,今日头条陷入"窃听风波",有网友称,自己仅仅是和朋友聊到"西餐"话题,今日头条就很快出现了和西餐有关的文章推送. 这并非这名网友自己的奇遇,许多今日头条 ...
手机APP中的强者，超乎你想像！
每一次手机系统更新,都会给我带来不一样的惊喜.而接下来这篇文章,可不是讲手机系统更新给我带来的惊喜,而是要给大家推荐几款可以给你带来惊喜的手机APP,一起来看看有哪些软件吧! 藏书阁它是一款网络数字 ...
python爬取app聊天信息_手把手教你爬取手机app中的信息
使用工具:Fiddler+基础爬虫 Fiddler是一个抓包神器,用来检查电脑和互联网之间所有的通讯内容,而且比较简单容易上手,显示的格式也比较友好. 网页基本都会爬了,现在开始要想想如何去爬手机ap ...
uni 在app中引入h5页面（uni编写）
关于在app中引入网页,使用的webview标签相对于uniapp 官网给出的webview使用方法在这里https://uniapp.dcloud.io/component/web-view 但是 ...
back在java里面是什么意思,手机APP中使用history.back()的问题
样式是一个超链接A标签,通过点击事件来达到返回上一页的效果. 所以通常做饭是把A标签的href写成#,然后onClick事件,刚开始我只是当成一个普通点击事件,然后使用JS进行返回. 写法如下: 返回 ...
html 中返回上一步页面,（移动端）在APP中嵌入H5网页，返回上一步返回APP菜单首页...
H5页面中:返回上一步固定写法(前端实现:使用vue框架的返回上一步语法即可): methods:{ backforward(){ this.$router.back(-1); // 返回上一步 }, ...
揭开手机app中摇一摇的神秘面纱
在做app软件中摇一摇的功能时,本来以为很神秘的摇一摇,却在代码文档中找到了封装好的相关方法,下面让我们一起揭开摇一摇的神秘面纱. 在 UIResponder中存在下面三个方法 - (void)mot ...

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

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

最新文章

热门文章