feat：完善功能

src/components/CoreVideo/index.vue

@@ -22,6 +22,7 @@
             :controls="false"
             style="object-fit: cover"
           >
+            <source src="" type="application/x-mpegURL" />
           </video>
         </div>
       </li>
@@ -46,45 +47,46 @@
   let webRtcServerList = ref([])
 
   const handleItem = (item) => {
-    // src.value = item.hlsUrl
-    src.value = item.rtspUrl
+    src.value = item.hlsUrl
+    // src.value = item.rtspUrl
     cameraIndexCode.value = item.cameraIndexCode
     videoShow.value = true
   }
 
   const getVideoList = async () => {
     let res = await getVideoListApi({
-      type: 'rtsp',
       businessVideoDisplayPosition: '核心景区视频'
     })
-    console.log(res, '视频列表')
     list.value = res.data
-    nextTick(() => {
-      list.value.forEach(async (item, index) => {
-        let webRtcServer = new WebRtcStreamer(
-          `video${index}`,
-          `${mode == 'dev' ? baseUrl : proBaseUrl}/webrtc`
-        )
-        webRtcServer.connect(item.rtspUrl)
-        webRtcServerList.value.push(webRtcServer)
-      })
-    })
-
     // nextTick(() => {
     //   list.value.forEach(async (item, index) => {
-    //     var video = document.getElementById(`video${index}`)
-    //     const hls = new Hls({
-    //       maxBufferLength: 10, // 最大缓冲长度（秒）
-    //       maxMaxBufferLength: 15, // 缓冲区长度的上限
-    //       maxBufferSize: 20 * 1000 * 1000 // 最大缓冲大小（字节）
-    //     })
-    //     hls.loadSource(item.hlsUrl)
-    //     hls.attachMedia(video)
-    //     hls.on(Hls.Events.MANIFEST_PARSED, () => {
-    //       video.play()
-    //     })
+    //     let webRtcServer = new WebRtcStreamer(
+    //       `video${index}`,
+    //       `${mode == 'dev' ? baseUrl : proBaseUrl}/webrtc`
+    //     )
+    //     webRtcServer.connect(item.rtspUrl, '', 'rtptransport=tcp')
+    //     webRtcServerList.value.push(webRtcServer)
     //   })
     // })
+
+    nextTick(() => {
+      list.value.forEach(async (item, index) => {
+        var video = document.getElementById(`video${index}`)
+        const hls = new Hls({
+          enableWorker: false, // 禁用 Worker 来避免额外的线程
+          enableSoftwareAES: true, // 使用软件解码器以避免硬件解码的额外请求
+          cache: true, // 启用缓存
+          maxBufferLength: 10, // 最大缓冲长度（秒）
+          maxMaxBufferLength: 15, // 缓冲区长度的上限
+          maxBufferSize: 20 * 1000 * 1000 // 最大缓冲大小（字节）
+        })
+        hls.loadSource(item.hlsUrl)
+        hls.attachMedia(video)
+        hls.on(Hls.Events.MANIFEST_PARSED, () => {
+          video.play()
+        })
+      })
+    })
   }
   onMounted(() => {
     getVideoList()

src/components/VideoDialog/index.vue

@@ -1,11 +1,18 @@
 <template>
   <div class="dialog">
-    <el-dialog v-model="modelValue" align-center :modal="false" :show-close="false" :z-index="9999">
+    <el-dialog
+      v-model="modelValue"
+      align-center
+      :modal="false"
+      :show-close="false"
+      :z-index="9999"
+      destroy-on-close
+    >
       <div v-if="src" class="dialog-box">
-        <!-- <video class="video" ref="videoRef" muted autoplay controls style="object-fit: cover">
-          <source src="" type="application/x-mpegURL" />
-        </video> -->
-        <video class="video" id="bigVideo" muted autoplay controls style="object-fit: cover" />
+        <video class="video" ref="videoRef" muted autoplay controls>
+          <source type="application/x-mpegURL" />
+        </video>
+        <!-- <video class="video" id="bigVideo" muted autoplay controls style="object-fit: cover" /> -->
 
         <div class="action-box">
           <!-- <div class="action-item">
@@ -68,6 +75,7 @@
   let modelValue = defineModel()
   let videoRef = ref()
   let webRtcServer = null
+  let hlsRef = null
 
   watch(
     () => modelValue.value,
@@ -100,22 +108,42 @@
     })
   }
   const handleClose = () => {
-    webRtcServer.disconnect()
+    // webRtcServer.disconnect()
+    hlsRef.destroy()
+    hlsRef = null
     modelValue.value = false
   }
   const init = () => {
-    webRtcServer = new WebRtcStreamer('bigVideo', `${mode == 'dev' ? baseUrl : proBaseUrl}/webrtc`)
-    webRtcServer.connect(props.src)
-    // const hls = new Hls({
-    //   maxBufferLength: 10, // 最大缓冲长度（秒）
-    //   maxMaxBufferLength: 15, // 缓冲区长度的上限
-    //   maxBufferSize: 15 * 1000 * 1000 // 最大缓冲大小（字节）
-    // })
-    // hls.loadSource(props.src)
-    // hls.attachMedia(videoRef.value)
-    // hls.on(Hls.Events.MANIFEST_PARSED, () => {
-    //   videoRef.value.play()
-    // })
+    // webRtcServer = new WebRtcStreamer('bigVideo', `${mode == 'dev' ? baseUrl : proBaseUrl}/webrtc`)
+    // webRtcServer.connect(props.src)
+    hlsRef = new Hls({
+      enableWorker: false, // 禁用 Worker 来避免额外的线程
+      enableSoftwareAES: true, // 使用软件解码器以避免硬件解码的额外请求
+      cache: true, // 启用缓存
+      maxBufferLength: 10, // 最大缓冲长度（秒）
+      maxMaxBufferLength: 15, // 缓冲区长度的上限
+      maxBufferSize: 20 * 1000 * 1000 // 最大缓冲大小（字节）
+    })
+    hlsRef.loadSource(props.src)
+    hlsRef.attachMedia(videoRef.value)
+    hlsRef.on(Hls.Events.MANIFEST_PARSED, () => {
+      videoRef.value.play()
+    })
+    hlsRef.on(Hls.Events.ERROR, (event, data) => {
+      if (data.fatal) {
+        switch (data.type) {
+          case Hls.ErrorTypes.NETWORK_ERROR:
+            hlsRef.startLoad()
+            break
+          case Hls.ErrorTypes.MEDIA_ERROR:
+            hlsRef.recoverMediaError()
+            break
+          default:
+            hlsRef.destroy()
+            break
+        }
+      }
+    })
   }
 </script>
 
@@ -177,7 +205,9 @@
     }
     .video {
       width: vw(1814);
-      height: vw(790);
+      height: vw(980);
+      object-fit: contain;
+      background-color: #062b57;
     }
     .close {
       cursor: pointer;