vue2海康威视web使用 npm i hikvs-web

首先安装海康的web控件：

https://github.com/wuxiao-D/hikvs-web/blob/master/public/static/VideoWebPlugin.exe

安装：

npm install hikvs-web

在main.js中：

import hikComp from 'hikvs-web'
Vue.use(hikComp)

使用的页面：

<hik-comp style="width: 200px; height: 90px;" :playConfig="playConfig"
    :nameId="jkInfo.nameId" :cameraIndexCode="jkInfo.cameraIndexCode" />

  data() {
    return {
      jkInfo: {
          nameId: "playWnd1", // nameId 具有唯一性，否则无效，如果循环有多个，一定不能重复
          cameraIndexCode: "xxxx",  // 监控点编号
        }
    }
  },
  computed: {
    /** start 海康视频WEB插件，请自行修改以下配置项 */
    playConfig: function () {
      return {
        appkey: "",
        secret: "",
        ip: "",
        playMode: 0,
        port: 443,
        snapDir: "D:\\SnapDir",
        videoDir: "D:\\VideoDir",
        layout: "1x1",
        enableHTTPS: 1,
        encryptedFields: 'secret',
        showToolbar: 0,
        showSmart: 0,
        buttonIDs: "",
        toolBarButtonIDs: "4098",
      }
    }
    /** end 海康视频WEB插件，请自行修改以上配置项 */
  }

即可显示