vue海康插件接入视频

海康视频对接

1.登录海康开放平台，下载插件和demo

https://open.hikvision.com/resourceCenter

要选择平台对应的版本

安装 VideoWebPlugin.exe 插件包，可以打开demo页面，填入重要数据，测试视频是否可调取

官方文档的开发流程

代码实现

1.引入依赖

// 1.引入依赖，注意要在index.html中引入 
<script src="jquery-1.12.4.min.js"></script>
<script src="jsencrypt.min.js"></script> <!-- 用于RSA加密 -->
<script src="web-control_1.2.5.min.js"></script> <!-- 用于前端与插件交互

<template> <div id="plugin" class="players-box"></div> </template>

const { WebControl, JSEncrypt, } = window;
// 公共密钥
const pubKey = ref<string>('');
let initCount = 0;
let oWebControl :any = null;
const width = ref<number>(0);
const height = ref<number>(0);

onMounted(() => {
  const container = document.querySelector('#plugin');

  width.value = getStyle(container, 'width').replace(/px/g, '');
  height.value = getStyle(container, 'height').replace(/px/g, '');

  initPlugin('plugin');
  window.addEventListener('resize', reSize);
});
onUnmounted(() => {
  // 销毁摄像头组件
  window.removeEventListener('resize', reSize);

  return oWebControl && oWebControl.JS_DestroyWnd();
});
/* 
* 初始化播放区域 
* 初始化WebControl实例，加载播放插件并设置消息回调 
* 插件服务启动成功后创建插件窗口 
*/
const initPlugin = (domId:string) => {
  if (!WebControl) {
    return;
  }
  oWebControl = new WebControl({
    // 指定容器id
    szPluginContainer: domId,
    // 指定起止端口号，建议使用该值
    iServicePortStart: 15900,
    iServicePortEnd: 15900,
    // 用于IE10使用ActiveX的clsid
    szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11',
    // 创建WebControl实例成功
    cbConnectSuccess: () => {
      // WebControl实例创建成功后需要启动服务
      oWebControl.JS_StartService('window', {
        // 值"./VideoPluginConnect.dll"写死
        dllPath: './VideoPluginConnect.dll',
      }).then(() => {
        // 启动插件服务成功
        oWebControl.JS_SetWindowControlCallback({
          // 设置消息回调
          cbIntegrationCallBack: null,
        });

        oWebControl.JS_CreateWnd(domId, width.value, height.value)
          .then(() => {
            // 创建播放实例成功后初始化
            init();
          });
      });
    },
    // 创建WebControl实例失败
    cbConnectError: () => {
      oWebControl = null;
      // 程序未启动时执行error函数，采用wakeup来启动程序
      WebControl.JS_WakeUp('VideoWebPlugin://');
      initCount++;
      if (initCount < 3) {
        setTimeout(() => {
          initPlugin();
        }, 3000);
      } else {
        noPlugin();
      }
    },
    cbConnectClose: () => {
      // 异常断开：bNormalClose = false JS_Disconnect正常断开：bNormalClose = true
      noPlugin();
      oWebControl = null;
    },
  });
};

/* 获取公钥 */
const getPubKey = (callback) => {
  oWebControl.JS_RequestInterface({
    funcName: 'getRSAPubKey',
    argument: JSON.stringify({
      keyLength: 1024,
    }),
  }).then(({ responseMsg: { data, }, }) => {
    if (data) {
      pubKey.value = data;

      return callback && callback();
    }
  });
};

/* RSA加密 */
const setEncrypt = (value) => {
  const encrypt = new JSEncrypt();

  encrypt.setPublicKey(pubKey.value);

  return encrypt.encrypt(value);
};
/* 
 * 初始化预览 
 * 申请密钥并进行初始化 * 需要填入appkey,secret,网关IP和端口
 */
const init = () => {
  getPubKey(() => {
    oWebControl.JS_RequestInterface({
      funcName: 'init',
      argument: JSON.stringify({
        // API网关提供的appkey
        appkey: 'xxxxxxx',
        // API网关提供的secret
        secret: setEncrypt('xxxxxxxxxxxxx'),
        // API网关IP地址
        ip: 'xxxxxxxx',
        // 播放模式（决定显示预览还是回放界面）
        playMode: 0,
        // 端口
        port: xxx,
        // 抓图存储路径
        snapDir: 'D:\\SnapDir',
        // 紧急录像或录像剪辑存储路径
        videoDir: 'D:\\VideoDir',
        layout: '1x1',
        // 是否启用HTTPS协议
        enableHTTPS: 1,
        // 加密字段
        encryptedFields: 'secret',
        // 是否显示工具栏
        showToolbar: 1,
        // 是否显示智能信息
        showSmart: 1,
      }),
    }).then((oData) => {
      console.log(oData);// 打印接口失败返回信息
      oWebControl.JS_Resize(width.value, height.value);
      // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
      startPreview(indexCode)
    });
  });
};

/* 开始预览 */
const startPreview = (code, index = 0) => {
  oWebControl.JS_RequestInterface({
    funcName: 'startPreview',
    argument: JSON.stringify({
      // 监控点编号
      cameraIndexCode: code,
      // 主子码流标识
      streamMode: 0,
      // 传输协议
      transMode: 1,
      // 是否开启GPU硬解
      gpuMode: 0,
      // 可指定播放窗口
      wndId: index + 1,
    }),
  });
};

/**
 * 设置视图布局
 * @param {string} data data “1x1”、“2x2”、“3x3”、“4x4”、“5x5”、“1x2”、“1+2”、“1+5”、“1+7”、 “1+8”、“1+9”、“1+12”、“1+16”、“4+9”、“1+1+12”、“3+4”、“1x4”、“4x6”
 * @returns {void}
 */
const setLayout = (data) => {
  if (!(oWebControl && oWebControl.JS_RequestInterface)) {
    return;
  }
  oWebControl.JS_RequestInterface({
    funcName: 'setLayout',
    argument: JSON.stringify({
      layout: data,
    }),
  }).then(() => {
      startPreview(code);
  });
};

实现效果

vue海康插件接入视频

猜你喜欢