- 未接入
+ 加载中...
{
if(!videoList.value.length) return false
videoList.value.forEach(async (x, index) => {
- const video = document.getElementById(`monitorVideo${index}`)
- 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(`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)
+ }
+
})
})
} else {
@@ -416,22 +437,22 @@
)
// 更新视频
const postVideoRemain = async () => {
- timer = setInterval(() => {
- postVideoRemainApi({
- cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
- })
- }, 1500)
+ // timer = setInterval(() => {
+ // postVideoRemainApi({
+ // cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
+ // })
+ // }, 1500)
}
const getVideoRegions = async () => {
let res = await getVideoRegionsApi({
cameraName: cameraName.value,
businessScenicArea: params.businessScenicArea
})
- regionList.value = res.data
- regionList.value.forEach((item,index)=>{
- // item.show = true
- item.videoResources=item.resourcesList[0].videoResources
- })
+ regionList.value = res.data[0].resourcesList;
+ // regionList.value.forEach((item,index)=>{
+ // // item.show = true
+ // item.videoResources=item.resourcesList[0].videoResources
+ // })
regionList.value[0].show = false
}
diff --git a/src/views/scenic/components/box-1.vue b/src/views/scenic/components/box-1.vue
index daf7882..163a75d 100644
--- a/src/views/scenic/components/box-1.vue
+++ b/src/views/scenic/components/box-1.vue
@@ -435,7 +435,7 @@ import pubSub from 'pubsub-js'
.content {
margin-left: vw(4);
padding: 0 vw(10);
- width: vw(760);
+ width: vw(460);
height: vh(24);
line-height: vh(24);
white-space: nowrap;