海康威视web插件版-vue3

1、下载web插件

官网地址：https://open.hikvision.com/download/5cda567cf47ae80dd41a54b3?type=20&id=77c7f9ab64da4dbe8b2df7efe3365ec2
下载并安装

2、引入web插件包

在 public/index.html中引入插件

复制代码

<script src="/webVideoCtrl.js"></script>
<script src="jsVideoPlugin-1.0.0.min.js"></script>
<script src="/jquery-1.7.1.min.js"></script> <details>

3、页面调用插件

1、初始化插件

WebVideoCtrl.I_InitPlugin({options})

复制代码

// 初始化插件
const initVideoPlay = () => {
  // 添加检查
  if (typeof WebVideoCtrl === 'undefined') {
    console.error('WebVideoCtrl 对象未定义，请检查插件是否正确加载');
    return;
  }
  if (isPluginInit.value) {
    stopVideoPlay(); // 先销毁旧插件
  }
  console.log('初始化视频播放', divName.value)
  WebVideoCtrl.I_InitPlugin({
    iWndowType: 2,
    bWndFull: true,
    szBorderColor: "#FF0000",
    bDebugMode: true,
    bWndFull: true,
    cbInitPluginComplete: () => {
      InsertOBJECTPlugin()
    },
  });
}

2、嵌入播放插件

复制代码

// 嵌入播放插件
const InsertOBJECTPlugin = () => {
  // divName.value 为指定dom的id
  WebVideoCtrl.I_InsertOBJECTPlugin(divName.value).then(
      () => {
        isPluginInit.value = true; // 标记插件初始化成功

        // 初始化完成后设置插件可见
        nextTick(() => {
          isVisible.value = true;
        })

        // 检查插件是否最新
        WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
          if (bFlag) {
            alert("检测到新的插件版本，请升级！");
          }
        });
        // 初始化成功后，自动登录和播放
        clickLogin();
      },
      () => {
        isVisible.value = false;
        alert("插件初始化失败，请确认是否已安装插件并启用！");
      }
  );
}

3、登录账号

复制代码

const clickLogin = () => {
  if (!hkvInfo.value.ip || !hkvInfo.value.username || !hkvInfo.value.password) {
    ElMessage.error('请检查摄像头配置');
    return;
  }
  szDeviceIdentify.value = hkvInfo.value.ip + "_" + hkvInfo.value.port;
  WebVideoCtrl.I_ArrangeWindow("1*2").then(() => { // 设置画面分屏1*2布局
    console.log("窗口分割成功！");
  }, (oError) => {
    var szInfo = "窗口分割失败！";
    console.log(szInfo, oError.errorCode, oError.errorMsg);
  });
  WebVideoCtrl.I_Login(hkvInfo.value.ip, hkvInfo.value.type, hkvInfo.value.port, hkvInfo.value.username, hkvInfo.value.password, {
    timeout: 3000,
    success: function () {
      console.log(szDeviceIdentify.value + " 登录成功！");
      // 登录成功后自动预览
      clickStartRealPlay();
      clickStartRealPlay_HOT()
    },
    error: function (oError) {
      console.error(szDeviceIdentify.value + " 登录失败！", oError);
      // 登录失败时隐藏插件
      isVisible.value = false;
    }
  });
}

4、预览视频

复制代码

// 开始实时预览
const clickStartRealPlay = (iStreamType = 1) => {
  // 默认主码流
  let oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex.value);

  if (null == szDeviceIdentify.value) {
    console.warn("未登录，无法开始预览");
    return;
  }

  var startRealPlay = function () {
    WebVideoCtrl.I_StartRealPlay(szDeviceIdentify.value, {
      iStreamType: iStreamType,
      iChannelID: 1, // 默认预览通道1，您可以根据需要修改
      bZeroChannel: false,
      success: function () {
        isVisible.value = true;
        console.log(szDeviceIdentify.value + " 开始预览成功！");
        // 预览成功后确保插件可见
      },
      error: function (oError) {
        console.error(szDeviceIdentify.value + " 开始预览失败！", oError);
        // 预览失败时隐藏插件
        isVisible.value = false;
      },
    });
  };

  if (oWndInfo != null) {
    WebVideoCtrl.I_Stop({
      success: function () {
        console.log("已停止上一个预览，开始新的预览...");
        startRealPlay();
      },
    });
  } else {
    startRealPlay();
  }
}

注:由于是插件模式，所以页面出现的弹窗下拉菜单之类的会被视频窗口遮挡，所以需要在合适的时候对窗口进行隐藏