浏览器中播放海康大华等监控视频的思路与方法

以你之姓@ 2023-10-14 19:43 87阅读 0赞

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.使用 ffmpeg

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

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

2.VLC控件进行

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

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

3.WebSocket视频流转发

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

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

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

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

思路很简单

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

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

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

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

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

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

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

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

现我公司开发的liveweb播放器满足了各大品牌摄像机在各个浏览器不能播放的问题，

liveweb是一款超低延时(150-200毫秒)、秒启动、无插件web实时视频播放器，h5视频播放器，支持egde、firefox、Chrome、safari等常见浏览器。支持h264、h265、AAC、G711等常见音视频格式。

支持协议：RTSP、RTMP、HLS、HTTP-FLV、WebSocket-FLV、GB28181、HTTP-TS、WebSocket-TS、HTTP-fMP4、WebSocket-fMP4、MP4、WebRTC。

支持RTSP/Onvif/GB/T28181/EHome/海康SDK/大华SDK等设备或者平台接入

服务器包含设备接入、音视频直播、流媒体分发服务器、录像存储和回放服务等功能。

提供GB28181信令转接和平台级联

支持HTTPS 加密等；

对外提供HTTP API二次开发接口；![067cc0e42efc4156925f62638f79c095.jpeg][]

![0be1b050d60440649cc2cb5ff54ef888.webp][]

[067cc0e42efc4156925f62638f79c095.jpeg]: https://img-blog.csdnimg.cn/067cc0e42efc4156925f62638f79c095.jpeg
[0be1b050d60440649cc2cb5ff54ef888.webp]: https://img-blog.csdnimg.cn/0be1b050d60440649cc2cb5ff54ef888.webp

发表评论取消回复

表情：

评论列表（有 0 条评论，87人围观）

还没有评论，来说两句吧...

相关阅读

相关海康大华宇视SDK车牌号开发主要方法

一个控制台程序的pro内容，功能：使用海康、大华、宇视的SDK进行车牌号获取开发，其包含了SDK外部库的添加。秋风写于淄博，业务咨询与技术交流：Q375172665。二、...

刺骨的言语ヽ痛彻心扉/ 2024年05月28日 10:15/ 0 赞/ 104 阅读

相关海康、大华IpCamera RTSP地址和格式详解

海康、大华IpCamera RTSP地址和格式详解想要实现基于IP摄像头的视频监控，就不得不提到RTSP协议。海康和大华是国内比较著名的IP摄像头品牌，这篇文章将介绍海康、

素颜马尾好姑娘i/ 2024年03月25日 23:03/ 0 赞/ 142 阅读

相关海康大华等摄像头RTSP低延迟(小于300毫秒)网页播放解决方案！

在浏览器中实现播放RTSP实时视频流，大体上有如下几个方案： 1.浏览器插件方案此方案主要适用于在IE及Chrome 45以下版本的浏览器，在2015年前是绝对主流的选择

客官°小女子只卖身不卖艺/ 2024年03月24日 19:17/ 0 赞/ 94 阅读

相关 WEB页面实时播放海康、大华等摄像头RTSP视频流完全方案

一. 背景分析随着移动互联网时代的到来，安防监控领域为了适应互联网的发展要求，首先由国内安防监控龙头企业（海康、大华、宇视）带头先后开发了萤石云、乐橙云等互联网视频云服务

Dear 丶/ 2023年10月15日 21:59/ 0 赞/ 748 阅读

相关浏览器中播放海康大华等监控视频的思路与方法

随着现代社会不断发展，对于安防行业的需求也越来越多。近年来，各大安防厂商如雨后春笋一般不断涌现，以视频监控为主的海康、大华、宇视；以门禁为主的钮贝尔等。各大平台也都在介

以你之姓@/ 2023年10月14日 19:43/ 0 赞/ 88 阅读

相关大华海康摄像头人家自己是怎么在web上播放视频的

最近处理安防视频，怎么把摄像头视频在web上展示费了很大功夫，当然这一篇不是讲解我是怎么显示的，而是回答当时领导问我的一个问题，人家大华自己是怎么显示的？我们知道大华海康

刺骨的言语ヽ痛彻心扉/ 2022年11月16日 13:42/ 0 赞/ 417 阅读

相关海康大华ie插件开发

海康大华ie插件开发 ![Center][] ![Center 1][]

淡淡的烟草味﹌/ 2022年08月20日 04:22/ 0 赞/ 197 阅读

相关海康大华客户端开发

海康大华客户端开发 ![Center][]![Ce

曾经终败给现在/ 2022年08月20日 04:22/ 0 赞/ 210 阅读

相关海康大华PC客户端集成播放器

海康大华PC客户端集成播放器 1.开发平台：windows7,64位系统，vs2010，界面用mfc搭的，利用海康大华官网上的sdk,及开源的资料（暂不

柔光的暖阳◎/ 2022年08月18日 11:48/ 0 赞/ 290 阅读

相关基于activex插件的海康大华网页版的播放（一）

-------------------- 1. 研一下学期开学一个月内，完成了海康大华网页版的播放器，其实就是在web端调用基于activex控件做的MFC插件。先看一下效

ゝ一纸荒年。/ 2022年08月07日 13:49/ 0 赞/ 182 阅读