海康威视web控件开发+vue结合做网页开发

需求:vue的项目,需要在页面展示出海康的硬盘录像机连接的摄像头的实时监控画面以及回放功能.

准备:web开发包(包含插件以及demo,在海康官网即可下载32位64位的都有.那些需要积分下载的博主良心不疼么.)

点击这里下载:链接: https://pan.baidu.com/s/12FrbycWyWWyiRJH5Yd1tPA 提取码: gam5

开始开发:

1.安装demo目录下的WebComponentsKit.exe插件(根据自己的浏览器以及系统选择32位还是64位的插件)

2.打开demo.html.功能还是挺齐全的(不过web开发包目前不支持按文件回放(只提供了搜索功能.大华的是提供按文件回放功能的.))

这里说一下基本思路.首先初始化插件,成功之后调用登录方法,登录成功之后调用获取通道信息方法.再然后调用预览方法.基本就是这样的.

3.我看到很多博主没有说到vue项目怎么调用webVideoCtrl.js这个海康的js.这里说明一下.

在index.html里引入.

然后在自己建的webVideohk.js里可以直接引用.(但是你展示视频的页面需要import该js)

import{WebVideo}from"./webVideohk.js";

我这里把需要用到的方法都封装在webVideohk.js里面(方便调用)

在页面的mounted()里初始化

this.webVideo?=?new?WebVideo();

this.webVideo.init(this.isType,this.qrcodeData.route,parseInt(this.qrcodeData.port),this.qrcodeData.ruser,this.qrcodeData.rpwd);?//调用初始化方法

这里的参数可以自己传过去.(包括ip,root,username,password等)

4.注意点:

a.