将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>