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

原创已于 2022-03-04 13:38:36 修改 · 6.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

于 2022-03-01 15:28:11 首次发布

本文介绍了如何在Vue应用中安装和配置海康威视的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插件，请自行修改以上配置项 */
  }