vue调用海康摄像头实现实时监控

好久没来简书了，想念你们。

前段时间公司接了一个公安项目，从嫌疑人入区、接受审讯到出区的一整套流程，包括软件开发，软硬件对接，上周基本功能开发完成，期间遇到了好多问题，不过最后基本都解决了，在简书记录一下，有同样需求的小伙伴可以看看。

项目刚开始我们选择的是用vue框架结合elementui组件开发，当时产品那边需求没给定，项目追的紧，我们是边看需求边开发，压根不知道会有硬件这块的接入，也是因为中间考虑的不足，后期踩了很多坑。硬件包括调用海康摄像头、高拍仪、手环和身份证的识别以及刻录机，公司的同事采购硬件，他当时买硬件的时候只想着降低成本，买的硬件全部是兼容ie旧版本的浏览器，vue框架对于ie又不是那么的友好，所以兼容性这块用了挺久的时间，我会在文章把碰到的问题和解决办法都列出来，今天着重说下摄像头这块。

海康确实有给文档，但是只是支持ie11，如果我们不用vue框架开发，用纯HTML开发至粗腰做好兼容性处理就好了，恰恰因为用vue开发，谷歌、火狐都不支持，没办法，智能弃用海康的方法，自己在百度上真是搜了好多方法，但都是因为各种各样的原因总是会报错，还好最终找到了一个很简单的方法，也不需要引入其他什么插件。方法如下：

<object classid='clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921' width='1000' height='500' events='True'>

  <param name='MRL' value='rtsp://admin:fpga12345@92.206.75.30:554/h264/ch2/main/av_stream'>

  <param name='AutoLoop' value='true'>

  <param name='autoPlay' value='true'>

  <param name='Volume' value='50'>

  <param name='StartTime' value='0'>

  <param name='toolbar' value='false'>

  <param name='allowfullscreen' value = 'true'>

</object>

这只是前端的方法，但是拿到视频还是需要后端同事的帮助，我这边只是在前端页面这块调取摄像头也就是调接口。将视频摄像头和海康威视的硬盘录像机连接在同一网段，并设置好硬盘录像机的IP地址和端口号。摄像头要通过通道管理设置通道号，IP通道地址等。不同的视频只是修改信道的数字就行，上例的value值的ch2就是信道序号，ch2指的就是2信道，同理，如果是ch3就是3信道，这个方法也只兼容ie11，但是一个优点就是可以直接在vue里边直接调用。预览图就不放了，涉及公安的隐私，结果是能实现的。

有需求的小伙伴可以将这段代码直接复制到你的项目里，肯定会有这样那样的问题，可以私聊我或者评论里，我知道的一定尽囊相受，下一篇会持续更其他的坑和解决办法。欢迎大家一起来讨论。