海康监控视频非分屏需求，一个页面引用多个视频组件;

js文件位置

index.html 引入js文件

   //根据自己路径引入哈<script src="static/haiKangWeb3.0/jquery-1.7.1.min.js"></script><script type="text/javascript" id="videonode" src="static/haiKangWeb3.0/webVideoCtrl.js"></script>

新建子组件videoMonitorings.vue

//子组件
<template><div class="video"><div :id="videoId" class="plugin"/></div>
</template><script>
import {WebVideo} from "../../../public/static/haiKangWeb3.0/webVideo.js";
import {message} from "@/utils/message";
import {reactive,onMounted,onBeforeUnmount,onUnmounted,toRefs,ref,watch
} from "vue";export default {name: "index",props: {videoId: {type: String},hkvInfo: {type: Object || Array,require: true},},// emits:['changeFlag'],setup(props,{emit}) {const {dataList} = toRefs(props);const hkvInfo = ref({});const videoId = ref();const channels = ref([])const state = reactive({webVideo: "",web: {},});watch(props.hkvInfo, (newVal, oldvalue) => {if (newVal) {console.log('newVal', newVal)const web = new WebVideo();hkvInfo.value = newValvideoId.value = newVal.id;let t = newVal.loadingTime || 1000setTimeout(() => {initS();}, t)} else {initS();}}, {deep: true,immediate: true,})const initS = () => {// 初始化WebVideoCtrl.I_InitPlugin({bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持iWndowType: 1,// 画面分割数 1 就是1*1   2就是2*2cbSelWnd: function (xmlDoc) {//此属性是窗口分割切换窗口时触发//clickStartRealPlay();// console.log("当前选择的窗口编号是1");},cbInitPluginComplete: function () {WebVideoCtrl.I_InsertOBJECTPlugin(videoId.value).then(() => {// 检查插件是否最新WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {if (bFlag) {let str = "检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！"message(str, {type: "warning"});}});},() => {let str1 = "插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！";message(str1, {type: "warning"});});},});setTimeout(() => {let cw = Math.round(document.body.clientWidth / 1920);let ch = Math.round(document.body.clientHeight / 1080);let width = parseInt((hkvInfo.value.width * cw), 10);let height = parseInt((hkvInfo.value.height * ch), 10);if (height <= 200) {height = 200;}if (height <= 200) {height = 200;}let w1 = (window.innerWidth - document.getElementById(videoId.value).offsetLeft) - 1500;let w2 = document.getElementById(videoId.value).clientHeight;console.log('00000===>', width, height);// 对窗口大小重新规划WebVideoCtrl.I_Resize(width,height);setVideoWindowResize(videoId.value, width, height);clickLogin();}, 2000);}// 根据设备宽高和windowchange设置窗口大小const setVideoWindowResize = (pid, width, height) => {document.getElementById(pid).style.width = width + 'px';document.getElementById(pid).style.height = height + 'px';}// 登录const clickLogin = () => {var szIP = hkvInfo.value.ip,szPort = hkvInfo.value.port,szUsername = hkvInfo.value.username,szPassword = hkvInfo.value.password;const iRet = WebVideoCtrl.I_Login(szIP, 1, szPort, szUsername, szPassword, {timeout: 3000,success: function (xmlDoc) {setTimeout(function () {setTimeout(function () {getChannelInfo();}, 1000);getDevicePort();}, 10);},error: function (err) {console.log("登录-err===>", err);},});if (iRet === -1) {console.log(this.szDeviceIdentify + " 已登录过！");// 登录过直接进行预览clickStartRealPlay();}}const getDevicePort = () => {var szDeviceIdentify = hkvInfo.value.ip;if (null == szDeviceIdentify) {return;}WebVideoCtrl.I_GetDevicePort(szDeviceIdentify).then((oPort) => {console.log("152获取端口", oPort);});}const getChannelInfo = () => {let that = this;var szDeviceIdentify = hkvInfo.value.ip + '_' + hkvInfo.value.port;if (null == szDeviceIdentify) {return;}console.log('szDeviceIdentify==============>', szDeviceIdentify);// 模拟通道WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, {success: function (xmlDoc) {clickStartRealPlay();},error: function (oError) {console.log(szDeviceIdentify + "模拟通道", oError.errorCode, oError.errorMsg);}});// 数字通道WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify, {success: function (xmlDoc) {clickStartRealPlay();},error: function (oError) {console.log(szDeviceIdentify + " 数字通道", oError.errorCode, oError.errorMsg);}});}// 开始预览const clickStartRealPlay = (iStreamType) => {var g_iWndIndex = 0;var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex) || null;var szDeviceIdentify = hkvInfo.value.ip + '_' + hkvInfo.value.port,iChannelID = 1,bZeroChannel = false;if ("undefined" === typeof iStreamType) {iStreamType = 1;}if (null == szDeviceIdentify) {return;}var startRealPlay = function () {WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {iStreamType: iStreamType,iChannelID: iChannelID,bZeroChannel: bZeroChannel,success: function () {WebVideoCtrl.I_Logout(szDeviceIdentify);console.log("开始预览成功！");},error: function (oError) {// that.$message.error(szDeviceIdentify+"开始预览失败！");console.log(szDeviceIdentify + "开始预览失败！");},});};if (oWndInfo != null) {// 已经在播放了，先停止WebVideoCtrl.I_Stop({success: function () {startRealPlay();}});} else {startRealPlay();}}// 停止预览const clickStopRealPlay = () => {WebVideoCtrl.I_Stop({success: function () {console.log("停止预览成功！");},error: function (oError) {console.log(" 停止预览失败！");},});}const loginOut = () => {const szDeviceIdentify = hkvInfo.value.ip + "_" + hkvInfo.value.port;WebVideoCtrl.I_Logout(szDeviceIdentify);}const stopAllPlay = () => {WebVideoCtrl.I_StopAllPlay();}const breakDom = () => {WebVideoCtrl.I_DestroyPlugin()}const viewReload = () => {window.location.reload()}onMounted(() => {});onBeforeUnmount(() => {loginOut();stopAllPlay();window.removeEventListener(viewReload());});onUnmounted(() => {setTimeout(() => {breakDom();}, 100)})return {loginOut,stopAllPlay,breakDom,hkvInfo,initS,viewReload,channels,clickLogin,clickStopRealPlay,clickStartRealPlay,setVideoWindowResize,getChannelInfo,getDevicePort,...toRefs(state)};}
};
</script><style scoped lang="scss">
.video {width: 100%;height: 100%;//position: relative;::v-deep(#divPlugin) {width: 100%;height: 100%;//position: absolute;z-index: -1 !important;}::v-deep(#divPlugin1) {width: 100%;height: 100%;//position: absolute;z-index: -1 !important;}::v-deep(#divPlugin2) {width: 100%;height: 100%;//position: absolute;z-index: -1 !important;}::v-deep(#divPlugin3) {width: 100%;height: 100%;//position: absolute;z-index: -1 !important;}::v-deep(#divPlugin4) {width: 100%;height: 100%;//position: absolute;z-index: -1 !important;}
}
</style>

父组件index.vue 引用 子组件

//index.vue
<template><div class="main-content"><div class="video-content">//单个使用<!--      <div class="canvas-contaniner"   >--><!--        <div class="videobox">--><!--          <videoMonitorings :hkvInfo="dataList.hkvInfo01" class="video" :videoId="dataList.hkvInfo01.id" ></videoMonitorings>--><!--        </div>--><!--      </div>-->//多个使用<div class="canvas-contaniner" v-for="(item,index) in dataListRef" :key="index"><div class="videobox"><videoMonitorings :hkvInfo="item" class="video" :videoId="item.id"></videoMonitorings></div></div></div></div>
</template>
<script setup lang="ts">import {ref, reactive, onMounted, onBeforeUnmount} from "vue";import {WebVideo} from "../../../public/static/haiKangWeb3.0/webVideo.js";import videoMonitorings from "./videoMonitorings.vue";const loading = ref(false);const dialogVisible = ref(false);/*
* @以上hkList配置中 注意 loadingTime 和 id；其中loadingTime 建议和上一个时间间隔4S以上，id是动态加载生成填充的DOM树结构；
* 如果间隔时间不够 或DOM的ID一样 可能出现画面加载不出来、画面覆盖重叠等情况；通过配置这2个参数可以避免这样多个摄像头只需要 增加 hkList的配置项即可；
* */
//填入自己ip地址
const dataListRef = ref([{ip: "", //IP地址port: "", //端口号username: "",password: "",iChannelID: 1,loadingTime: "1000",width: "805",height: "375",type: "camera01",id: "divPlugin1",},{ip: "", //IP地址port: "", //端口号username: "",password: "",deviceport: "",iChannelID: 1,//通道IDloadingTime: "5000",width: "805",height: "375",type: "camera02",id: "divPlugin2",},{ip: "", //IP地址port: "", //端口号username: "",password: "",iChannelID: 1,loadingTime: "10000",width: "805",height: "375",type: "camera03",id: "divPlugin3",},{ip: "", //IP地址port: "", //端口号username: "",password: "",iChannelID: 1,loadingTime: "15000",width: "805",height: "375",type: "camera04",id: "divPlugin4",}
])//单个.
const dataList = ref({hkvInfo01: {ip: "", //IP地址port: "", //端口号username: "",password: "",deviceport: "",iChannelID: 1,//通道IDloadingTime: "1000",// 多视频窗口睡眠加载时长。同时多个加载会卡死或不显示width: "805",height: "375",type: "camera01",id: "divPlugin1",},hkvInfo02: {ip: "", //IP地址port: "", //端口号username: "",password: "",iChannelID: 1,loadingTime: "5000",width: "805",height: "375",type: "camera02",id: "divPlugin2",},
});onMounted(() => {})
</script>
<style lang="scss" scoped>
.main-content {margin: 24px 24px 0 !important;
}.video-content {display: flex;justify-content: flex-start;flex-wrap: wrap;position: relative;width: 100%;height: 85vh;.canvas-contaniner {width: 49%;height: 49%;padding: 10px;position: relative;display: flex;justify-content: center;align-items: center;padding: 3px;overflow: hidden;//background: red;}.videobox {display: flex !important;justify-content: center;align-items: center !important;width: 100% !important;height: 100% !important;font-size: 30px;color: #fff;position: relative !important;//left: 20px;background: black;//border: 1px solid red;overflow: hidden;//background-color:black;.video {width: 100% !important;height: 100% !important;object-fit: fill;background-color: #000;}}.loading {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;font-size: 30px;color: #fff;position: absolute;background: black;}
}</style>

运行效果图如下：