共计 8186 个字符，预计需要花费 21 分钟才能阅读完成。
前言
视频监控是智慧城市、智慧园区等 WebGIS 类系统中最为常见的硬件对接设备，也是很多平台所必备的，在开发过程中对接最多的便是海康、大华的视频监控设备。今天就带领大家实现前端接入海康视频监控设备。
前端接入海康视频监控有两种方式：
第一种：使用视频 WEB 插件（VideoWebPlugin.exe 插件），该插件提供适用于 Windows 桌面操作系统 IE、Chrome、Firefox 浏览器的实时视频预览和录像回放功能，支持 32/64 位 Chrome、Firefox、IE11 浏览器，支持 32 位 IE10 浏览器（兼容 64 位 IE10）。
第二中：使用 H5 视频播放器开发包（h5player），适用于跨平台浏览器（windows chrome80+、Android browser）的实时视频预览、录像回放和语音对讲功能。
这两种方式都能实现将视频监控接入到前端项目中，但是又各有优缺点。h5player 是一个基于 HTML5 的流式网络视频播放器，无需安装浏览器插件即可通过 websocket 协议向媒体服务取流播放多种格式的音视频流。缺点是当网页打开视频流畅性差，视频延迟、卡顿问题常有，特别是当实现多路视频播放是体验效果会差很多。优点就是使用 Web 自己的标签组件，样式调整简单。使用 VideoWebPlugin 其实就是浏览器调用了 VideoWebPlugin.exe 这个外部桌面应用，通过提供的接口用 JS 与插件进行交互，但是在性能上明显有很大的提升，视频响应速度快，流畅性好，可以实现几十个监控视频同时播放查看，缺点就是由于是外部插件样式调整上会很困难。
因为客户需求是可以同时播放多路视频，又要求没有延迟不卡顿，所以在本项目中我使用了 VideoWebPlugin.exe 来实现监控视频的播放。
1. 下载和安装海康 VideoWebPlugin.exe 插件
（1）下载和安装海康插件
下载解压之后的文件里既有插件，又提供了一个 demo 示例
首先打开 bin 目录，双击安装 VideoWebPlugin.exe
如果想查看官方提供的 Demo 示例，可以将 Demo 部署到 IIS 或者其他服务器下访问即可
（2）对浏览器进行配置
有时候在高版本谷歌浏览器打开提示启动失败，是因为高版本谷歌浏览器的内核安全系数已经升级，对于一些公共资源会造成无法访问的问题。所以无法访问 VideoWebPlugin.exe
解决方法：
1. 在谷歌浏览器的地址栏中输入 chrome://flags/；
2. 在访问的页面中搜索 network，并找到 Block insecure private network requests；
3. 后面的选择框中，选择第三个 Disabled；
4. 然后点击弹出的按钮 RELAUNCH NOW，重启谷歌浏览器；
5. 重启完了之后，插件就可以正常使用了。
2. 封装组件实现单屏播放和多屏播放
效果如下 
组件主要代码如下：往组件中传入 deviceId（设备编号，多个编号通过逗号隔开）
封装 Demo 中提供的海康插件主要代码如下：主要通过 iframe 获取父页面传入的 ids。
preview_demo
最终实现效果如下：
原文地址: 一篇文章教你使用 Vue 实现海康监控视频播放
