谷歌浏览器中预览海康大华等监控视频的思路与方法

摘要:
本人近些年来对海康,大华,宇视等视频厂商做过一些视频对接的开发,但始终存在一个问题,在谷歌浏览器中如何进行视频监控的预览。本文将主要解决在谷歌,火狐等非IE浏览器中预览视频监控问题,给广大开发者提供一个思路方法。现在谷歌浏览器中现已不支持ActiveXObject的创建及调用,这是由于chrome浏览器在45版本后不再提供对npapi插件的支持。这种方式基本上解决了现有浏览器预览监控视频的绝大部分问题。

随着现代社会不断发展,对于安防行业的需求也越来越多。

近年来,各大安防厂商如雨后春笋一般不断涌现,以视频监控为主的海康、大华、宇视;以门禁为主的钮贝尔等。

各大平台也都在介入安防行业,像阿里,腾讯的数字城市。其他各种针对安防行业的解决方案也是层出不穷,如雪亮工程,智慧交通,智慧社区等等。

如今安防行业应用的存在于各行各业中,各种安防设备也是五花八门,层出不穷,但目前视频监控仍是最主要的市场。

本人近些年来对海康,大华,宇视等视频厂商做过一些视频对接的开发,但始终存在一个问题,在谷歌浏览器中如何进行视频监控的预览。

本文将主要解决在谷歌,火狐等非IE浏览器中预览视频监控问题,给广大开发者提供一个思路方法。

在此之前本人也百度过很多方案,但效果都不是很好,多多少少都存在些问题。

文中将这些方法进行了一个大概的汇总,以便供大家参考。

在软件开发中分为 C/S 架构和 B/S 架构,即客户端程序与网页端程序。

客户端在对接监控视频时比较方便也比较简单,直接对接厂商的视频控件或是 SDK 就可以了。

网页端最常用的就是通过厂商平台的视频控件进行预览回放,这种通过视频控件的方式优点有很多,比如稳定性强,可使用视频控件进行录像,截图,云台控制等操作。

但是网页端调用视频控件有一个比较严重的问题,只支持IE浏览器。

视频控件一般都是 OCX 的组件,注册到注册表中后页面通过 ActiveXObject 进行创建并调用里面的方法。

现在谷歌浏览器中现已不支持 ActiveXObject 的创建及调用,这是由于 chrome浏览器在 45版本后不再提供对 npapi 插件的支持。

网上也有一些手动启动 npapi 的方法,但是操作比较繁琐,不可能针对用户去大面积铺开使用。

针对谷歌浏览器预览视频监控的方法大概有以下几种

1.使用 ffmpeg

地址:https://blog.csdn.net/weixin_43237948/article/details/89308678

该方案是将 RTSP 视频转成 HLS 格式,前端通过第三方js再去从服务中取流。

这种方式在配置的这部分相对来说比较复杂,而且网上相关的资料也不是很多。

2.VLC控件进行

安装 VLC 客户端,直接在浏览器中调用 VLC 的视频控件,通过监控视频 RTSP 串流进行预览。

该方式调用时比较方便,在360安全浏览器的极速模式下是可运行的,但是在谷歌浏览器依旧因为插件的原因不能预览

3.WebSocket视频流转发

开发一个服务端,通过摄像头的设备 SDK 去取流,在将视频流通过 WebSocket 发送到前端页面,页面中再将获取到的视频流绘制到 DIV 中。

参考地址:https://download.csdn.net/download/qq30886226/10617007

该方式对于浏览器端压力较大,而且视频画面也会出现丢帧模糊的现象。多个视频调用时服务端的压力也会过大甚至崩掉。

以上三种方式是题主在开发过程中所接触到的一些方法,这几个方法都有一个共同的问题,视频预览相对来说容易,但录像回放的功能不太好实现。

题主最近发现一种新的方式,这中方式可以较好的解决大部分浏览器预览视频监控中的问题,其中包括回放,录像抓图,云台控制等。

思路很简单

1、开发一个客户端程序,用程序去对接视频监控(推荐使用厂商自己的视频控件)。

2、客户端程序启动一个 WebSocket 服务。

3、网页中连接 WebSocket 服务,通过 WebSocket 发送消息。客户端收到消息解析后在进行相对应的操作。

这种方式基本上解决了现有浏览器预览监控视频的绝大部分问题。

1、浏览器支持:WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议,,只要是支持HTML5,WebSocket就可以使用。

2、稳定性,功能完整性:因为客户端是调用的厂商视频控件,所以无论是在取流的稳定性,视频清晰度等各个方面,肯定要比自己去取流在做操作方便的多。而且大部分视频控件都是包括一些功能,例如云台控制、抓图、录像等操作。

这种方式题主已经测试成功并且已应用在项目上。

各大厂商自己个视频控件能在谷歌浏览器上运行其实也是这个原理,通过 WebSocket 来操作视频客户端。

免责声明:文章转载自《谷歌浏览器中预览海康大华等监控视频的思路与方法》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇「Docker」关于 Docker volume 挂载时文件或文件夹不存在的问题PNETLab模拟器部署及使用配置下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

移动平台的meta标签-----神奇的功效

 对于桌面平台web布局中大家对meta标签再熟悉不过了,它永远位于 head 元素内部,对做SEO的朋友一定对meta有种特殊的感情吧,今天我们就来说说移动平台的meta标签,在移动平台meta标签究竟有哪些神奇的功效呢? 1、Meta 之 viewport 说到移动平台meta标签,那就不得不说一下viewport了,那么什么是viewport呢?vi...

电脑网络诊断显示Win10无法与设备或资源(DNS)通信解决办法

最近是做多错多还是人有点儿衰神附体,软件,电脑系统,各种问题层出不穷,今天早上打开电脑发现不少软件都无法联网,神马百度商桥,腾讯浏览器,百度云。。。昨天百度商桥打不开还以为是软件出了问题,因为火狐浏览器可以上网,qq可以上网、微信可以上网,这种部分软件无法联网的事情还是第一次发生。今天把软件卸载重装,电脑重启,重复了n遍之后终于意识到不是软件的问题了,于是就...

matlab7.0安装 win7系统详细使用方法附软件下载

MATLAB 7.0下载地址:百度网盘下载地址:http://pan.baidu.com/share/link?shareid=414204&uk=2769186556迅雷快传下载地址:http://kuai.xunlei.com/d/ru4IAAKBDQCYqohR325?p=20395(1)下载下来的iso文件,不需要解压,在内部双击setup...

版本控制工具VSS使用介绍

什么是版本控制? 1.怎样对研发项目进行整体管理   2.项目开发小组的成员之间如何以一种有效的机制进行协调   3.如何进行对小组成员各自承担的子项目的统一管理   4.如何对研发小组各成员所作的修改进行统一汇总   5.如何保留修改的轨迹,以便撤销错误的改动 6. 对在研发过程中形成的软件的各个版本如何进行标识,管理及差异识辨  版本控制工具介绍 •S...

postgresql 下的三表连查

SELECT corp_id,appid, login_name ,app_name,CAST(CAST(SUM(pay_fee) AS FLOAT)/100 AS DEC(10,2)) pay_fee ,report_date FROM (pay_order INNER JOIN pay_app ON pay_order.appid = pay_app....

laraveladmin新手的使用

1.添加页面 配置好laravel-admin的模板后 点击管理员管理里的菜单列表,输入如下信息即可 提交之后刷新页面,左侧菜单就会显示新增的广告管理的标签 2.定义路由 配置好前端的页面显示之后就要配置对应的路由了。 路由的配置信息在app=>Admin=>routes.php 直接在function下一行添加一个新的路由(被上传的水印...