vue2中使用WebSDK

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）如果不销毁播放器，他会出现在所有页面的上面，销毁的话再重新加载会慢一点