From 2d881eae08d7430ddaf1a98bde655e48d28d17d9 Mon Sep 17 00:00:00 2001
From: zjc <1034206993@qq.com>
Date: Sat, 22 Feb 2025 12:59:47 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=AE=8C=E5=96=84=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                      | 27 +---------
 package.json                           |  2 -
 src/components/CoreVideo/index.vue     | 54 ++++++++++----------
 src/components/VideoDialog/index.vue   | 68 +++++++++++++++++++-------
 src/hooks/socket.js                    |  1 +
 src/layout/index.vue                   |  8 +--
 src/views/home/components/box-1.vue    | 16 ------
 src/views/monitor/components/box-2.vue | 44 +++++------------
 8 files changed, 96 insertions(+), 124 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 87e8056..0d0e5c3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,10 +12,8 @@
         "echarts": "^5.5.1",
         "echarts-wordcloud": "^2.0.0",
         "element-plus": "^2.9.0",
-        "flv.js": "^1.6.2",
         "hls.js": "^1.5.18",
         "lodash": "^4.17.21",
-        "mitt": "^3.0.1",
         "pinia": "^2.2.6",
         "pubsub-js": "^1.9.5",
         "vue": "^3.5.13",
@@ -1752,12 +1750,6 @@
       "dev": true,
       "peer": true
     },
-    "node_modules/es6-promise": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmmirror.com/es6-promise/-/es6-promise-4.2.8.tgz",
-      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
-      "license": "MIT"
-    },
     "node_modules/esbuild": {
       "version": "0.24.0",
       "resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.24.0.tgz",
@@ -1989,16 +1981,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/flv.js": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmmirror.com/flv.js/-/flv.js-1.6.2.tgz",
-      "integrity": "sha512-xre4gUbX1MPtgQRKj2pxJENp/RnaHaxYvy3YToVVCrSmAWUu85b9mug6pTXF6zakUjNP2lFWZ1rkSX7gxhB/2A==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "es6-promise": "^4.2.8",
-        "webworkify-webpack": "^2.1.5"
-      }
-    },
     "node_modules/follow-redirects": {
       "version": "1.15.9",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz",
@@ -2583,7 +2565,8 @@
     "node_modules/mitt": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
-      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "dev": true
     },
     "node_modules/mlly": {
       "version": "1.7.3",
@@ -4007,12 +3990,6 @@
         "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/webworkify-webpack": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmmirror.com/webworkify-webpack/-/webworkify-webpack-2.1.5.tgz",
-      "integrity": "sha512-2akF8FIyUvbiBBdD+RoHpoTbHMQF2HwjcxfDvgztAX5YwbZNyrtfUMgvfgFVsgDhDPVTlkbb5vyasqDHfIDPQw==",
-      "license": "MIT"
-    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index b6af09e..70c1645 100644
--- a/package.json
+++ b/package.json
@@ -13,10 +13,8 @@
     "echarts": "^5.5.1",
     "echarts-wordcloud": "^2.0.0",
     "element-plus": "^2.9.0",
-    "flv.js": "^1.6.2",
     "hls.js": "^1.5.18",
     "lodash": "^4.17.21",
-    "mitt": "^3.0.1",
     "pinia": "^2.2.6",
     "pubsub-js": "^1.9.5",
     "vue": "^3.5.13",
diff --git a/src/components/CoreVideo/index.vue b/src/components/CoreVideo/index.vue
index a089ba5..037584f 100644
--- a/src/components/CoreVideo/index.vue
+++ b/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()
diff --git a/src/components/VideoDialog/index.vue b/src/components/VideoDialog/index.vue
index ba77915..d616fec 100644
--- a/src/components/VideoDialog/index.vue
+++ b/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;
diff --git a/src/hooks/socket.js b/src/hooks/socket.js
index 238e548..2b06ac3 100644
--- a/src/hooks/socket.js
+++ b/src/hooks/socket.js
@@ -25,6 +25,7 @@ export function useWebSocket(url) {
       }
     }
     socket.value.onclose = (event) => {
+      isConnected.value = false
       console.log('WebSocket close：', event)
     }
   }
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 51baf18..7c73253 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,9 +1,11 @@
 <template>
   <Header />
   <div class="flex flex-1">
-    <CoreVideo />
-    <div class="mian"><RouterView /></div>
-    <Correspondence />
+    <core-video />
+    <div class="mian">
+      <router-view />
+    </div>
+    <correspondence />
   </div>
 </template>
 
diff --git a/src/views/home/components/box-1.vue b/src/views/home/components/box-1.vue
index 4ddedd7..26eaf93 100644
--- a/src/views/home/components/box-1.vue
+++ b/src/views/home/components/box-1.vue
@@ -147,22 +147,6 @@
   const scenicQueueXAxisData = computed(() => {
     return homeStore.scenicQueueData.dataList.map((item) => item.name)
   })
-
-  // 年龄占比 - 游客总数
-  const ageRateTotal = computed(() => {
-    return homeStore?.userPortraitData?.genderRate.reduce(
-      (total, current) => Number(current.count) + total,
-      0
-    )
-  })
-
-  // 购票来源 - 游客总数
-  const channelTotal = computed(() => {
-    return homeStore.userPortraitData?.channel.reduce(
-      (total, current) => Number(current.count) + total,
-      0
-    )
-  })
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/monitor/components/box-2.vue b/src/views/monitor/components/box-2.vue
index 11697b7..c118974 100644
--- a/src/views/monitor/components/box-2.vue
+++ b/src/views/monitor/components/box-2.vue
@@ -56,10 +56,10 @@
             <video
               class="video-item__video"
               :id="'monitorVideo' + index"
+              preload="auto"
               muted
               autoplay
               :controls="false"
-              style="object-fit: cover"
             >
               <source src="" type="application/x-mpegURL" />
             </video>
@@ -158,7 +158,7 @@
     businessScenicArea: '',
     businessVideoDisplayPosition: ''
   })
-
+  let hlsRefs = []
   // const postVideoRemain = async () => {
   //   setInterval(() => {
   //     postVideoRemainApi({
@@ -181,6 +181,7 @@
         hls.on(Hls.Events.MANIFEST_PARSED, () => {
           video.play()
         })
+        hlsRefs.push(hls)
       })
     })
   }
@@ -255,6 +256,7 @@
             hls.on(Hls.Events.MANIFEST_PARSED, () => {
               video.play()
             })
+            hlsRefs.push(hls)
           })
         })
       }
@@ -325,6 +327,12 @@
     onMonitorChange()
   })
   onUnmounted(() => {
+    // 释放hls实例
+    if (hlsRefs.length > 0) {
+      hlsRefs.map((item) => {
+        item.destroy()
+      })
+    }
     PubSub.unsubscribe(monitorChange)
   })
 </script>
@@ -459,36 +467,6 @@
             }
           }
         }
-        .tree-b::before {
-          position: absolute;
-          top: vw(-8);
-          left: vw(-8);
-          content: '';
-          width: vw(12);
-          height: vw(12);
-          background-image: url('/src/assets/images/icon-a-1.png');
-          background-size: 100% 100%;
-        }
-        // .tree-b {
-        //   position: relative;
-        //   border-left: vw(3) solid;
-        //   border-image: linear-gradient(311deg, rgba(0, 11, 36, 0), rgba(55, 216, 252, 1)) 1 1;
-        //   margin-left: vw(30);
-        //   margin-top: vh(10);
-        //   .name-2 {
-        //     cursor: pointer;
-        //     padding: 0 vw(20);
-        //     display: block;
-        //     font-weight: 400;
-        //     font-size: vw(15);
-        //     color: #ffffff;
-        //     height: vh(30);
-        //     line-height: vh(30);
-        //     white-space: nowrap; /* 保证文本在一行内显示 */
-        //     overflow: hidden; /* 隐藏溢出的内容 */
-        //     text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
-        //   }
-        // }
       }
     }
     .ul {
@@ -591,8 +569,8 @@
     &-item__video {
       width: 100%;
       height: vh(406);
+      object-fit: cover;
     }
-
     &-detail {
       margin-left: vw(10);
       display: flex;