websocket接海康视频监控

index.html
<script src="/js/h5player.min.js"></script>

h5Player.vue
<template><div class="player-container" :id="props.idName"></div>
</template><script setup lang="ts">
import { ref, onMounted, watch, onBeforeUnmount, nextTick } from 'vue'
let resizeObserver: ResizeObserver | null = null
const props = defineProps({playUrl: {// 视频 URL
    type: [String, Array]},split: {type: Number,default: 1},idName: { type: String, required: true, default: 'play_window' },
})const player = ref<any | null>(null)const handleResize = () => {player.value?.JS_Resize()console.log(player.value)
}// 创建播放器实例
const createPlayer = () => {player.value = new window.JSPlugin({szId: props.idName, //需要英文字母开头，唯一性，必填szBasePath: '/js', // 必填,与h5player.min.js的引用目录一致bSupporDoubleClickFull: true, //是否支持双击全屏，默认trueiMaxSplit: 4,iCurrentSplit: props.split})// 事件回调绑定
  player.value.JS_SetWindowControlCallback({windowEventSelect: function (iWndIndex: any) {// 插件选中窗口回调console.log('windowSelect callback: ', iWndIndex)},pluginErrorHandler: function (iWndIndex: any, iErrorCode: any, oError: any) {// 插件错误回调console.log('pluginError callback: ', iWndIndex, iErrorCode, oError)},windowEventOver: function (iWndIndex: any) {// 鼠标移过回调// console.log(iWndIndex);
    },windowEventOut: function (iWndIndex: any) {// 鼠标移出回调// console.log(iWndIndex);
    },windowEventUp: function (iWndIndex: any) {// 鼠标mouseup事件回调// console.log(iWndIndex);
    },windowFullCreenChange: function (bFull: any) {// 全屏切换回调console.log('fullScreen callback: ', bFull)},firstFrameDisplay: function (iWndIndex: any, iWidth: any, iHeight: any) {// 首帧显示回调console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight)},performanceLack: function () {// 性能不足回调console.log('performanceLack callback: ')}})realplay(props.playUrl)
}// 视频播放
const realplay = (url: string | string[]) => {if (!url) returnif (Array.isArray(url)) {url.forEach((item, i) => {player.value.JS_Play(item,{playURL: item,mode: 0},i // 播放到第 i 个窗口
        ).then(() => console.info(`JS_Play success for window ${i}`),(err: any) => console.error(`JS_Play failed for window ${i}:`, err))})} else {const index = player.value.currentWindowIndexplayer.value.JS_Play(url,{playURL: url,mode: 0},index).then(() => console.info('JS_Play success'),(err: any) => console.error('JS_Play failed:', err))}
}const changePlayUrlForWindow = (url: string, index: number) => {player.value?.JS_Stop(index).then(() => {player.value?.JS_Play(url,{playURL: url,mode: 0},index).then(() => console.info(`Changed stream for window ${index}`),(err: any) => console.error(`Failed to change stream for window ${index}:`, err))})
}// 停止所有播放
const stopAllPlay = () => {player.value?.JS_StopRealPlayAll().then(() => {console.log('stopAllPlay success')},(e: any) => {console.error(e)})
}// 停止单个播放
const stopPlay = () => {player.value?.JS_Stop().then(() => {console.log('stop realplay success')},(e: any) => {console.error(e)})
}
watch(() => props.playUrl,(newUrl) => {if (newUrl) {realplay(newUrl)} else {stopAllPlay() // 先清空
    }}
)
defineExpose({changePlayUrlForWindow,
})
onMounted(() => {nextTick(() => {createPlayer()handleResize()const el = document.getElementById(`${props.idName}`)if (el) {resizeObserver = new ResizeObserver(() => {handleResize()})resizeObserver.observe(el)}})window.addEventListener('resize', handleResize)
})
onBeforeUnmount(() => {window.removeEventListener('resize', handleResize)resizeObserver?.disconnect()
})
</script><style scoped>
.player-container {width: 100%;height: 100%;
}
</style>
引入使用
import H5Player from '@/components/hikPlayer/h5Player.vue'
<div class="videoBox"><H5Player :playUrl="monitorList.url" />
</div>
let monitorList = ref({}) //可播放的视频对象
//start模拟
let vvdata = [{ cameraName: '东中转堆场中（北向）（热成像）', stayTime: 10, url: 'ws://10.10.160.180:559/openUrl/sv73qpi', cameraIndexCode: 'a7a3f0b8f1884fa18a47bfe5a47cc664' },{ cameraName: '西三区1号堆场北侧（云台）', stayTime: 12, url: 'ws://10.10.160.180:559/openUrl/tKA7WmY', cameraIndexCode: '7a62becad6744a5986c5ede26df7d944' },{ cameraName: '东中转堆场中（北向）（云台）', stayTime: 28, url: 'ws://10.10.160.180:559/openUrl/vaKhqbm', cameraIndexCode: '48cd7e38e9b74fbd83979fa54c772a6c' },{ cameraName: '西三区1号堆场北侧（热成像）', stayTime: 20, url: 'ws://10.10.160.180:559/openUrl/wLBNsYw', cameraIndexCode: '11720ccb5f9a4c569a856facb0fbd481' }
]
let getVideo = (code) => {for (let i = 0; i < vvdata.length; i++) {if (vvdata[i].cameraIndexCode == code) {return vvdata[i]}}
}
const res = await getVideo(currentItem.cameraIndexCode);
monitorList.value = {cameraName: currentItem.cameraName,cameraIndexCode: currentItem.cameraIndexCode,stayTime: currentItem.stayTime,url: res.url
};
//end模拟

.videoBox {width: 100%;height: 600px;border: 1px solid #a38a69;border-radius: 10px;overflow: hidden;
}