类型：开发
描述：
This commit is contained in:
@@ -10,9 +10,8 @@
|
||||
:key="index"
|
||||
@click="handleNav(index)"
|
||||
>
|
||||
<!-- <span v-if="!params.businessScenicArea && index == 0"> 核心路段 </span> -->
|
||||
<span>
|
||||
{{ item.dictLabel }}
|
||||
{{ item }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
@@ -21,8 +20,6 @@
|
||||
<span>收藏夹</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="bom-box">
|
||||
<Title2 title="检索" />
|
||||
@@ -202,18 +199,19 @@
|
||||
postVideoControlApi,
|
||||
postVideoCollectApi
|
||||
} from '@/api/monitor'
|
||||
import mpegtsjs from 'mpegts.js'
|
||||
|
||||
import { debounce } from 'lodash'
|
||||
import pubSub from 'pubsub-js'
|
||||
import Hls from 'hls.js'
|
||||
|
||||
const Z00M_IN = 'ZOOM_IN' // 焦距变大
|
||||
const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
|
||||
const UP = 'UP' // 上转
|
||||
const DOWN = 'DOWN' // 下转
|
||||
const LEFT = 'LEFT' // 左转
|
||||
const RIGHT = 'RIGHT' // 右转
|
||||
const STOP = 'STOP' // 停止操作
|
||||
const Z00M_IN = 'zoomin' // 焦距变大
|
||||
const Z00M_OUT = 'zoomout' // 焦距变小
|
||||
const UP = 'up' // 上转
|
||||
const DOWN = 'down' // 下转
|
||||
const LEFT = 'left' // 左转
|
||||
const RIGHT = 'right' // 右转
|
||||
const STOP = 'stop' // 停止操作
|
||||
let ACTION = '0'
|
||||
|
||||
const props = {
|
||||
@@ -249,30 +247,86 @@
|
||||
let timer = null
|
||||
|
||||
const postVideoRemain = async () => {
|
||||
if(!videoList.value.length) return false;
|
||||
timer = setInterval(() => {
|
||||
postVideoRemainApi({
|
||||
cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
|
||||
})
|
||||
}, 2000)
|
||||
// if(!videoList.value.length) return false;
|
||||
// timer = setInterval(() => {
|
||||
// postVideoRemainApi({
|
||||
// cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
|
||||
// })
|
||||
// }, 2000)
|
||||
}
|
||||
const createPlayer = (cameraIndexCode,videoElement) => {
|
||||
getPreviewUrlApi({
|
||||
type: 'hls',
|
||||
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
|
||||
})
|
||||
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)
|
||||
|
||||
const initVideo = () => {
|
||||
clearHlsRefs()
|
||||
nextTick(() => {
|
||||
videoList.value.forEach(async (item, index) => {
|
||||
const video = document.getElementById(`monitorVideo${index}`)
|
||||
const hls = new Hls({
|
||||
})
|
||||
player.on(mpegtsjs.Events.LOADING_COMPLETE, (err) => {
|
||||
console.error('加载完成:', err)
|
||||
})
|
||||
hlsRefs.push(player)
|
||||
}
|
||||
else{
|
||||
const player = new Hls({
|
||||
maxBufferLength: 10, // 最大缓冲长度（秒）
|
||||
maxMaxBufferLength: 15, // 缓冲区长度的上限
|
||||
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
|
||||
})
|
||||
hls.loadSource(item.hlsUrl)
|
||||
hls.attachMedia(video)
|
||||
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
video.play()
|
||||
player.loadSource(url)
|
||||
player.attachMedia(videoElement)
|
||||
player.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
videoElement.play()
|
||||
})
|
||||
hlsRefs.push(hls)
|
||||
player.on(Hls.Events.ERROR, (event, data) => {
|
||||
// 根据错误类型进行处理
|
||||
if (data.fatal) {
|
||||
switch (data.type) {
|
||||
case Hls.ErrorTypes.NETWORK_ERROR:
|
||||
console.log('网络错误，尝试重新加载');
|
||||
player.startLoad();
|
||||
break;
|
||||
case Hls.ErrorTypes.MEDIA_ERROR:
|
||||
console.log('媒体错误，尝试修复');
|
||||
player.recoverMediaError();
|
||||
break;
|
||||
default:
|
||||
console.log('无法恢复的错误，销毁播放器');
|
||||
// hls.destroy();
|
||||
break;
|
||||
}
|
||||
}
|
||||
})
|
||||
hlsRefs.push(player)
|
||||
}
|
||||
})
|
||||
}
|
||||
const initVideo = () => {
|
||||
clearHlsRefs()
|
||||
nextTick(() => {
|
||||
videoList.value.forEach(async (item, index) => {
|
||||
const videoElement = document.getElementById(`monitorVideo${index}`)
|
||||
createPlayer(item.cameraIndexCode,videoElement);
|
||||
})
|
||||
})
|
||||
}
|
||||
@@ -338,11 +392,39 @@
|
||||
initVideo()
|
||||
}
|
||||
let thisVideo = ref(null)
|
||||
const handleItemVideo = (url, type, code,item) => {
|
||||
const handleItemVideo = async (url, type, code, item) => {
|
||||
let res = await getPreviewUrlApi({
|
||||
cameraIndexCode: code,
|
||||
type: 'hls'
|
||||
})
|
||||
url = res.data.url
|
||||
thisVideo.value = item
|
||||
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)
|
||||
})
|
||||
} else {
|
||||
hlsRef = new Hls({
|
||||
maxBufferLength: 10, // 最大缓冲长度（秒）
|
||||
maxMaxBufferLength: 15, // 缓冲区长度的上限
|
||||
@@ -353,15 +435,17 @@
|
||||
hlsRef.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
videoRef.value.play()
|
||||
})
|
||||
}
|
||||
|
||||
if (type == 100) initVideo()
|
||||
}, 1000)
|
||||
}
|
||||
const handleAction = async (e) => {
|
||||
command.value = e
|
||||
if (e == STOP) {
|
||||
ACTION = '1'
|
||||
} else {
|
||||
ACTION = '0'
|
||||
command.value = e
|
||||
}
|
||||
await postVideoControlApi({
|
||||
action: ACTION,
|
||||
@@ -389,7 +473,6 @@
|
||||
type: 'hls',
|
||||
cameraIndexCode: itemCode
|
||||
})
|
||||
console.log(res,'rrrrrrrrrrrrrr')
|
||||
cameraIndexCode.value = itemCode;
|
||||
isCollect.value = resource.isCollect
|
||||
isDiy.value = resource.isDiy
|
||||
|
||||
Reference in New Issue
Block a user