fix: 取消拉流

package.json

@@ -37,7 +37,7 @@
     "billd-deploy": "^1.0.16",
     "billd-html-webpack-plugin": "^1.0.1",
     "billd-scss": "^0.0.6",
-    "billd-utils": "^0.0.11",
+    "billd-utils": "^0.0.12",
     "browser-tool": "^1.0.5",
     "flv.js": "^1.6.2",
     "js-cookie": "^3.0.5",

pnpm-lock.yaml

@@ -19,7 +19,7 @@ specifiers:
   billd-deploy: ^1.0.16
   billd-html-webpack-plugin: ^1.0.1
   billd-scss: ^0.0.6
-  billd-utils: ^0.0.11
+  billd-utils: ^0.0.12
   browser-tool: ^1.0.5
   chalk: ^4
   commitizen: ^4.2.4
@@ -87,7 +87,7 @@ dependencies:
   billd-deploy: 1.0.16_imakxv3mh5kp5z5uouwrjmnj5q
   billd-html-webpack-plugin: 1.0.1_imakxv3mh5kp5z5uouwrjmnj5q
   billd-scss: 0.0.6
-  billd-utils: 0.0.11_typescript@4.9.5
+  billd-utils: 0.0.12_typescript@4.9.5
   browser-tool: 1.0.5
   flv.js: 1.6.2
   js-cookie: 3.0.5
@@ -3199,8 +3199,8 @@ packages:
     requiresBuild: true
     dev: false
 
-  /billd-utils/0.0.11_typescript@4.9.5:
-    resolution: {integrity: sha512-evuaF3KHZKkx3FEfJkw0vJWhqRjFUr+LKNcBzFPMf0hTgxxIBhoEWXkpjbWxpIkXWk737CYvdNRvnvGOj077VQ==}
+  /billd-utils/0.0.12_typescript@4.9.5:
+    resolution: {integrity: sha512-bHB/gZk6I9fGKHQiu+QXpqBiCXF72kYi4/xDI8RZwdVsjFd6QqsItlx1MpX4j25GJnhsG2vbrg0tLQ48zXHQoQ==}
     requiresBuild: true
     dependencies:
       '@babel/core': 7.21.3

src/hooks/use-play.ts

@@ -1,6 +1,6 @@
 import flvJs from 'flv.js';
 
-export function useFlvPlay(flvurl: string, videoEl: HTMLVideoElement) {
+export async function useFlvPlay(flvurl: string, videoEl: HTMLVideoElement) {
   if (flvJs.isSupported()) {
     const flvPlayer = flvJs.createPlayer({
       type: 'flv',
@@ -9,11 +9,14 @@ export function useFlvPlay(flvurl: string, videoEl: HTMLVideoElement) {
     flvPlayer.attachMediaElement(videoEl);
     flvPlayer.load();
     try {
-      flvPlayer.play();
-    } catch (error) {
-      console.log(error);
+      await flvPlayer.play();
+      return { flvPlayer };
+    } catch (err) {
+      console.log(err);
+      return { err: '播放失败' };
     }
   } else {
     console.error('不支持flv');
+    return { err: '不支持flv' };
   }
 }

src/hooks/use-pull.ts

@@ -1,4 +1,5 @@
 import { getRandomString } from 'billd-utils';
+import FlvJs from 'flv.js';
 import { Ref, nextTick, onUnmounted, reactive, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
@@ -60,6 +61,8 @@ export function usePull({
     }[]
   >([]);
 
+  const player = ref<FlvJs.Player>();
+
   const track = reactive({
     audio: true,
     video: true,
@@ -98,6 +101,9 @@ export function usePull({
 
   onUnmounted(() => {
     clearInterval(heartbeatTimer.value);
+    if (player.value) {
+      player.value.destroy();
+    }
   });
 
   /** 摄像头 */
@@ -545,20 +551,29 @@ export function usePull({
     });
 
     // 用户加入房间
-    instance.socketIo.on(WsMsgTypeEnum.joined, (data: { data: ILive }) => {
-      prettierReceiveWebsocket(WsMsgTypeEnum.joined, data);
-      roomName.value = data.data.live_room?.roomName!;
-      userName.value = data.data.user?.username!;
-      userAvatar.value = data.data.user?.avatar!;
-      track.audio = data.data.track_audio!;
-      track.video = data.data.track_video!;
-      streamurl.value = data.data.streamurl!;
-      flvurl.value = data.data.flvurl!;
-      if (isFlv) {
-        useFlvPlay(flvurl.value, remoteVideoRef.value!);
+    instance.socketIo.on(
+      WsMsgTypeEnum.joined,
+      async (data: { data: ILive }) => {
+        prettierReceiveWebsocket(WsMsgTypeEnum.joined, data);
+        roomName.value = data.data.live_room?.roomName!;
+        userName.value = data.data.user?.username!;
+        userAvatar.value = data.data.user?.avatar!;
+        track.audio = data.data.track_audio!;
+        track.video = data.data.track_video!;
+        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;
+          }
+        }
+        instance.send({ msgType: WsMsgTypeEnum.getLiveUser });
       }
-      instance.send({ msgType: WsMsgTypeEnum.getLiveUser });
-    });
+    );
 
     // 其他用户加入房间
     instance.socketIo.on(WsMsgTypeEnum.otherJoin, (data) => {

src/views/home/index.vue

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