将WebVideoCtrl.js  和jquery 引入index.html 中

封装一个WebVideo.js
 

import $ from "jquery";

const WebVideo = {
  g_iWndIndex: 0, //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
  g_oLocalConfig: null, //本地配置
  ERROR_CODE_UNKNOWN: 1000, //未知错误
  ERROR_CODE_NETWORKERROR: 1001, //网络错误
  ERROR_CODE_PARAMERROR: 1002,
  //登录模块
  ERROR_CODE_LOGIN_NOLOGIN: 2000, // 未登录
  ERROR_CODE_LOGIN_REPEATLOGIN: 2001, //设备已登录，重复登录
  ERROR_CODE_LOGIN_NOSUPPORT: 2002, //当前设备不支持Digest登录
  //预览播放
  ERROR_CODE_PLAY_PLUGININITFAIL: 3000, //插件初始化失败
  ERROR_CODE_PLAY_NOREPEATPLAY: 3001, //当前窗口已经在预览
  ERROR_CODE_PLAY_PLAYBACKABNORMAL: 3002, //回放异常
  ERROR_CODE_PLAY_PLAYBACKSTOP: 3003, //回放停止
  ERROR_CODE_PLAY_NOFREESPACE: 3004, //录像过程中，硬盘容量不足
  // 对讲
  ERROR_CODE_TALK_FAIL: 5000, //语音对讲失败
  version: 'V3.3.0build20230322',

  init: function (options) {
    let that = this;
    return new Promise((resolve, reject) => {
      WebVideoCtrl.I_InitPlugin({
        bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
        iWndowType: options.iWndowType,
        cbInitPluginComplete: function () {
          console.log(options.domId);
            WebVideoCtrl.I_InsertOBJECTPlugin(options.domId).then(() => {
              // 检查插件是否最新
              WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
                if (bFlag) {
                  console.log("检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！");
                }
              });

            }, () => {
              console.log("插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！");
            });
          resolve();
          console.log('初始化成功')
        }
      })
    })
  },
  // 停止预览
  I_StopAllPlay(){
    WebVideoCtrl.I_StopAllPlay();
  },
  clickLogout(ip) {

    return new Promise((resolve,reject) => {
      var szDeviceIdentify = ip;

      if (null == szDeviceIdentify) {
        return;
      }

      WebVideoCtrl.I_Logout(szDeviceIdentify).then(() => {
        console.log(szDeviceIdentify + " " + "退出成功！");
        resolve();
      }, () => {
        console.log(szDeviceIdentify + " " + "退出失败！");
      });
    })

  },
  I_DestroyPlugin:function(){
    WebVideoCtrl.I_DestroyPlugin()
  },
  clickLogin: function (options) {
    return new Promise((resolve, reject) => {
      var szIP =  options.ip,
        szPort = options.port,
        szUsername = options.username,
        szPassword = options.password;

      if ("" == szIP || "" == szPort) {
        return;
      }
      var szDeviceIdentify = szIP + "_" + szPort;
      WebVideoCtrl.I_Login(szIP, 1, szPort, szUsername, szPassword, {
        timeout: 3000,
        success: function (xmlDoc) {
          console.log(szDeviceIdentify + " 登录成功！")
          resolve();
          WebVideo.ip = szDeviceIdentify;
        },
        error: function (oError) {
          if (WebVideo.ERROR_CODE_LOGIN_REPEATLOGIN === oError.errorCode) {
            console.log(szDeviceIdentify + " 已登录过！")
          } else {
            console.log(szDeviceIdentify + " 登录失败！")
            // showOPInfo(szDeviceIdentify + " 登录失败！", oError.errorCode, oError.errorMsg);
          }
        }
      });
    })

  },
  clickStopRealPlay() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0),
      szInfo = "";
    console.log(oWndInfo,'这是什么')
    return
    if (oWndInfo != null) {
      WebVideoCtrl.I_Stop({
        success: function() {
          szInfo = "停止预览成功！";
          console.log(oWndInfo.szDeviceIdentify + " " + szInfo);
        },
        error: function(oError) {
          console.log(szDeviceIdentify + " 停止预览失败！", oError.errorCode, oError.errorMsg);
        }
      });
    }
  },
  clickStartRealPlay: function (iStreamType,iChannelID,iWndIndex) {
    return new Promise((resolve, reject) => {
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(WebVideo.g_iWndIndex),
        szDeviceIdentify = WebVideo.ip,
        iRtspPort = parseInt($("#rtspport").val(), 10),
        iChannelID = parseInt($("#channels").val(), 10),
        szInfo = "";

      if ("undefined" === typeof iStreamType) {
        iStreamType = 1;
      }

      if (null == szDeviceIdentify) {
        return;
      }
      var startRealPlay = function () {
        WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
          iStreamType:iStreamType,
          iChannelID: WebVideo.iChannelID ? WebVideo.iChannelID : 1,
          iWndIndex:iWndIndex ? iWndIndex : '',
          success: function () {
            szInfo = "开始预览成功！";
            console.log(szDeviceIdentify + " " + szInfo);
            resolve()
          },
          error: function (oError) {
            console.log(szDeviceIdentify + " 开始预览失败！", oError.errorCode, oError.errorMsg);
          }
        });
      };

      if (oWndInfo != null) { // 已经在播放了，先停止
        WebVideoCtrl.I_Stop({
          success: function () {
            startRealPlay();
          }
        });
      } else {
        startRealPlay();
      }
    })
  }
}

export default WebVideo

页面中使用
 

单个屏幕多个ip

  

    
    停止预览
    登录
    退出11
    
  



.clear {
  clear: both;
}