Vue 海康监控多屏幕展示 WebVideoCtrl 3.3.0

将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

页面中使用
 

<template><div>    <div :id="'divPlugin' + index" v-for="(item,index) in list" :key="index" class="plugin" style="width: 600px;height: 400px;float: left"></div></div></template><script>import WebVideo from "../assets/WebVideo";export default {data() {return {        list:[          {            ip:'',            port:8888,            username:'',            password:''          },          {            ip:'',            port:8999,            username:'',            password:''          }        ]}},created() {      this.initLogin();},methods: {      VideoPlayers(domId,options){        return new Promise((resolve,reject) => {          WebVideo.init({            domId:domId          }).then(() => {            setTimeout(() => {              WebVideo.clickLogin(options).then(res => {                WebVideo.clickStartRealPlay();                resolve();              })            },1000)          })        })      },      async initLogin(){        for(var i = 0; i < this.list.length; i++){          await this.VideoPlayers('divPlugin' + i,this.list[i])        }      },}}</script><style></style>

单个屏幕多个ip

<template>  <div><!--        <div    :id="'divPlugin' + index" v-for="(item,index) in list" :key="index" class="plugin" style="width: 600px;height: 400px;float: left"></div>-->    <div id="divPlugin" class="plugin" style="width: 600px;height: 400px;"></div>    <button @click="refreshCom">停止预览</button>    <button @click="initLogin">登录</button>    <div @click-="unLogin()">退出11</div>    <div style="height: 1000px"></div>  </div></template><script>import WebVideo from "../assets/WebVideo";export default {  data() {    return {      list: []    }  },  created() {    // this.initPlugin();    this.initLogin();    },  methods: {    refreshCom() {     this.unLogin()      WebVideo.I_DestroyPlugin();    },    async unLogin() {      for (var i = 0; i < this.list.length; i++) {        await WebVideo.clickLogout(this.list[i].ip + '_' + this.list[i].port).then(res => {          console.log('退出成功')        });      }    },    VideoPlayers(domId,options){      return new Promise((resolve,reject) => {        WebVideo.init({          domId:domId        }).then(() => {          setTimeout(() => {            WebVideo.clickLogin(options).then(res => {              WebVideo.clickStartRealPlay();              resolve();            })          },1000)        })      })    },    clickStopRealPlay() {      WebVideo.clickStopRealPlay();    },    async initPlugin() {      for(var i = 0; i < this.list.length;i++){       await this.VideoPlayers('divPlugin' + i,this.list[i])      }    },    initLogin() {      let that = this;      WebVideo.init({        domId: 'divPlugin',        iWndowType:2      }).then(() => {        setTimeout(() => {          for (var i = 0; i < that.list.length; i++) {            let index = i;            WebVideo.clickLogin(that.list[i]).then(() => {              WebVideo.clickStartRealPlay(1, 1, index)            })          }        }, 1000)      })      // for(var i = 0; i < this.list.length; i++){      //   await this.VideoPlayers('divPlugin' + i, this.list[i])      // }      // setTimeout(() => {      //   this.unLogin();      // },1000)    },  }}</script><style>.clear {  clear: both;}</style>