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

33
src/components/HlsPlayer/index.vue
View File

@@ -6,8 +6,9 @@
ref="videoElement"
muted
playsinline
preload="auto"
autoplay
:controls="false"
disablePictureInPicture
></video>
<!-- <div v-if="loading" class="loading-overlay pointer-events-none">
<div class="loading-text">{{ loadingText }}</div>
@@ -17,7 +18,7 @@
<script>
import Hls from 'hls.js'
import mpegtsjs from 'mpegts.js'
import WebRTCWhep from "whepts";
export default {
name: 'HlsPlayer',
props: {
@@ -163,27 +164,15 @@ export default {
if (this.hls) {
this.immediateCleanup()
}
if(this.url.startsWith('ws')){
const videoElement = document.getElementById('video')
const player = mpegtsjs.createPlayer({
url: this.url,
type: 'flv',
isLive: true,
hasAudio: false
})
player.attachMediaElement(videoElement)
player.load()
player.play()
// 错误处理和重连机制
player.on('error', (err) => {
player.unload()
// 3 秒后尝试重新加载
setTimeout(() => {
player.load()
player.play()
}, 3000)
if(this.url.startsWith('http://192.168.77.200:8050/')){
const player = new WebRTCWhep({
url: this.url, // WHEP 服务器地址
container: this.video, // 视频播放容器
onError: (error) => {
console.error('播放错误:', error)
}
})
webrtcRefs.push(player)
}else{
this.hls = new Hls({
// 内存优化配置

41
src/layout/components/CoreVideo/allList.vue
View File

@@ -43,12 +43,13 @@
import Hls from 'hls.js'
import pubSub from 'pubsub-js'
import mpegtsjs from "mpegts.js";
import WebRTCWhep from "whepts";
let modelValue = defineModel()
let isCollect = ref(0)
let list = ref([])
let hlsRefs = []
let webrtcRefs = []
let total = ref(0)
let src = ref('')
let cameraIndexCode = ref('')
@@ -97,7 +98,7 @@
const handleClose = () => {
modelValue.value = false
clearHlsRefs()
}
const clearHlsRefs = () => {
if (hlsRefs.length > 0) {
@@ -106,6 +107,12 @@
})
hlsRefs = []
}
if (webrtcRefs.length > 0) {
webrtcRefs.map((item) => {
item.close()
})
webrtcRefs = []
}
}
const pageNumChange = () => {
clearHlsRefs()
@@ -118,29 +125,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) => {
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({

1
src/layout/components/CoreVideo/index.vue
View File

@@ -73,7 +73,6 @@ let isCollect = ref(0)
let timer = null
let isDiy = ref(0)
const handleItem = (item) => {
console.log(item,'1111111111111111111111111')
src.value = item.hlsUrl
cameraIndexCode.value = item.cameraIndexCode
isCollect.value = item.isCollect

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({