fix: black frame for AVCanvas play

Author: hughfenghen

.changeset/itchy-buses-call.md

@@ -0,0 +1,6 @@
+---
+'@webav/av-canvas': patch
+'@webav/av-cliper': patch
+---
+
+fix: black frame for AVCanvas play

packages/av-canvas/demo/video-editor.tsx

@@ -11,6 +11,7 @@ import {
   TimelineRow,
   TimelineState,
 } from '@xzdarcy/react-timeline-editor';
+import { file, write } from 'opfs-tools';
 import React, { useEffect, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { AVCanvas } from '../src';
@@ -184,16 +185,16 @@ function App() {
     // })();
 
     // 模拟添加 60个素材，验证内存占用
-    // (async () => {
-    //   const f = file('/test-1.mp4');
-    //   await write(f, (await fetch('./video/incorrect-frame-type.mp4')).body!);
-    //   for (let i = 0; i < 60; i++) {
-    //     const spr = new VisibleSprite(new MP4Clip(f));
-    //     await spr.ready;
-    //     await cvs.addSprite(spr);
-    //     addSprite2Track('1-video', spr, '视频');
-    //   }
-    // })();
+    (async () => {
+      const f = file('/test-1.mp4');
+      await write(f, (await fetch('./video/incorrect-frame-type.mp4')).body!);
+      for (let i = 0; i < 60; i++) {
+        const spr = new VisibleSprite(new MP4Clip(f));
+        await spr.ready;
+        await cvs.addSprite(spr);
+        addSprite2Track('1-video', spr, '视频');
+      }
+    })();
 
     return () => {
       cvs.destroy();

packages/av-canvas/src/av-canvas.ts

@@ -306,10 +306,10 @@ export class AVCanvas {
    * 预览 `AVCanvas` 指定时间的图像帧
    */
   previewFrame(time: number) {
-    this.#updateRenderTime(time);
     this.#spriteManager.getSprites().forEach((vs) => {
       vs.preFrame(time - vs.time.offset);
     });
+    this.#updateRenderTime(time);
     this.#pause();
   }
 

packages/av-cliper/src/sprite/visible-sprite.ts

@@ -49,9 +49,6 @@ export class VisibleSprite extends BaseSprite {
     if (this.#ticking) return;
     this.#ticking = true;
 
-    this.#lastVf?.close();
-    this.#lastVf = null;
-    this.#lastAudio = [];
     this.#clip
       .tick(time * this.time.playbackRate)
       .then(({ video, audio }) => {
@@ -76,6 +73,9 @@ export class VisibleSprite extends BaseSprite {
    */
   preFrame(time: number) {
     if (this.#lastTime === time) return;
+    this.#lastVf?.close();
+    this.#lastVf = null;
+    this.#lastAudio = [];
     this.#update(time);
     this.#lastTime = time;
   }