好久没来简书了,想念你们。
前段时间公司接了一个公安项目,从嫌疑人入区、接受审讯到出区的一整套流程,包括软件开发,软硬件对接,上周基本功能开发完成,期间遇到了好多问题,不过最后基本都解决了,在简书记录一下,有同样需求的小伙伴可以看看。
项目刚开始我们选择的是用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里边直接调用。预览图就不放了,涉及公安的隐私,结果是能实现的。
有需求的小伙伴可以将这段代码直接复制到你的项目里,肯定会有这样那样的问题,可以私聊我或者评论里,我知道的一定尽囊相受,下一篇会持续更其他的坑和解决办法。欢迎大家一起来讨论。