fix: 优化flv.js

src/hooks/use-play.ts

@@ -1,22 +1,41 @@
 import flvJs from 'flv.js';
+import { onMounted, onUnmounted, ref } from 'vue';
 
-export async function useFlvPlay(flvurl: string, videoEl: HTMLVideoElement) {
-  if (flvJs.isSupported()) {
-    const flvPlayer = flvJs.createPlayer({
-      type: 'flv',
-      url: flvurl,
-    });
-    flvPlayer.attachMediaElement(videoEl);
-    flvPlayer.load();
-    try {
-      await flvPlayer.play();
-      return { flvPlayer };
-    } catch (err) {
-      console.log(err);
-      return { err: '播放失败' };
+export function useFlvPlay() {
+  const flvPlayer = ref();
+
+  onMounted(() => {});
+
+  onUnmounted(() => {
+    if (flvPlayer.value) {
+      flvPlayer.value.destroy();
+    }
+  });
+
+  async function startPlay(data: {
+    flvurl: string;
+    videoEl: HTMLVideoElement;
+  }) {
+    if (flvPlayer.value) {
+      flvPlayer.value.destroy();
+    }
+    if (flvJs.isSupported()) {
+      const player = flvJs.createPlayer({
+        type: 'flv',
+        url: data.flvurl,
+      });
+      player.attachMediaElement(data.videoEl);
+      player.load();
+      try {
+        await player.play();
+        flvPlayer.value = player;
+      } catch (err) {
+        console.log(err);
+      }
+    } else {
+      console.error('不支持flv');
     }
-  } else {
-    console.error('不支持flv');
-    return { err: '不支持flv' };
   }
+
+  return { startPlay };
 }

src/hooks/use-pull.ts

@@ -1,5 +1,4 @@
 import { getRandomString } from 'billd-utils';
-import FlvJs from 'flv.js';
 import { Ref, nextTick, onUnmounted, reactive, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
@@ -61,7 +60,7 @@ export function usePull({
     }[]
   >([]);
 
-  const player = ref<FlvJs.Player>();
+  const { startPlay } = useFlvPlay();
 
   const track = reactive({
     audio: true,
@@ -101,9 +100,6 @@ export function usePull({
 
   onUnmounted(() => {
     clearInterval(heartbeatTimer.value);
-    if (player.value) {
-      player.value.destroy();
-    }
   });
 
   /** 摄像头 */
@@ -563,13 +559,10 @@ export function usePull({
         streamurl.value = data.data.streamurl!;
         flvurl.value = data.data.flvurl!;
         if (isFlv) {
-          const { err, flvPlayer } = await useFlvPlay(
-            flvurl.value,
-            remoteVideoRef.value!
-          );
-          if (!err) {
-            player.value = flvPlayer;
-          }
+          await startPlay({
+            flvurl: flvurl.value,
+            videoEl: remoteVideoRef.value!,
+          });
         }
         instance.send({ msgType: WsMsgTypeEnum.getLiveUser });
       }

src/views/home/index.vue

@@ -93,7 +93,6 @@
 </template>
 
 <script lang="ts" setup>
-import FlvJs from 'flv.js';
 import { nextTick, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
@@ -108,22 +107,14 @@ const router = useRouter();
 const liveRoomList = ref<ILive[]>([]);
 const currentLiveRoom = ref<ILive>();
 const localVideoRef = ref<HTMLVideoElement>();
-const player = ref<FlvJs.Player>();
+
+const { startPlay } = useFlvPlay();
 
 function changeLiveRoom(item: ILive) {
   currentLiveRoom.value = item;
-  if (player.value) {
-    player.value.destroy();
-  }
   nextTick(async () => {
     if (item.flvurl) {
-      const { err, flvPlayer } = await useFlvPlay(
-        item.flvurl,
-        localVideoRef.value!
-      );
-      if (!err) {
-        player.value = flvPlayer;
-      }
+      await startPlay({ flvurl: item.flvurl, videoEl: localVideoRef.value! });
     }
   });
 }
@@ -140,13 +131,10 @@ async function getLiveRoomList() {
         currentLiveRoom.value = res.data.rows[0];
         nextTick(async () => {
           if (currentLiveRoom.value?.flvurl) {
-            const { err, flvPlayer } = await useFlvPlay(
-              currentLiveRoom.value.flvurl,
-              localVideoRef.value!
-            );
-            if (!err) {
-              player.value = flvPlayer;
-            }
+            await startPlay({
+              flvurl: currentLiveRoom.value.flvurl,
+              videoEl: localVideoRef.value!,
+            });
           }
         });
       }