vue3实现海康威视根据海康插件进行监控实时预览和回放功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3实现海康威视根据海康插件进行监控实时预览和回放功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

先点赞后观看，养成好习惯。

介绍

因为我的文章已经写过基于vue实现海康web插件进行视频播放开箱即用文章，这个文章是利用vite+vue3+js进行编写的，大致内容跟vue2一样，拿过去能直接用。

至于我为什么要用js而不用ts，因为海康提供的三个脚本为js语言的，ts尝试过一次，我道行太浅，没搞明白。

这些代码是可以直接使用的，如果对你有帮助，麻烦点个赞。文章来源地址https://www.toymoban.com/news/detail-454619.html

如果需要vue2的开发，点击跳转vue2开发文章

接下来进入正题。

一、插件的下载与安装

下载海康提供的插件和js文件，我上一个文章有讲过。

点击跳转至上一个文章。

引入方式和v2有一些不同，要在主目录下的index.html中引入js文件。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + js</title>
</head>

<body>
    <div id="app"></div>
    <script src="/jquery-1.12.4.min.js"></script>
    <script src="/jsencrypt.min.js"></script>
    <script src="/jsWebControl-1.0.0.min.js"></script>
    <script type="module" src="/src/main.js"></script>
</body>

</html>

二、在所需视频组件中进行代码编写

我这里是直接把我测试的代码全放进去了，可以全部复制在组件里既可以使用。

这里我用的是setup语法糖，有不一样的可自行修改。

<!-- 视频播放组件 -->
<template>
  <div class="main" ref="playWndBox">
    <div
      id="playWnd"
      class="playWnd"
      :style="{
        height: playWndHeight + 'px',
        width: playWndWidth + 'px',
      }"
    ></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, getCurrentInstance, nextTick } from 'vue'

const playWndBox = ref(null)
let playWndHeight = ref('')
let playWndWidth = ref('')
let pubKey = ref('')
let oWebControl = ref(null)
let objData = ref({
  appkey: "",                 //海康提供的appkey
  ip: "",                     //海康提供的ip   
  secret: "",                 //海康提供的secret
  port: 443,
  playMode: 0,        // 0 预览 1回放
  layout: "1x1",      //页面展示的模块数【16】
})

onMounted(() => {

  // 获取页面的实例对象
  const pageInstance = getCurrentInstance();
  // 获取dom节点对象
  const tagDomObj = pageInstance.refs.playWndBox;
  playWndHeight.value = tagDomObj.clientHeight;
  playWndWidth.value = tagDomObj.clientWidth;

  // 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化
  window.addEventListener("scroll", () => {
    console.log(5);

    // return
    if (oWebControl.value != null) {
      oWebControl.JS_Resize(
        tagDomObj.clientWidth,
        tagDomObj.clientHeight
      );
      this.setWndCover();
    }
  });

  // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
  window.addEventListener("resize", (e) => {
    console.log(0);

    if (oWebControl.value != null) {
      oWebControl.JS_Resize(
        tagDomObj.clientWidth,
        tagDomObj.clientHeight
      );
      this.setWndCover();
    }
  });

  // 初始化播放器插件
  nextTick(() => {
    initPlugin();
  })
})

onBeforeUnmount(() => {
  if (oWebControl.value != null) {
    // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
    oWebControl.JS_HideWnd();
    // 销毁当前播放的视频
    oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
    // 断开与插件服务连接
    oWebControl.JS_Disconnect();
  }
})



const initPlugin = () => {
  oWebControl = new WebControl({
    szPluginContainer: "playWnd", // 指定容器id
    iServicePortStart: 15900, // 指定起止端口号，建议使用该值
    iServicePortEnd: 15900,
    szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
    cbConnectSuccess: () => {
      // 创建WebControl实例成功
      oWebControl
        .JS_StartService("window", {
          // WebControl实例创建成功后需要启动服务
          // 值"./VideoPluginConnect.dll"写死
          dllPath: "./VideoPluginConnect.dll",
        })
        .then(
          function () {
            // 设置消息回调
            oWebControl.JS_SetWindowControlCallback({
              // cbIntegrationCallBack: cbIntegrationCallBack,
            });
            //JS_CreateWnd创建视频播放窗口，宽高可设定
            oWebControl
              .JS_CreateWnd("playWnd", 1152, 581, { bEmbed: true })//这一部分很重要，两个参数为你盒子的宽高，这样是写死是防止组件加载之前出现白屏；bEmbed: true 防止窗口闪烁
              .then(function () {
                // 创建播放实例成功后初始化
                init();
              });
          },
          function () {
            // 启动插件服务失败
          }
        );
    },
    // 创建WebControl实例失败
    cbConnectError: function () {
      // 这里写创建WebControl实例失败时的处理步骤,下面的代码仅做参看，具体实现步骤根据个人需求进行编写！！！！！！！！


      // console.log(0);
      // oWebControl.value = null;
      // // 程序未启动时执行error函数，采用wakeup来启动程序
      // window.WebControl.JS_WakeUp("VideoWebPlugin://");
      // initCount++;
      // if (initCount < 3) {
      //   setTimeout(function () {
      //     initPlugin();
      //   }, 3000);
      // } else {
      //   setTimeout(function () {
      //     setTimeout(function () {
      //       $router.push('/home/PlugDown')
      //     }, 4000)
      //   }, 4000)
      // }
    },
    cbConnectClose: () => {
      // 异常断开：bNormalClose = false
      // JS_Disconnect正常断开：bNormalClose = true
      // console.log("cbConnectClose");
      oWebControl.value = null;
    },
  });
  // oWebControl.JS_CuttingPartWindow(500, 500, 500, 500);

}




// 初始化
const init = (callback) => {
  getPubKey(() => {
    let appkey = objData.value.appkey;                   //综合安防管理平台提供的appkey，必填
    let secret = setEncrypt(objData.value.secret); //综合安防管理平台提供的secret，必填
    let ip = objData.value.ip;                           //综合安防管理平台IP地址，必填
    let playMode = objData.value.playMode;                //初始播放模式：0-预览，1-回放
    let port = objData.value.port;                        //综合安防管理平台端口，若启用HTTPS协议，默认443
    let snapDir = "D:\\SnapDir";                        //抓图存储路径
    let videoDir = "D:\\VideoDir";                      //紧急录像或录像剪辑存储路径
    let layout = objData.value.layout;                   //playMode指定模式的布局
    let enableHTTPS = 1;                                //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
    let encryptedFields = "secret";                     //加密字段，默认加密领域为secret
    let showToolbar = 1;                                //是否显示工具栏，0-不显示，非0-显示
    let showSmart = 0;                                  //是否显示移动框线框，0-不显示，非0-显示
    let buttonIDs =
      "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
    // var toolBarButtonIDs = "2049,2304" // 工具栏上自定义按钮
    oWebControl
      .JS_RequestInterface({
        funcName: "init",
        argument: JSON.stringify({
          appkey: appkey,         //API网关提供的appkey
          secret: secret,         //API网关提供的secret
          ip: ip,                 //API网关IP地址
          playMode: playMode,      //播放模式（决定显示预览还是回放界面）
          port: port,             //端口
          snapDir: snapDir,       //抓图存储路径
          videoDir: videoDir,     //紧急录像或录像剪辑存储路径
          layout: layout,         //布局
          enableHTTPS: enableHTTPS,   //是否启用HTTPS协议
          encryptedFields: encryptedFields, //加密字段
          showToolbar: showToolbar, //是否显示工具栏
          showSmart: showSmart,   //是否显示智能信息
          buttonIDs,              //自定义工具条按钮
        }),
      })
      .then(function (oData) {
        oWebControl.JS_Resize(playWndWidth.value, playWndHeight.value); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
        if (callback) {
          callback();
        }
        // 隐藏
        // oWebControl.JS_HideWnd()
      });
  });
}

// RSA 加密
let setEncrypt = (value) => {
  let encrypt = new window.JSEncrypt();
  encrypt.setPublicKey(pubKey);
  return encrypt.encrypt(value);
}
// 获取公钥
const getPubKey = (callback) => {
  oWebControl
    .JS_RequestInterface({
      funcName: "getRSAPubKey",
      argument: JSON.stringify({
        keyLength: 1024,
      }),
    })
    .then(function (oData) {
      if (oData.responseMsg.data) {
        pubKey = oData.responseMsg.data;
        callback();
      }
    });
}



// 调用这个函数可进行视频播放
// 视频预览功能
const previewVideo = (data) => {
  let cameraIndexCode = data;  // 获取输入的监控点编号值，必填
  let streamMode = 0;          // 主子码流标识：0-主码流，1-子码流
  let transMode = 1;           // 传输协议：0-UDP，1-TCP
  let gpuMode = 0;             // 是否启用GPU硬解，0-不启用，1-启用
  let wndId = -1;              // 播放窗口序号（在2x2以上布局下可指定播放窗口）

  oWebControl.JS_RequestInterface({
    funcName: "startPreview",
    argument: JSON.stringify({
      cameraIndexCode: cameraIndexCode, // 监控点编号
      streamMode: streamMode,                 // 主子码流标识
      transMode: transMode,                   // 传输协议
      gpuMode: gpuMode,                       // 是否开启GPU硬解
      wndId: wndId,                           // 可指定播放窗口
    }),
  })
    .then(function () {
      oWebControl.JS_SetWindowControlCallback({

      });
    });
}

</script>

<style lang="scss" scoped>
.main {
  position: fixed;
  top: 50%;
  left: 20%;
  transform: translateY(-50%);
  width: 60vw;
  height: 60vh;
  margin: auto;
  background-color: #ccc;
}
</style>