fix: safari兼容

src/hooks/use-pull.ts

@@ -76,10 +76,11 @@ export function usePull({
     console.log('handleHlsPlay');
     videoLoading.value = true;
     stopOldDrawing();
-    await startHlsPlay({ hlsurl: hlsurl.value });
+    const { width, height } = await startHlsPlay({ hlsurl: hlsurl.value });
     const { canvas, stopDrawing } = videoToCanvas({
       videoEl: hlsVideoEl.value!,
       targetEl: canvasRef.value!,
+      size: { width, height },
     });
     stopDrawingArr.value.push(stopDrawing);
     canvasRef.value!.appendChild(canvas);

src/utils/index.ts

@@ -61,6 +61,7 @@ export const createVideo = ({ muted = true, autoplay = true }) => {
 export function videoToCanvas(data: {
   videoEl: HTMLVideoElement;
   targetEl: Element;
+  size?: { width: number; height: number };
 }) {
   const { videoEl, targetEl } = data;
   if (!videoEl || !targetEl) {
@@ -73,15 +74,22 @@ export function videoToCanvas(data: {
   let timer;
 
   function drawCanvas() {
-    const videoTrack = videoEl
-      // @ts-ignore
-      .captureStream()
-      .getVideoTracks()[0];
-    if (videoTrack) {
-      const { width, height } = videoTrack.getSettings();
-      canvas.width = width!;
-      canvas.height = height!;
-      ctx.drawImage(videoEl, 0, 0, width!, height!);
+    if (data.size) {
+      const { width, height } = data.size;
+      canvas.width = width;
+      canvas.height = height;
+      ctx.drawImage(videoEl, 0, 0, width, height);
+    } else {
+      const videoTrack = videoEl
+        // @ts-ignore
+        .captureStream()
+        .getVideoTracks()[0];
+      if (videoTrack) {
+        const { width, height } = videoTrack.getSettings();
+        canvas.width = width!;
+        canvas.height = height!;
+        ctx.drawImage(videoEl, 0, 0, width!, height!);
+      }
     }
     timer = requestAnimationFrame(drawCanvas);
   }

src/views/home/index.vue

@@ -190,9 +190,11 @@ onUnmounted(() => {
 
 async function handleHlsPlay(hlsurl: string) {
   await startHlsPlay({ hlsurl });
+  const { width, height } = await startHlsPlay({ hlsurl });
   const { canvas, stopDrawing } = videoToCanvas({
     videoEl: hlsVideoEl.value!,
     targetEl: canvasRef.value!,
+    size: { width, height },
   });
   stopDrawingArr.value.push(stopDrawing);
   canvasRef.value!.appendChild(canvas);