lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

类型：开发

Browse Source 
描述：
This commit is contained in:
lixuefeng
2026-01-14 00:51:15 +08:00
parent 4bf2d63aa4
commit ed5876c55b
6 changed files with 87 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/views/collect/components/video-box.vue
View File

@@ -93,7 +93,7 @@ import pubSub from 'pubsub-js'
import Hls from 'hls.js'
import emptyIco from '@/assets/images/n-icon.png'
import { debounce } from 'lodash'
import mpegtsjs from "mpegts.js";
import WebRTCWhep from 'whepts'
// const Z00M_IN = 'ZOOM_IN' // 焦距变大
// const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
// const UP = 'UP' // 上转
@@ -111,6 +111,7 @@ const STOP = 'stop' // 停止操作
let cond = ref(false)
let ACTION = '0'
let hlsRefs = []
let webrtcRefs = []
let hlsRef = null
let timer = null
let videoLog = ref(1)
@@ -260,6 +261,12 @@ const clearHlsRefs = () => {
})
hlsRefs = []
}
if (webrtcRefs.length > 0) {
webrtcRefs.map((item) => {
item.close()
})
webrtcRefs = []
}
}
// 分页
const currentChange = (e) => {
@@ -293,29 +300,15 @@ const createPlayer = (cameraIndexCode,videoElement) => {
cameraIndexCode: cameraIndexCode
}).then(res=>{
const url = res.data.url;
if(url.startsWith('ws')){
const player = mpegtsjs.createPlayer({
url: url,
type: 'flv',
isLive: true,
hasAudio: false
if(url.startsWith('http://192.168.77.200:8050/')){
const player = new WebRTCWhep({
url: url, // WHEP 服务器地址
container: videoElement, // 视频播放容器
onError: (error) => {
console.error('播放错误:', error)
}
})
player.attachMediaElement(videoElement)
player.load()
player.play()
// 错误处理和重连机制
player.on(mpegtsjs.Events.ERROR, (err) => {
player.unload();
player.destroy();
console.error('播放器错误:', err)
// 3 秒后尝试重新加载
setTimeout(() => {
console.error('重新加载【'+cameraIndexCode+'】' )
createPlayer(cameraIndexCode,videoElement);
}, 3000)
})
hlsRefs.push(player)
webrtcRefs.push(player)
}
else{
const player = new Hls({

39
src/views/hotel/components/video-box.vue
View File

@@ -197,7 +197,7 @@ import pubSub from 'pubsub-js'
import Hls from 'hls.js'
import emptyIco from '@/assets/images/n-icon.png'
import { debounce } from 'lodash'
import mpegtsjs from "mpegts.js";
import WebRTCWhep from "whepts";
// const Z00M_IN = 'ZOOM_IN' // 焦距变大
// const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
// const UP = 'UP' // 上转
@@ -215,6 +215,7 @@ const STOP = 'stop' // 停止操作
let cond = ref(false)
let ACTION = '0'
let hlsRefs = []
let webrtcRefs = []
let hlsRef = null
let timer = null
let videoLog = ref(1)
@@ -364,6 +365,12 @@ const clearHlsRefs = () => {
})
hlsRefs = []
}
if (webrtcRefs.length > 0) {
webrtcRefs.map((item) => {
item.close()
})
webrtcRefs = []
}
}
// 分页
const currentChange = (e) => {
@@ -397,29 +404,15 @@ const createPlayer = (cameraIndexCode,videoElement) => {
cameraIndexCode: cameraIndexCode
}).then(res=>{
const url = res.data.url;
if(url.startsWith('ws')){
const player = mpegtsjs.createPlayer({
url: url,
type: 'flv',
isLive: true,
hasAudio: false
if(url.startsWith('http://192.168.77.200:8050/')){
const player = new WebRTCWhep({
url: url, // WHEP 服务器地址
container: videoElement, // 视频播放容器
onError: (error) => {
console.error('播放错误:', error)
}
})
player.attachMediaElement(videoElement)
player.load()
player.play()
// 错误处理和重连机制
player.on(mpegtsjs.Events.ERROR, (err) => {
player.unload();
player.destroy();
console.error('播放器错误:', err)
// 3 秒后尝试重新加载
setTimeout(() => {
console.error('重新加载【'+cameraIndexCode+'】' )
createPlayer(cameraIndexCode,videoElement);
}, 3000)
})
hlsRefs.push(player)
webrtcRefs.push(player)
}
else{
const player = new Hls({

74
src/views/monitor/components/box-2.vue
View File

@@ -199,7 +199,7 @@
postVideoControlApi,
postVideoCollectApi
} from '@/api/monitor'
import mpegtsjs from 'mpegts.js'
import WebRTCWhep from 'whepts'
import { debounce } from 'lodash'
import pubSub from 'pubsub-js'
@@ -243,6 +243,7 @@
businessVideoDisplayPosition: ''
})
let hlsRefs = []
let webrtcRefs = []
let hlsRef = null
let timer = null
@@ -260,32 +261,15 @@
cameraIndexCode: cameraIndexCode
}).then(res=>{
const url = res.data.url;
if(url.startsWith('ws')){
const player = mpegtsjs.createPlayer({
url: url,
type: 'flv',
isLive: true,
hasAudio: false
if(url.startsWith('http://192.168.77.200:8050/')){
const player = new WebRTCWhep({
url: url, // WHEP 服务器地址
container: videoElement, // 视频播放容器
onError: (error) => {
console.error('播放错误:', error)
}
})
player.attachMediaElement(videoElement)
player.load()
player.play()
// 错误处理和重连机制
player.on(mpegtsjs.Events.ERROR, (err) => {
console.error('播放器错误【'+cameraIndexCode+'】:', err)
player.unload();
player.destroy();
// 3 秒后尝试重新加载
setTimeout(() => {
console.error('重新加载【'+cameraIndexCode+'】' )
createPlayer(cameraIndexCode,videoElement);
}, 3000)
})
player.on(mpegtsjs.Events.LOADING_COMPLETE, (err) => {
console.error('加载完成:', err)
})
hlsRefs.push(player)
webrtcRefs.push(player)
}
else{
const player = new Hls({
@@ -346,6 +330,16 @@
})
hlsRefs = []
}
if(webrtcRefs.length>0){
webrtcRefs.map((item) => {
try{
item.close()
}catch (e) {
}
})
webrtcRefs = [];
}
}
const currentChange = (e) => {
if(navList.value.length==current.value){
@@ -402,27 +396,13 @@
videoLog.value = 2
cameraIndexCode.value = code
setTimeout(() => {
if (url.startsWith('ws')) {
hlsRef = mpegtsjs.createPlayer({
url: url,
type: 'flv',
isLive: true,
hasAudio: false
})
hlsRef.attachMediaElement(videoRef.value)
hlsRef.load()
hlsRef.play()
// 错误处理和重连机制
hlsRef.on('error', (err) => {
console.error('播放器错误:', err)
// 3 秒后尝试重新加载
hlsRef.unload()
hlsRef.destroy()
// 3 秒后尝试重新加载
setTimeout(() => {
console.error('重新加载【' + cameraIndexCode + '】')
handleItemVideo(url, 101, code, item);
}, 3000)
if (url.startsWith('http://192.168.77.200:8050/')) {
hlsRef = new WebRTCWhep({
url: url, // WHEP 服务器地址
container: videoRef.value, // 视频播放容器
onError: (error) => {
console.error('播放错误:', error)
}
})
} else {
hlsRef = new Hls({