类型：开发
描述：
This commit is contained in:
@@ -78,7 +78,7 @@
|
||||
</div>
|
||||
<video
|
||||
class="video-item__video"
|
||||
:id="'monitorVideo' + index"
|
||||
:id="'hotelmonitorVideo' + index"
|
||||
preload="auto"
|
||||
muted
|
||||
autoplay
|
||||
@@ -87,7 +87,7 @@
|
||||
<source type="application/x-mpegURL" />
|
||||
</video>
|
||||
<p class="video-item__title--primary">
|
||||
{{ item.cameraName || item.scenicAreaId }}
|
||||
{{ item.cameraName || item.cameraIndexCode }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -146,15 +146,15 @@
|
||||
class="item"
|
||||
v-for="(item, index) in videoList"
|
||||
:key="index"
|
||||
@click="handleItemVideo(item.hlsUrl, 101, item.handleItemVideo,item)"
|
||||
@click="handleItemVideo(item.hlsUrl, 101, item.cameraIndexCode,item)"
|
||||
>
|
||||
<div>
|
||||
<p class="item-title--primary">
|
||||
{{ item.cameraName || item.scenicAreaId }}
|
||||
{{ item.cameraName || item.cameraIndexCode }}
|
||||
</p>
|
||||
<video
|
||||
class="item-img"
|
||||
:id="'monitorVideo' + index"
|
||||
:id="'hotelmonitorVideo' + index"
|
||||
muted
|
||||
autoplay
|
||||
:controls="false"
|
||||
@@ -197,13 +197,20 @@
|
||||
import emptyIco from '@/assets/images/n-icon.png'
|
||||
import { debounce } from 'lodash'
|
||||
import mpegtsjs from "mpegts.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 = '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 cond = ref(false)
|
||||
let ACTION = '0'
|
||||
let hlsRefs = []
|
||||
@@ -259,6 +266,7 @@
|
||||
const handleAction = async (e) => {
|
||||
if (e == STOP) {
|
||||
ACTION = '1'
|
||||
command.value = e
|
||||
} else {
|
||||
ACTION = '0'
|
||||
command.value = e
|
||||
@@ -311,6 +319,69 @@
|
||||
videoList.value = []
|
||||
getRegionsList()
|
||||
}
|
||||
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) => {
|
||||
player.unload();
|
||||
console.error('播放器错误:', err)
|
||||
// 3 秒后尝试重新加载
|
||||
setTimeout(() => {
|
||||
player.load()
|
||||
player.play()
|
||||
}, 3000)
|
||||
})
|
||||
|
||||
hlsRefs.push(player)
|
||||
}
|
||||
else{
|
||||
const player = new Hls({
|
||||
maxBufferLength: 10, // 最大缓冲长度（秒）
|
||||
maxMaxBufferLength: 15, // 缓冲区长度的上限
|
||||
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
|
||||
})
|
||||
player.loadSource(url)
|
||||
player.attachMedia(videoElement)
|
||||
player.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
videoElement.play()
|
||||
})
|
||||
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 getRegionsList = async()=>{
|
||||
clearHlsRefs()
|
||||
@@ -325,59 +396,8 @@
|
||||
nextTick(() => {
|
||||
if(!videoList.value.length) return false
|
||||
videoList.value.forEach(async (x, index) => {
|
||||
const video = document.getElementById(`monitorVideo${index}`)
|
||||
if(x.hlsUrl.startsWith('ws')){
|
||||
const player = mpegtsjs.createPlayer({
|
||||
url: x.hlsUrl,
|
||||
type: 'flv',
|
||||
isLive: true,
|
||||
hasAudio: false
|
||||
})
|
||||
player.attachMediaElement(video)
|
||||
player.load()
|
||||
player.play()
|
||||
// 错误处理和重连机制
|
||||
player.on('error', (err) => {
|
||||
// 3 秒后尝试重新加载
|
||||
setTimeout(() => {
|
||||
player.load()
|
||||
player.play()
|
||||
}, 3000)
|
||||
})
|
||||
}else{
|
||||
const hls = new Hls({
|
||||
maxBufferLength: 10, // 最大缓冲长度（秒）
|
||||
maxMaxBufferLength: 15, // 缓冲区长度的上限
|
||||
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
|
||||
})
|
||||
hls.loadSource(x.hlsUrl)
|
||||
hls.attachMedia(video)
|
||||
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
video.play()
|
||||
})
|
||||
hls.on(Hls.Events.ERROR, (event, data) => {
|
||||
console.error('HLS 播放器遇到错误:', data);
|
||||
// 根据错误类型进行处理
|
||||
// initVideo()
|
||||
if (data.fatal) {
|
||||
switch (data.type) {
|
||||
case Hls.ErrorTypes.NETWORK_ERROR:
|
||||
console.log('网络错误，尝试重新加载');
|
||||
hls.startLoad();
|
||||
break;
|
||||
case Hls.ErrorTypes.MEDIA_ERROR:
|
||||
console.log('媒体错误，尝试修复');
|
||||
hls.recoverMediaError();
|
||||
break;
|
||||
default:
|
||||
console.log('无法恢复的错误，销毁播放器');
|
||||
// hls.destroy();
|
||||
break;
|
||||
}
|
||||
}})
|
||||
hlsRefs.push(hls)
|
||||
}
|
||||
|
||||
const video = document.getElementById(`hotelmonitorVideo${index}`)
|
||||
createPlayer(x.cameraIndexCode,video);
|
||||
})
|
||||
})
|
||||
} else {
|
||||
@@ -392,12 +412,17 @@
|
||||
|
||||
}
|
||||
let thisVideo = ref(null)
|
||||
const handleItemVideo = (url, type, code,item) => {
|
||||
thisVideo.value = item
|
||||
videoLog.value = 2
|
||||
cameraIndexCode.value = code
|
||||
setTimeout(() => {
|
||||
if(url.startsWith('ws')){
|
||||
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')) {
|
||||
const player = mpegtsjs.createPlayer({
|
||||
url: url,
|
||||
type: 'flv',
|
||||
@@ -416,7 +441,7 @@
|
||||
player.play()
|
||||
}, 3000)
|
||||
})
|
||||
}else{
|
||||
} else {
|
||||
hlsRef = new Hls({
|
||||
maxBufferLength: 10, // 最大缓冲长度（秒）
|
||||
maxMaxBufferLength: 15, // 缓冲区长度的上限
|
||||
@@ -429,47 +454,15 @@
|
||||
})
|
||||
}
|
||||
|
||||
if (type == 100) initVideo()
|
||||
}, 1000)
|
||||
}
|
||||
if (type == 100) initVideo()
|
||||
}, 1000)
|
||||
}
|
||||
const initVideo = () => {
|
||||
clearHlsRefs()
|
||||
nextTick(() => {
|
||||
videoList.value.forEach(async (item, index) => {
|
||||
const video = document.getElementById(`monitorVideo${index}`)
|
||||
if(item.hlsUrl.startsWith('ws')){
|
||||
var player = mpegtsjs.createPlayer({
|
||||
url: item.hlsUrl,
|
||||
type: 'flv',
|
||||
isLive: true,
|
||||
hasAudio: false
|
||||
})
|
||||
player.attachMediaElement(video)
|
||||
player.load()
|
||||
player.play()
|
||||
|
||||
// 错误处理和重连机制
|
||||
player.on('error', (err) => {
|
||||
// 3 秒后尝试重新加载
|
||||
setTimeout(() => {
|
||||
player.load()
|
||||
player.play()
|
||||
}, 3000)
|
||||
})
|
||||
}else{
|
||||
const hls = 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()
|
||||
})
|
||||
hlsRefs.push(hls)
|
||||
}
|
||||
|
||||
const video = document.getElementById(`hotelmonitorVideo${index}`)
|
||||
createPlayer(item.cameraIndexCode,video);
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user