vue3海康实施监控视频流程(仅支持播放视频)

初始化，创建容器

    <div id="divPlugin"></div>
      WebVideoCtrl.I_InitPlugin({
        bWndFull: true,     //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
        iWndowType: 1,
        cbSelWnd: function (xmlDoc) {
          g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
          var szInfo = "当前选择的窗口编号：" + g_iWndIndex;
          showCBInfo(szInfo);
        },
        cbDoubleClickWnd: function (iWndIndex, bFullScreen) {
          var szInfo = "当前放大的窗口编号：" + iWndIndex;
          if (!bFullScreen) {
            szInfo = "当前还原的窗口编号：" + iWndIndex;
          }
          showCBInfo(szInfo);
        },
        cbEvent: function (iEventType, iParam1, iParam2) {
          if (2 == iEventType) {// 回放正常结束
            showCBInfo("窗口" + iParam1 + "回放结束！");
          } else if (-1 == iEventType) {
            showCBInfo("设备" + iParam1 + "网络错误！");
          } else if (3001 == iEventType) {
            clickStopRecord(g_szRecordType, iParam1);
          }
        },
        cbInitPluginComplete: function () {
          WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then(() => {
            WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
              if (bFlag) {
                alert("检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！");
              }
            });
          }, () => {
            alert("插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的     HCWebSDKPlugin.exe安装！");
          });
    }

const szIP // 视频ip const szPort //视频端口 const szUsername // 用户名 const szPassword // 密码

    `获取端口`
    WebVideoCtrl.I_GetDevicePort(szDeviceIdentify).then(
      (oPort) => {
        console.log(oPort,'oPort');
        iRtspPort.value = oPort.iRtspPort;
      },
      (oError) => {
        alert('获取端口失败')
      }
    );

获取通道

WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, {
  success: function (xmlDoc) {
    console.log(xmlDoc,'xmlDoc');
  },
  error: function (oError) {
    alert('获取模拟通道失败')
  },
});

预览并生成视频

WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
  iStreamType: iStreamType.value,
  iChannelID: iChannelID.value,
  bZeroChannel: bZeroChannel.value,
  iPort: iRtspPort.value,
  success: function () {
    // szInfo = "开始预览成功！";
    // showOPInfo(szDeviceIdentify + " " + szInfo);
  },
  error: function (oError) {
    console.log(oError);
    alert('预览失败')
    // showOPInfo(szDeviceIdentify + " 开始预览失败！", oError.errorCode, oError.errorMsg);
  }
});

注意事项：先初始化、获取端口、获取通道，预览并生成视频