海康威视视频3.3版本对接

下载

下载版本为v3.3，下载解压后文件如p2

---

对接文档

引入jquery-1.7.1.min.js、webVideoCtrl.js、jsVideoPlugin-1.0.0.min.js三个文件，在index.html中仅引入jquery-1.7.1.min.js、webVideoCtrl.js即可。在全局中可以直接使用WebVideoCtrl，如果无效前面加上windows,以下代码即可登录成功。成功后参考博客https://blog.csdn.net/hero8011/article/details/133158055

<template>
  <div ref="videoRef" class="videoBox" id="divPlugin">1111</div>
</template>

<script>
export default {
  mounted() {
    let iRet = WebVideoCtrl.I_CheckPluginInstall();
    if (-1 == iRet) {
      alert("您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装！");
      return;
    }
    this.initPlugin();
  },
  methods: {
    //插件初始化
    initPlugin() {
      WebVideoCtrl.I_InitPlugin({
        bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
        iWndowType: 1,
        cbSelWnd: function (xmlDoc) {
          g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
          const szInfo = "当前选择的窗口编号：" + g_iWndIndex;
          console.log(szInfo, "szInfo");
        },
        cbDoubleClickWnd: function (iWndIndex, bFullScreen) {
          let szInfo = "当前放大的窗口编号：" + iWndIndex;
          if (!bFullScreen) {
            szInfo = "当前还原的窗口编号：" + iWndIndex;
          }
          console.log(szInfo, "szInfo");
        },
        cbEvent: function (iEventType, iParam1, iParam2) {
          if (2 == iEventType) {
            // 回放正常结束
            console.log("窗口" + iParam1 + "回放结束！");
          } else if (-1 == iEventType) {
            console.log("设备" + iParam1 + "网络错误！");
          } else if (3001 == iEventType) {
            clickStopRecord(g_szRecordType, iParam1);
          }
        },
        cbInitPluginComplete: function () {
          const oLiveView = {
            iProtocol: 1, // protocol 1：http, 2:https
            szIP: "xxxx", // protocol ip
            szPort: "xx", // protocol port
            szUsername: "admin", // device username
            szPassword: "xxxxxxx", // device password
            iStreamType: 1, // stream 1：main stream  2：sub-stream  3：third stream  4：transcode stream
            iChannelID: 1, // channel no
            bZeroChannel: false, // zero channel
          };
          WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then(
            () => {
              WebVideoCtrl.I_Login(
                oLiveView.szIP,
                oLiveView.iProtocol,
                oLiveView.szPort,
                oLiveView.szUsername,
                oLiveView.szPassword,
                {
                  timeout: 3000,
                  async: false,
                  success: function (xmlDoc) {
                    console.log(" 登录成功！");
                  },
                  error: function (oError) {
                    console.log(" 登录失败！", oError);
                  },
                }
              );
              // 检查插件是否最新
              WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
                if (bFlag) {
                  alert(
                    "检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！"
                  );
                  return;
                }
              });
            },
            () => {
              alert(
                "插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！"
              );
              return;
            }
          );
        },
      });
    }, 
  },
};
</script>

<style>
.videoBox {
  width: 300px;
  height: 400px;
  border: 1px solid #ccc;
}
</style>