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>

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();
  }
}

• 注:由於是插件模式，所以頁面出現的彈窗 下拉菜單之類的會被視頻窗口遮擋，所以需要在合適的時候對窗口進行隱藏