vue3引入海康監控視頻組件并實現非分屏需求一個頁面同時預覽多個監控視頻；

海康監控視頻非分屏需求，一個頁面引用多個視頻組件;

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>