vue2中使用WebSDK_V3.3.0(231027)展示监控视频
1.需要数据
{
szIP: '192.168.1.X', //摄像头ip
szPort: '80', //端口
szUsername: 'admin', //用户名
szPassword: 'xxxxxx' //密码
},
2.下载内容
WEB3.3控件开发包 V3.3
下载地址:海康开放平台
3.安装插件,引入js文件
(1)双击HCWebSDKPlugin.exe,安装插件
(2)引入文件
把这两个文件放在public下static目录下,在public的index.html中引入
4.vue代码–视频组件
当前script里面的方法只是当前开发所需,其他方法可以看下载的文件中HCWebSDK3.3.pdf文档,或者运行demo–cn–demo.html文件,根据自己所需查找对应方法
5.vue代码–父组件
#引入
import monitorVideoVue from '@/components/video/monitorVideo.vue';
#html部分
#js部分
在data中定义
// 视频列表
sysParams: [
{
szIP: '192.168.1.A',
szPort: '80',
szUsername: 'admin',
szPassword: 'xxxx'
},
{
szIP: '192.168.1.B',
szPort: '80',
szUsername: 'admin',
szPassword: 'xxxx'
},
{
szIP: '192.168.1.C',
szPort: '80',
szUsername: 'admin',
szPassword: 'xxxx'
},
{
szIP: '192.168.1.D',
szPort: '80',
szUsername: 'admin',
szPassword: 'xxxx'
},
{
szIP: '192.168.1.A',
szPort: '80',
szUsername: 'admin',
szPassword: 'xxxx'
},
{
szIP: '192.168.1.B',
szPort: '80',
szUsername: 'admin',
szPassword: 'xxxx'
}
],
6.我的代码问题
其实在父组件的sysParams中不需要这样重复声明账号密码,他登录一次后会有已登录状态,这里未作修改,只有通道列表更改一下就可以,只是当前代码还未更改
正确需要格式
loginIp: '192.168.90.xxx',//ip地址,后面拼接的是通道列表iChannelIDIndexList
port: '80',//端口
username:'admin',//用户名
password: 'a123xxxxxxxxxxxx',//密码
iChannelIDIndexList: [1, 4, 6, 7], // 选择的通道列表
这样的一个格式基本上可以实现多窗口的播放了,但项目后续没有用这个方法来实现,就没有继续完善代码
7.缺点
(1)必须安装HCWebSDKPlugin.exe插件,没有安装插件的电脑无法观看
(2)有时候会有一点卡顿
(3)如果不销毁播放器,他会出现在所有页面的上面,销毁的话再重新加载会慢一点