当前位置：首页 > news >正文

海康对接摄像头

news 2025/6/13 18:05:11

1.前端播放用ws 流，后台调用海康后台可以直接返回

2.前端参考vue项目中播放ws（Websocket协议）视频流_ws视频流如何播放-CSDN博客这个地址就行了

3.注意js引用是否正确

一定要是这个目录

4.引用js的地方

5.代码，工具类

<template><div id="player" style="width: 100%;height: 100%;"></div>
</template><script src="../../../../../public/js/h5player.min.js"></script><script>
export default {data() {return {player: null}},mounted() {// 例如一屏播放4个视频，写法如下this.initPlayer(2);let arr = ['ws://58.221.113.46:559/openUrl/CCuqAQ8','ws://58.221.113.46:559/openUrl/Gppck0w','ws://58.221.113.46:559/openUrl/pJXovNm','ws://58.221.113.46:559/openUrl/Kb4L9Nm'];arr.forEach((url, index) => {this.realplay(url, index);})},methods: {// 初始化initPlayer(num = 1) { // 设置分屏：1*1、2*2、3*3、4*4this.player = new JSPlugin({szId: 'player', // 父窗口id，需要英文字母开头 必填szBasePath: "js/", // 必填,与h5player.min.js的引用路径一致iMaxSplit: 4, // 分屏播放，默认最大分屏4*4openDebug: true,mseWorkerEnable: false,//是否开启多线程解码，分辨率大于1080P建议开启，否则可能卡顿bSupporDoubleClickFull: true,//是否支持双击全屏，true-双击是全屏；false-双击无响应oStyle: {borderSelect: '#343434', // 选中视频的边框颜色，默认选择第一个，颜色为#fc0}})this.player.JS_ArrangeWindow(num).then(() => { console.log(`arrangeWindow to ${num}x${num} success`) },e => { console.error(e) })// 监听视频连接过程中出现的异常this.player.JS_SetWindowControlCallback({pluginErrorHandler(iWindIndex, iErrorCode, oError) {console.error(`监控窗口${iWindIndex}发生错误，错误码: ${iErrorCode}，${oError}`);}});},// 预览realplay (playURL = '', index = 0) { // 设置第index（从0开始）个窗口的视频地址this.player.JS_SetTraceId(index, true);this.player.JS_Play(playURL, { playURL, mode: 0, keepDecoder: 0, token: '' }, index).then(() => {console.log('realplay success');this.player.JS_GetTraceId(index).then((id) => { console.log("traceid:", id) })},e => { console.error(e) })},}
}
</script>
<style scoped lang="less">
/* 由于我的视频没有撑满整个容器，所以加了下面的样式，如果没遇到这种情况可以忽略。*/
// 设置2*2分屏时
/deep/#player {& > div, & > div > div > video {width: 100% !important;height: 100% !important;}& > div > div {width: 50% !important;height: 50% !important;}
}
/*
// 设置1*1分屏时
/deep/#player {& > div,& > div > div,& > div > div > video {width: 100% !important;height: 100% !important;}
}
*/
</style>