随着现代社会不断发展，对于安防行业的需求也愈来愈多。前端
近年来，各大安防厂商如雨后春笋通常不断涌现，以视频监控为主的海康、大华、宇视；以门禁为主的钮贝尔等。chrome
各大平台也都在介入安防行业，像阿里，腾讯的数字城市。其余各类针对安防行业的解决方案也是层出不穷，如雪亮工程，智慧交通，智慧社区等等。api
现在安防行业应用的存在于各行各业中，各类安防设备也是五花八门，层出不穷，但目前视频监控还是最主要的市场。浏览器
本人近些年来对海康，大华，宇视等视频厂商作过一些视频对接的开发，但始终存在一个问题，在谷歌浏览器中如何进行视频监控的预览。安全
本文将主要解决在谷歌，火狐等非IE浏览器中预览视频监控问题，给广大开发者提供一个思路方法。架构
在此以前本人也百度过不少方案，但效果都不是很好，多多少少都存在些问题。
测试
文中将这些方法进行了一个大概的汇总，以便供你们参考。.net
在软件开发中分为 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
该方式对于浏览器端压力较大，并且视频画面也会出现丢帧模糊的现象。多个视频调用时服务端的压力也会过大甚至崩掉。
以上三种方式是题主在开发过程当中所接触到的一些方法，这几个方法都有一个共同的问题，视频预览相对来讲容易，但录像回放的功能不太好实现。
题主最近发现一种新的方式，这中方式能够较好的解决大部分浏览器预览视频监控中的问题，其中包括回放，录像抓图，云台控制等。
思路很简单
一、开发一个客户端程序，用程序去对接视频监控（推荐使用厂商本身的视频控件）。
二、客户端程序启动一个 WebSocket 服务。
三、网页中链接 WebSocket 服务，经过 WebSocket 发送消息。客户端收到消息解析后在进行相对应的操做。
这种方式基本上解决了现有浏览器预览监控视频的绝大部分问题。
一、浏览器支持：WebSocket 是 HTML5 开始提供的一种在单个 TCP 链接上进行全双工通信的协议,，只要是支持HTML5，WebSocket就可使用。
二、稳定性，功能完整性：由于客户端是调用的厂商视频控件，因此不管是在取流的稳定性，视频清晰度等各个方面，确定要比本身去取流在作操做方便的多。并且大部分视频控件都是包括一些功能，例如云台控制、抓图、录像等操做。
这种方式题主已经测试成功而且已应用在项目上。
各大厂商本身个视频控件能在谷歌浏览器上运行其实也是这个原理，经过 WebSocket 来操做视频客户端。