海康威视web3.0+vue项目使用(踩坑之路)ps:附webVideoCtrl.js文件

最近公司开发了一版监控视频的vue项目,我作为实现需求的前端真的是难为我了,各种调查后知道海康威视有web开发包,跟海康威视的SDK联系后发给我两个web二次开发包,

• CH_WEB3.0控件开发包V1.1.0_Win32
• CH_WEB3.0控件开发包V1.1.0_Win64

看到开发包之后我还是很开心的,但是没想到,从此开始踏上了踩坑之路.(坑真的是太多了!!!ToT)

1.海康威视web3.0

文件列表

首先,codebase/transform下面有一个WebComponentsKit.exe,把它安装到电脑上.打开demo.html,登录/预览. 第一个坑来了 ,有可能会提示什么什么…我记不住了,反正就是不好用,然后呢,打开web3.0 32位的包,把这里面的WebComponentsKit.exe安装上就可以了.
准备工作Ok了! 其他的demo我就不介绍了.直接进入正题吧!

2.vue项目应用

先放代码吧.新建videoTab.vue

然后就发现,会报错! 因为要在index.html中引入webVideoCtrl.js文件,但是海康威视web3.0的webVideoCtrl.js直接引入会报错,里面的内容需要做更改.然后发现还会报错

然后发现文件要在body后面引入…

对了,还有个错误

这些报错弄得我是一脸蒙蔽啊.后来终于找到方法,在 babel.config.js文件也需要改,

module.exports = {
  "presets": [
    "@vue/app"
  ],
  "ignore": [
    "public/js/webVideoCtrl.js"
  ]
}

现在就差不多了 监控就可以显示出来了,监控截图就不晒出来,公司不允许…

因为项目已经做完有一段时间,能想起来的也就这么多了,如果有问题,可以问我.我知道的一定告诉^O
还有最后的一句忠告,多看看官方文档…很有用 参数一定要弄明白…

运行环境需要了解一下

3 运行环境

操作系统：
Windows XP、Windows7、Windows8、Windows8.1
浏览器：
IE8~ IE11、Chrome31+、Firefox35+，32 位浏览器
IE8~ IE11、Chrome31~ Chrome44、Firefox35~ Firefox51，64 位浏览器

就这么些吧,以后再补充…

最近好多人都私信评论问我一些问题,因为最近在做其他项目 时间很紧张,这是你们问的最多的webVideoCtrl.js文件,我放上来了 希望会帮你到你们!

webVideoCtrl.js
webVideoCtrl.js