fix: 流播放器更新

.env.development

@@ -16,7 +16,7 @@ VITE_DROP_CONSOLE = true
 # 跨域代理，可以配置多个，请注意不要换行
 #VITE_PROXY = [["/appApi","http://localhost:8001"],["/upload","http://localhost:8001/upload"]]
 # VITE_PROXY=[["/temp","http://172.16.23.144:8800"],["/upload","http://172.16.23.144:8086"]]
-VITE_PROXY=[["/skyeye-admin-api","http://172.16.23.144:8800/api"]]
+VITE_PROXY=[["/skyeye-admin-api","http://192.168.1.102:8800/api"]]
 
 # API 接口地址
 VITE_GLOB_API_URL = 

package.json

@@ -42,18 +42,19 @@
     "@wangeditor/editor-for-vue": "5.1.12",
     "axios": "0.27.2",
     "blueimp-md5": "2.19.0",
-    "canvg": "^4.0.1",
+    "canvg": "4.0.1",
     "cropperjs": "1.5.12",
     "dayjs": "1.11.4",
     "echarts": "5.3.3",
     "element-plus": "2.3.6",
     "element-resize-detector": "1.2.4",
     "fabric": "5.3.0",
-    "html2canvas": "1.4.1",
     "flv.js": "1.6.2",
+    "html2canvas": "1.4.1",
     "konva": "9.3.0",
     "lodash-es": "4.17.21",
     "mockjs": "1.1.0",
+    "mpegts.js": "1.7.3",
     "nprogress": "0.2.0",
     "number-precision": "1.6.0",
     "perfect-scrollbar": "1.5.5",
@@ -153,4 +154,4 @@
       ]
     }
   }
-}
+}

pnpm-lock.yaml

@@ -74,6 +74,9 @@ dependencies:
   mockjs:
     specifier: 1.1.0
     version: 1.1.0
+  mpegts.js:
+    specifier: ^1.7.3
+    version: 1.7.3
   nprogress:
     specifier: 0.2.0
     version: 0.2.0
@@ -5876,6 +5879,13 @@ packages:
     dependencies:
       commander: 9.4.0
 
+  /mpegts.js@1.7.3:
+    resolution: {integrity: sha512-kqZ1C1IsbAQN72cK8vMrzKeM7hwrwSBbFAwVAc7PPweOeoZxCANrc7fAVDKMfYUzxdNkMTnec9tVmlxmKZB0TQ==}
+    dependencies:
+      es6-promise: 4.2.8
+      webworkify-webpack: 2.1.5
+    dev: false
+
   /mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}

src/components/LiveVideo/LiveVideo.vue

@@ -7,24 +7,30 @@
 <script setup lang="ts">
   import { onMounted, onBeforeUnmount, watch } from 'vue';
   import flvjs from 'flv.js';
+  import mpegts from 'mpegts.js';
 
   const props = defineProps<{
     url: string;
   }>();
 
-  let player: flvjs.Player | null;
+  let player: mpegts.Player | null;
 
   const initPlay = () => {
     const videoElement = document.getElementById('video') as HTMLMediaElement;
-    player = flvjs.createPlayer({
-      type: 'flv',
-      isLive: true,
-      hasAudio: false,
-      url: props.url,
-    });
+    player = mpegts.createPlayer(
+      {
+        type: 'flv',
+        isLive: true,
+        hasAudio: false,
+        url: props.url,
+      },
+      {
+        liveBufferLatencyChasing: true,
+      },
+    );
     player.attachMediaElement(videoElement);
     player.load();
-    player.on(flvjs.Events.METADATA_ARRIVED, () => {
+    player.on(flvjs.Events.MEDIA_INFO, () => {
       // testStore.setVideoReady(true);
     });
     // player.play();