海康web无插件开发，多屏同时预览

先附上链接海康web无插件

通道后端生成返回，所以我这里不需要模拟

//js文件，main.js引入

export default WebVideo = {
  // 全局保存当前选中窗口
  //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
  //g_iWndIndex: 0,
  indexAll:{},    //窗口集合
  //插件宽高  (单位px,100%默认撑满插件容器)
  szWidth: '100%',
  szHeight: '100%',
  // 分屏类型 1:1*1  2:2*2  3：3*3  
  iWndowType: 1,
  // ip
  szDeviceIdentify:''
  // 登录信息
  userInfo:{},
  // 初始化插件
  init: function (options) {
    return new Promise(function (resolve, reject) {
      WebVideo.szDeviceIdentify = options.ip + "_" + options.port;
      WebVideo.userInfo = options;

      let iWndowType = options.iWndowType ?? WebVideo.iWndowType;

      WebVideoCtrl.I_InitPlugin(WebVideo.szWidth, WebVideo.szHeight, {
        //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
        bWndFull: true,
        //插件背景颜色  bg，子窗口bg，窗口边框，窗口边框选中
        szColorProperty: "plugin-background:#18293c; sub-background:#18293c; sub-border:#18293c; sub-border-select:#0000ff", //2:PS 11:MP4
        //分屏
        iWndowType: iWndowType,
        //选中当前窗口的回调
        cbSelWnd: function (xmlDoc) {
          WebVideo.g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
          console.log(WebVideo.g_iWndIndex)
        },
        // 插件初始化完成回调,必带项
        cbInitPluginComplete: () => {
          WebVideoCtrl.I_InsertOBJECTPlugin(options.domID);
          resolve();
        }
      })
    })

  },
// 登录
  loginOn: function(){
    return new Promise(function (resolve, reject) {
    let info = WebVideo.userInfo;

    if ("" == info.ip || "" == info.port) {
      return;
    }
    
    var iRet = WebVideoCtrl.I_Login(info.ip, 1, info.port, info.username, info.password, {
      success: function (xmlDoc) {    
        console.log("登陆成功");        
        setTimeout(function () {
          resolve();
        }, 10);
      },
      error: function (status, xmlDoc) {
        console.log("登录失败！", status, xmlDoc);     
      }
    });

    if (-1 == iRet) {
      console.log("已登录过！");
    }
  })


  },
// 退出登录
  logout: function(){
    if (null == webVideo.szDeviceIdentify) {
      return;
    }

    var iRet = WebVideoCtrl.I_Logout(webVideo.szDeviceIdentify);
    if (0 == iRet) {
      console.log("退出成功！");
    } else {
      console.log("退出失败！");
    }
  },
/**
   * options={
   *  iWndIndex-播放窗口（不传默认为0)
   *  iStreamType 码流类型 1-主码流，2-子码流，默认使用主码流预览
   *  iChannelID 播放通道号，默认通道 1
   *  bZeroChannel 是否播放零通道，默认为 false
   *  iPort RTSP 端口号，可以选择传入，如果不传，开发包会自动判断设备的 RTSP 端口
   * }
   */
  // 开始预览  设备标识（模拟通道），窗口编号
  startRealPlay: function(iChannelID,iWndIndex ){
        
    const videoIndex = WebVideoCtrl.I_GetWindowStatus(iWndIndex);

    if (null == WebVideo.szDeviceIdentify) {
      return;
    }

    var startRealPlayVideo = function () {
      WebVideoCtrl.I_StartRealPlay(WebVideo.szDeviceIdentify, {
        iChannelID: iChannelID,
        bZeroChannel: false,
        iStreamType: 2,
        iWndIndex:iWndIndex,
        success: function () {
            console.log('预览成功')
        },
        error: function (status, xmlDoc) {
          if (403 === status) {
              console.log('设备不支持Websocket取流')
          } else {
              console.log('预览失败')
          }
        }
      });
    };

    if (videoIndex  != null) {// 已经在播放了，先停止
      WebVideoCtrl.I_Stop({
        success: function () {
          startRealPlayVideo();
        }
      });
    } else {
      startRealPlayVideo();
    }
    
  },
// 停止预览
  stopRealPlay: function(iWndIndex){
      WebVideoCtrl.I_Stop({
        iWndIndex:iWndIndex,
        success: function () {
          console.log('停止预览成功')
        },
        error: function () {
          console.log('停止预览失败')
        }
      });
  },
	
//全屏 --  先点击窗口，再触发事件
clickFullScreen() {
    WebVideoCtrl.I_FullScreen(true);
}

//根据窗口编号全屏
//想了好多办法，最后改了源码... ...
//有更好的办法，请私信我哦 (￣▽￣)／
//webVideoCtrl.js
//this.I_FullScreen = function (e) {
//   ct() ? p.JS_FullScreenSingle(f) : p.HWP_FullScreenDisplay(e)
//}
//修改为
//this.I_FullScreen = function (wndi,e) {
//   ct() ? p.JS_FullScreenSingle(wndI) : p.HWP_FullScreenDisplay(e)
//}
	
clickFullScreen(iWndIndex) {
   WebVideoCtrl.I_FullScreen(iWndIndex,true);
}

}

 <div id="divPlugin" class="plugin full" ref="plugin"></div>

//vue.js

videoPlay(){
 	let that = this;
	let optionInfo = {
        iWndowType: 2,
        domID: "divPlugin",
        ip: options[0].ipUrl,	//ip,port,account,password,都是一样的，取了第一个
        port: options[0].port,
        username: options[0].userName,
        password: decrypt(options[0].password),
      };
      that.$HK.init(optionInfo).then(() => {
        that.$HK.loginOn().then(() => {
          for (let i = 0; i < 4; i++) {
            that.$HK.startRealPlay(that.list[i].deviceChannel, i);
          }
        });
      });
}


close(){
	//1.this.$HK.停止预览
	//2.this.$HK.退出登录
	//一定要退干净，不然出bug
}