类型：开发

描述：

src/views/monitor/components/box-2.vue

@@ -2,27 +2,24 @@
   <div class="box-2">
     <div class="left-nav">
       <div v-if="showNav" >
-		  <div class="ul">
+        <div class="ul">
-			  <div
+          <div
-			    class="li"
+              class="li"
-			    :class="{ active: current == index }"
+              :class="{ active: current == index }"
-			    v-for="(item, index) in navList"
+              v-for="(item, index) in navList"
-			    :key="index"
+              :key="index"
-			    @click="handleNav(index)"
+              @click="handleNav(index)"
-			  >
+          >
-			    <!-- <span v-if="!params.businessScenicArea && index == 0"> 核心路段 </span> -->
+            <span>
-			    <span>
+			      {{ item }}
-			      {{ item.dictLabel }} 
 			    </span>
-			  </div>
+          </div>
-			  <div
+          <div
-			   :class="{ active: current == navList.length }"
+              :class="{ active: current == navList.length }"
-			  @click="handleNav(navList.length)" class="li">
+              @click="handleNav(navList.length)" class="li">
-			  	<span>收藏夹</span>
+            <span>收藏夹</span>
-			  </div>
+          </div>
-		  </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_IN = 'zoomin' // 焦距变大
-  const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
+  const Z00M_OUT = 'zoomout' // 焦距变小
-  const UP = 'UP' // 上转
+  const UP = 'up' // 上转
-  const DOWN = 'DOWN' // 下转
+  const DOWN = 'down' // 下转
-  const LEFT = 'LEFT' // 左转
+  const LEFT = 'left' // 左转
-  const RIGHT = 'RIGHT' // 右转
+  const RIGHT = 'right' // 右转
-  const STOP = 'STOP' // 停止操作
+  const STOP = 'stop' // 停止操作
   let ACTION = '0'
 
   const props = {
@@ -249,30 +247,86 @@
   let timer = null
 
   const postVideoRemain = async () => {
-	if(!videoList.value.length) return false;
+	// if(!videoList.value.length) return false;
-    timer = setInterval(() => {
+  //   timer = setInterval(() => {
-      postVideoRemainApi({
+  //     postVideoRemainApi({
-        cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
+  //       cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
-      })
+  //     })
-    }, 2000)
+  //   }, 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()
+        player.on(mpegtsjs.Events.LOADING_COMPLETE, (err) => {
-    nextTick(() => {
+          console.error('加载完成:', err)
-      videoList.value.forEach(async (item, index) => {
+        })
-        const video = document.getElementById(`monitorVideo${index}`)
+        hlsRefs.push(player)
-        const hls = new Hls({
+      }
+      else{
+        const player = new Hls({
           maxBufferLength: 10, // 最大缓冲长度（秒）
           maxMaxBufferLength: 15, // 缓冲区长度的上限
           maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
         })
-        hls.loadSource(item.hlsUrl)
+        player.loadSource(url)
-        hls.attachMedia(video)
+        player.attachMedia(videoElement)
-        hls.on(Hls.Events.MANIFEST_PARSED, () => {
+        player.on(Hls.Events.MANIFEST_PARSED, () => {
-          video.play()
+          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,30 +392,60 @@
     initVideo()
   }
   let thisVideo = ref(null)
-  const handleItemVideo = (url, type, code,item) => {
+  const handleItemVideo = async (url, type, code, item) => {
-	thisVideo.value = item
+    let res = await getPreviewUrlApi({
+      cameraIndexCode: code,
+      type: 'hls'
+    })
+    url = res.data.url
+    thisVideo.value = item
     videoLog.value = 2
     cameraIndexCode.value = code
     setTimeout(() => {
-      hlsRef = new Hls({
+      if (url.startsWith('ws')) {
-        maxBufferLength: 10, // 最大缓冲长度（秒）
+        hlsRef = mpegtsjs.createPlayer({
-        maxMaxBufferLength: 15, // 缓冲区长度的上限
+          url: url,
-        maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
+          type: 'flv',
-      })
+          isLive: true,
-      hlsRef.loadSource(url)
+          hasAudio: false
-      hlsRef.attachMedia(videoRef.value)
+        })
-      hlsRef.on(Hls.Events.MANIFEST_PARSED, () => {
+        hlsRef.attachMediaElement(videoRef.value)
-        videoRef.value.play()
+        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, // 缓冲区长度的上限
+          maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
+        })
+        hlsRef.loadSource(url)
+        hlsRef.attachMedia(videoRef.value)
+        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,
@@ -387,12 +471,11 @@
     show.value = true
     let res = await getPreviewUrlApi({
       type: 'hls',
-      cameraIndexCode:itemCode
+      cameraIndexCode: itemCode
     })
-	console.log(res,'rrrrrrrrrrrrrr')
     cameraIndexCode.value = itemCode;
-	  isCollect.value = resource.isCollect
+    isCollect.value = resource.isCollect
-	  isDiy.value = resource.isDiy
+    isDiy.value = resource.isDiy
     videoSrc.value = res.data.url
   }
   const handleCollect = async (id, status, index) => {