fix: 清除副作用

src/hooks/use-play.ts

@@ -80,41 +80,6 @@ export function useFlvPlay() {
       } else {
         console.error('不支持flv');
       }
-      // if (flvJs.isSupported()) {
-      //   flvPlayer.value = flvJs.createPlayer({
-      //     type: 'flv',
-      //     url: data.flvurl,
-      //   });
-      //   const videoEl = createVideo({ muted: true, autoplay: true });
-      //   flvVideoEl.value = videoEl;
-      //   flvVideoEl.value.addEventListener('play', () => {
-      //     console.log('flv-play');
-      //   });
-      //   flvVideoEl.value.addEventListener('playing', () => {
-      //     console.log(
-      //       'flv-playing',
-      //       flvVideoEl.value?.videoWidth,
-      //       flvVideoEl.value?.videoHeight
-      //     );
-      //     // setMuted(false);
-      //     setMuted(appStore.muted);
-      //     resolve({
-      //       width: flvVideoEl.value?.videoWidth || 0,
-      //       height: flvVideoEl.value?.videoHeight || 0,
-      //     });
-      //   });
-      //   flvPlayer.value.attachMediaElement(flvVideoEl.value);
-      //   flvPlayer.value.load();
-      //   try {
-      //     console.log('开始播放flv');
-      //     flvPlayer.value.play();
-      //   } catch (err) {
-      //     console.error('flv播放失败');
-      //     console.log(err);
-      //   }
-      // } else {
-      //   console.error('不支持flv');
-      // }
     });
   }
 

src/hooks/use-pull.ts

@@ -64,13 +64,19 @@ export function usePull({
   const stopDrawingArr = ref<any[]>([]);
 
   onUnmounted(() => {
-    stopDrawingArr.value.forEach((cb) => cb());
+    stopOldDrawing();
   });
 
+  function stopOldDrawing() {
+    stopDrawingArr.value.forEach((cb) => cb());
+    stopDrawingArr.value = [];
+  }
+
   async function handleHlsPlay() {
     console.log('handleHlsPlay');
-    await startHlsPlay({ hlsurl: hlsurl.value });
     videoLoading.value = true;
+    stopOldDrawing();
+    await startHlsPlay({ hlsurl: hlsurl.value });
     const { canvas, stopDrawing } = videoToCanvas({
       videoEl: hlsVideoEl.value!,
       targetEl: canvasRef.value!,
@@ -82,6 +88,7 @@ export function usePull({
 
   async function handleFlvPlay() {
     console.log('handleFlvPlay');
+    stopOldDrawing();
     await startFlvPlay({ flvurl: flvurl.value });
     const initCanvas = videoToCanvas({
       videoEl: flvVideoEl.value!,
@@ -90,6 +97,7 @@ export function usePull({
     stopDrawingArr.value.push(initCanvas.stopDrawing);
     canvasRef.value!.appendChild(initCanvas.canvas);
     flvPlayer.value!.on(mpegts.Events.MEDIA_INFO, () => {
+      stopOldDrawing();
       const newCanvas = videoToCanvas({
         videoEl: flvVideoEl.value!,
         targetEl: canvasRef.value!,

src/utils/index.ts

@@ -83,7 +83,6 @@ export function videoToCanvas(data: {
       canvas.height = height!;
       ctx.drawImage(videoEl, 0, 0, width!, height!);
     }
-    console.log(performance.now());
     timer = requestAnimationFrame(drawCanvas);
   }