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

最新推荐文章于 2024-09-24 15:52:42 发布

m0_67391270

最新推荐文章于 2024-09-24 15:52:42 发布

阅读量3.3k

点赞数

分类专栏：前端 html 文章标签： sass 前端 npm

本文链接：https://blog.csdn.net/m0_67391270/article/details/123321973

版权

本文介绍了如何在Vue项目中使用海康威视的Web开发包，实现摄像头实时监控和回放功能。首先，需要安装WebComponentsKit插件，然后在Vue组件中引入webVideoCtrl.js并封装成webVideohk.js。在页面mounted阶段初始化插件、登录并预览视频。需要注意Plugin-1.0.0.min.js的放置和全局变量g_iWndIndex的使用。在实际操作中，可能会遇到重复打开导致的初始化失败问题，需要在退出时正确登出以避免问题。

摘要由CSDN通过智能技术生成

需求: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.注意点: