@revideo/2d 0.5.8-alpha.1083 → 0.5.8-beta.1082

package/lib/utils/video/ffmpeg-client.js

@@ -1,33 +1,45 @@
 export class ImageCommunication {
     constructor() {
+        this.nextFrameHandlers = [];
         if (!import.meta.hot) {
             throw new Error('FfmpegVideoFrame can only be used with HMR.');
         }
+        import.meta.hot.on('revideo:ffmpeg-decoder:video-frame-res', this.handler.bind(this));
+    }
+    handler(event) {
+        const handlers = this.nextFrameHandlers;
+        this.nextFrameHandlers = [];
+        for (const handler of handlers) {
+            handler(event);
+        }
     }
     async getFrame(id, src, time, duration, fps) {
-        const response = await fetch('/revideo-ffmpeg-decoder/video-frame', {
-            method: 'POST',
-            headers: {
-                // eslint-disable-next-line
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-                id,
-                filePath: src,
-                startTime: time,
-                duration,
-                fps,
-            }),
+        return new Promise((resolve, reject) => {
+            if (!import.meta.hot) {
+                reject('FfmpegVideoFrame can only be used with HMR.');
+                return;
+            }
+            function handler(event) {
+                const image = new Image();
+                const uint8Array = new Uint8Array(event.data.frame.data);
+                const blob = new Blob([uint8Array], { type: 'image/png' });
+                const url = URL.createObjectURL(blob);
+                image.src = url;
+                image.onload = () => {
+                    resolve(image);
+                };
+            }
+            this.nextFrameHandlers.push(handler);
+            import.meta.hot.send('revideo:ffmpeg-decoder:video-frame', {
+                data: {
+                    id: id,
+                    filePath: src,
+                    startTime: time,
+                    duration,
+                    fps,
+                },
+            });
         });
-        if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        const width = parseInt(response.headers.get('X-Frame-Width') || '1080', 10);
-        const height = parseInt(response.headers.get('X-Frame-Height') || '1920', 10);
-        const arrayBuffer = await response.arrayBuffer();
-        const imageData = new ImageData(new Uint8ClampedArray(arrayBuffer), width, height);
-        const imageBitmap = await createImageBitmap(imageData);
-        return imageBitmap;
     }
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmZtcGVnLWNsaWVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvdXRpbHMvdmlkZW8vZmZtcGVnLWNsaWVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLE9BQU8sa0JBQWtCO0lBQzdCO1FBQ0UsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsR0FBRyxFQUFFLENBQUM7WUFDckIsTUFBTSxJQUFJLEtBQUssQ0FBQyw2Q0FBNkMsQ0FBQyxDQUFDO1FBQ2pFLENBQUM7SUFDSCxDQUFDO0lBRU0sS0FBSyxDQUFDLFFBQVEsQ0FDbkIsRUFBVSxFQUNWLEdBQVcsRUFDWCxJQUFZLEVBQ1osUUFBZ0IsRUFDaEIsR0FBVztRQUVYLE1BQU0sUUFBUSxHQUFHLE1BQU0sS0FBSyxDQUFDLHFDQUFxQyxFQUFFO1lBQ2xFLE1BQU0sRUFBRSxNQUFNO1lBQ2QsT0FBTyxFQUFFO2dCQUNQLDJCQUEyQjtnQkFDM0IsY0FBYyxFQUFFLGtCQUFrQjthQUNuQztZQUNELElBQUksRUFBRSxJQUFJLENBQUMsU0FBUyxDQUFDO2dCQUNuQixFQUFFO2dCQUNGLFFBQVEsRUFBRSxHQUFHO2dCQUNiLFNBQVMsRUFBRSxJQUFJO2dCQUNmLFFBQVE7Z0JBQ1IsR0FBRzthQUNKLENBQUM7U0FDSCxDQUFDLENBQUM7UUFFSCxJQUFJLENBQUMsUUFBUSxDQUFDLEVBQUUsRUFBRSxDQUFDO1lBQ2pCLE1BQU0sSUFBSSxLQUFLLENBQUMsdUJBQXVCLFFBQVEsQ0FBQyxNQUFNLEVBQUUsQ0FBQyxDQUFDO1FBQzVELENBQUM7UUFFRCxNQUFNLEtBQUssR0FBRyxRQUFRLENBQUMsUUFBUSxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsZUFBZSxDQUFDLElBQUksTUFBTSxFQUFFLEVBQUUsQ0FBQyxDQUFDO1FBQzVFLE1BQU0sTUFBTSxHQUFHLFFBQVEsQ0FDckIsUUFBUSxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxNQUFNLEVBQ2hELEVBQUUsQ0FDSCxDQUFDO1FBRUYsTUFBTSxXQUFXLEdBQUcsTUFBTSxRQUFRLENBQUMsV0FBVyxFQUFFLENBQUM7UUFFakQsTUFBTSxTQUFTLEdBQUcsSUFBSSxTQUFTLENBQzdCLElBQUksaUJBQWlCLENBQUMsV0FBVyxDQUFDLEVBQ2xDLEtBQUssRUFDTCxNQUFNLENBQ1AsQ0FBQztRQUVGLE1BQU0sV0FBVyxHQUFHLE1BQU0saUJBQWlCLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDdkQsT0FBTyxXQUFXLENBQUM7SUFDckIsQ0FBQztDQUNGIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmZtcGVnLWNsaWVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvdXRpbHMvdmlkZW8vZmZtcGVnLWNsaWVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLE9BQU8sa0JBQWtCO0lBQzdCO1FBV1Esc0JBQWlCLEdBQXNDLEVBQUUsQ0FBQztRQVZoRSxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxHQUFHLEVBQUUsQ0FBQztZQUNyQixNQUFNLElBQUksS0FBSyxDQUFDLDZDQUE2QyxDQUFDLENBQUM7UUFDakUsQ0FBQztRQUVELE1BQU0sQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FDaEIsd0NBQXdDLEVBQ3hDLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUN4QixDQUFDO0lBQ0osQ0FBQztJQUlPLE9BQU8sQ0FBQyxLQUFtQjtRQUNqQyxNQUFNLFFBQVEsR0FBRyxJQUFJLENBQUMsaUJBQWlCLENBQUM7UUFDeEMsSUFBSSxDQUFDLGlCQUFpQixHQUFHLEVBQUUsQ0FBQztRQUU1QixLQUFLLE1BQU0sT0FBTyxJQUFJLFFBQVEsRUFBRSxDQUFDO1lBQy9CLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNqQixDQUFDO0lBQ0gsQ0FBQztJQUVNLEtBQUssQ0FBQyxRQUFRLENBQ25CLEVBQVUsRUFDVixHQUFXLEVBQ1gsSUFBWSxFQUNaLFFBQWdCLEVBQ2hCLEdBQVc7UUFFWCxPQUFPLElBQUksT0FBTyxDQUFtQixDQUFDLE9BQU8sRUFBRSxNQUFNLEVBQUUsRUFBRTtZQUN2RCxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxHQUFHLEVBQUUsQ0FBQztnQkFDckIsTUFBTSxDQUFDLDZDQUE2QyxDQUFDLENBQUM7Z0JBQ3RELE9BQU87WUFDVCxDQUFDO1lBRUQsU0FBUyxPQUFPLENBQUMsS0FBbUI7Z0JBQ2xDLE1BQU0sS0FBSyxHQUFHLElBQUksS0FBSyxFQUFFLENBQUM7Z0JBRTFCLE1BQU0sVUFBVSxHQUFHLElBQUksVUFBVSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxDQUFDO2dCQUN6RCxNQUFNLElBQUksR0FBRyxJQUFJLElBQUksQ0FBQyxDQUFDLFVBQVUsQ0FBQyxFQUFFLEVBQUMsSUFBSSxFQUFFLFdBQVcsRUFBQyxDQUFDLENBQUM7Z0JBQ3pELE1BQU0sR0FBRyxHQUFHLEdBQUcsQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLENBQUM7Z0JBRXRDLEtBQUssQ0FBQyxHQUFHLEdBQUcsR0FBRyxDQUFDO2dCQUVoQixLQUFLLENBQUMsTUFBTSxHQUFHLEdBQUcsRUFBRTtvQkFDbEIsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFDO2dCQUNqQixDQUFDLENBQUM7WUFDSixDQUFDO1lBRUQsSUFBSSxDQUFDLGlCQUFpQixDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztZQUVyQyxNQUFNLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsb0NBQW9DLEVBQUU7Z0JBQ3pELElBQUksRUFBRTtvQkFDSixFQUFFLEVBQUUsRUFBRTtvQkFDTixRQUFRLEVBQUUsR0FBRztvQkFDYixTQUFTLEVBQUUsSUFBSTtvQkFDZixRQUFRO29CQUNSLEdBQUc7aUJBQ0o7YUFDRixDQUFDLENBQUM7UUFDTCxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7Q0FDRiJ9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revideo/2d",
-  "version": "0.5.8-alpha.1083+9fe3f4c0",
+  "version": "0.5.8-beta.1082+5514e32d",
   "description": "A 2D renderer for revideo",
   "author": "revideo",
   "homepage": "https://re.video/",
@@ -30,7 +30,7 @@
   "devDependencies": {
     "@preact/signals": "^1.2.1",
     "@revideo/internal": "^0.0.0",
-    "@revideo/ui": "^0.5.8-alpha.1083+9fe3f4c0",
+    "@revideo/ui": "^0.5.8-beta.1082+5514e32d",
     "clsx": "^2.0.0",
     "jsdom": "^22.1.0",
     "preact": "^10.19.2",
@@ -40,7 +40,7 @@
     "@codemirror/language": "^6.10.1",
     "@lezer/common": "^1.2.1",
     "@lezer/highlight": "^1.2.0",
-    "@revideo/core": "^0.5.8-alpha.1083+9fe3f4c0",
+    "@revideo/core": "^0.5.8-beta.1082+5514e32d",
     "@rive-app/canvas-advanced": "2.7.3",
     "code-fns": "^0.8.2",
     "hls.js": "^1.5.11",
@@ -48,5 +48,5 @@
     "mp4box": "^0.5.2",
     "parse-svg-path": "^0.1.2"
   },
-  "gitHead": "9fe3f4c0157a41487144398d997636205ce6ce1d"
+  "gitHead": "5514e32d74656cbbc12f121b48d4d3078850d817"
 }

package/src/lib/components/Media.ts

@@ -95,10 +95,6 @@ export abstract class Media extends Asset {
     return this.volume;
   }
 
-  public getUrl(): string {
-    return this.mediaElement().src;
-  }
-
   public override dispose() {
     this.pause();
     this.remove();

package/src/lib/components/Video.ts

@@ -197,7 +197,7 @@ export class Video extends Media {
     return video;
   }
 
-  protected lastFrame: ImageBitmap | null = null;
+  protected lastFrame: HTMLImageElement | null = null;
 
   protected async webcodecSeekedVideo(): Promise<CanvasImageSource> {
     const video = this.video();
@@ -213,7 +213,7 @@ export class Video extends Media {
     return getFrame(this.key, video.src, time, fps);
   }
 
-  protected async ffmpegSeekedVideo(): Promise<ImageBitmap> {
+  protected async ffmpegSeekedVideo(): Promise<HTMLImageElement> {
     const video = this.video();
     const time = this.clampTime(this.time());
     const duration = this.getDuration();

package/src/lib/scenes/Scene2D.ts

@@ -170,8 +170,7 @@ export class Scene2D extends GeneratorScene<View2D> implements Inspectable {
       ...playingVideos.map(vid => ({
         key: vid.key,
         type: 'video' as const,
-        src: vid.getUrl(),
-        decoder: vid.decoder(),
+        src: vid.fullSource(),
         playbackRate:
           typeof vid.playbackRate === 'function'
             ? vid.playbackRate()

package/src/lib/utils/video/ffmpeg-client.ts

@@ -3,6 +3,22 @@ export class ImageCommunication {
     if (!import.meta.hot) {
       throw new Error('FfmpegVideoFrame can only be used with HMR.');
     }
+
+    import.meta.hot.on(
+      'revideo:ffmpeg-decoder:video-frame-res',
+      this.handler.bind(this),
+    );
+  }
+
+  private nextFrameHandlers: ((event: MessageEvent) => void)[] = [];
+
+  private handler(event: MessageEvent) {
+    const handlers = this.nextFrameHandlers;
+    this.nextFrameHandlers = [];
+
+    for (const handler of handlers) {
+      handler(event);
+    }
   }
 
   public async getFrame(
@@ -12,40 +28,37 @@ export class ImageCommunication {
     duration: number,
     fps: number,
   ) {
-    const response = await fetch('/revideo-ffmpeg-decoder/video-frame', {
-      method: 'POST',
-      headers: {
-        // eslint-disable-next-line
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        id,
-        filePath: src,
-        startTime: time,
-        duration,
-        fps,
-      }),
-    });
+    return new Promise<HTMLImageElement>((resolve, reject) => {
+      if (!import.meta.hot) {
+        reject('FfmpegVideoFrame can only be used with HMR.');
+        return;
+      }
 
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
+      function handler(event: MessageEvent) {
+        const image = new Image();
 
-    const width = parseInt(response.headers.get('X-Frame-Width') || '1080', 10);
-    const height = parseInt(
-      response.headers.get('X-Frame-Height') || '1920',
-      10,
-    );
+        const uint8Array = new Uint8Array(event.data.frame.data);
+        const blob = new Blob([uint8Array], {type: 'image/png'});
+        const url = URL.createObjectURL(blob);
 
-    const arrayBuffer = await response.arrayBuffer();
+        image.src = url;
 
-    const imageData = new ImageData(
-      new Uint8ClampedArray(arrayBuffer),
-      width,
-      height,
-    );
+        image.onload = () => {
+          resolve(image);
+        };
+      }
+
+      this.nextFrameHandlers.push(handler);
 
-    const imageBitmap = await createImageBitmap(imageData);
-    return imageBitmap;
+      import.meta.hot.send('revideo:ffmpeg-decoder:video-frame', {
+        data: {
+          id: id,
+          filePath: src,
+          startTime: time,
+          duration,
+          fps,
+        },
+      });
+    });
   }
 }