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

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

@@ -1,45 +1,32 @@
 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) {
-        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,
-                },
-            });
+        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,
+            }),
         });
+        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);
+        return createImageBitmap(imageData);
     }
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmZtcGVnLWNsaWVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvdXRpbHMvdmlkZW8vZmZtcGVnLWNsaWVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLE9BQU8sa0JBQWtCO0lBQzdCO1FBV1Esc0JBQWlCLEdBQXNDLEVBQUUsQ0FBQztRQVZoRSxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxHQUFHLEVBQUUsQ0FBQztZQUNyQixNQUFNLElBQUksS0FBSyxDQUFDLDZDQUE2QyxDQUFDLENBQUM7UUFDakUsQ0FBQztRQUVELE1BQU0sQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FDaEIsd0NBQXdDLEVBQ3hDLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUN4QixDQUFDO0lBQ0osQ0FBQztJQUlPLE9BQU8sQ0FBQyxLQUFtQjtRQUNqQyxNQUFNLFFBQVEsR0FBRyxJQUFJLENBQUMsaUJBQWlCLENBQUM7UUFDeEMsSUFBSSxDQUFDLGlCQUFpQixHQUFHLEVBQUUsQ0FBQztRQUU1QixLQUFLLE1BQU0sT0FBTyxJQUFJLFFBQVEsRUFBRSxDQUFDO1lBQy9CLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNqQixDQUFDO0lBQ0gsQ0FBQztJQUVNLEtBQUssQ0FBQyxRQUFRLENBQ25CLEVBQVUsRUFDVixHQUFXLEVBQ1gsSUFBWSxFQUNaLFFBQWdCLEVBQ2hCLEdBQVc7UUFFWCxPQUFPLElBQUksT0FBTyxDQUFtQixDQUFDLE9BQU8sRUFBRSxNQUFNLEVBQUUsRUFBRTtZQUN2RCxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxHQUFHLEVBQUUsQ0FBQztnQkFDckIsTUFBTSxDQUFDLDZDQUE2QyxDQUFDLENBQUM7Z0JBQ3RELE9BQU87WUFDVCxDQUFDO1lBRUQsU0FBUyxPQUFPLENBQUMsS0FBbUI7Z0JBQ2xDLE1BQU0sS0FBSyxHQUFHLElBQUksS0FBSyxFQUFFLENBQUM7Z0JBRTFCLE1BQU0sVUFBVSxHQUFHLElBQUksVUFBVSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxDQUFDO2dCQUN6RCxNQUFNLElBQUksR0FBRyxJQUFJLElBQUksQ0FBQyxDQUFDLFVBQVUsQ0FBQyxFQUFFLEVBQUMsSUFBSSxFQUFFLFdBQVcsRUFBQyxDQUFDLENBQUM7Z0JBQ3pELE1BQU0sR0FBRyxHQUFHLEdBQUcsQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLENBQUM7Z0JBRXRDLEtBQUssQ0FBQyxHQUFHLEdBQUcsR0FBRyxDQUFDO2dCQUVoQixLQUFLLENBQUMsTUFBTSxHQUFHLEdBQUcsRUFBRTtvQkFDbEIsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFDO2dCQUNqQixDQUFDLENBQUM7WUFDSixDQUFDO1lBRUQsSUFBSSxDQUFDLGlCQUFpQixDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztZQUVyQyxNQUFNLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsb0NBQW9DLEVBQUU7Z0JBQ3pELElBQUksRUFBRTtvQkFDSixFQUFFLEVBQUUsRUFBRTtvQkFDTixRQUFRLEVBQUUsR0FBRztvQkFDYixTQUFTLEVBQUUsSUFBSTtvQkFDZixRQUFRO29CQUNSLEdBQUc7aUJBQ0o7YUFDRixDQUFDLENBQUM7UUFDTCxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7Q0FDRiJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmZtcGVnLWNsaWVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvdXRpbHMvdmlkZW8vZmZtcGVnLWNsaWVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLE9BQU8sa0JBQWtCO0lBQzdCO1FBQ0UsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsR0FBRyxFQUFFLENBQUM7WUFDckIsTUFBTSxJQUFJLEtBQUssQ0FBQyw2Q0FBNkMsQ0FBQyxDQUFDO1FBQ2pFLENBQUM7SUFDSCxDQUFDO0lBRU0sS0FBSyxDQUFDLFFBQVEsQ0FDbkIsRUFBVSxFQUNWLEdBQVcsRUFDWCxJQUFZLEVBQ1osUUFBZ0IsRUFDaEIsR0FBVztRQUVYLE1BQU0sUUFBUSxHQUFHLE1BQU0sS0FBSyxDQUFDLHFDQUFxQyxFQUFFO1lBQ2xFLE1BQU0sRUFBRSxNQUFNO1lBQ2QsT0FBTyxFQUFFO2dCQUNQLDJCQUEyQjtnQkFDM0IsY0FBYyxFQUFFLGtCQUFrQjthQUNuQztZQUNELElBQUksRUFBRSxJQUFJLENBQUMsU0FBUyxDQUFDO2dCQUNuQixFQUFFO2dCQUNGLFFBQVEsRUFBRSxHQUFHO2dCQUNiLFNBQVMsRUFBRSxJQUFJO2dCQUNmLFFBQVE7Z0JBQ1IsR0FBRzthQUNKLENBQUM7U0FDSCxDQUFDLENBQUM7UUFFSCxJQUFJLENBQUMsUUFBUSxDQUFDLEVBQUUsRUFBRSxDQUFDO1lBQ2pCLE1BQU0sSUFBSSxLQUFLLENBQUMsdUJBQXVCLFFBQVEsQ0FBQyxNQUFNLEVBQUUsQ0FBQyxDQUFDO1FBQzVELENBQUM7UUFFRCxNQUFNLEtBQUssR0FBRyxRQUFRLENBQUMsUUFBUSxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsZUFBZSxDQUFDLElBQUksTUFBTSxFQUFFLEVBQUUsQ0FBQyxDQUFDO1FBQzVFLE1BQU0sTUFBTSxHQUFHLFFBQVEsQ0FDckIsUUFBUSxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxNQUFNLEVBQ2hELEVBQUUsQ0FDSCxDQUFDO1FBRUYsTUFBTSxXQUFXLEdBQUcsTUFBTSxRQUFRLENBQUMsV0FBVyxFQUFFLENBQUM7UUFFakQsTUFBTSxTQUFTLEdBQUcsSUFBSSxTQUFTLENBQzdCLElBQUksaUJBQWlCLENBQUMsV0FBVyxDQUFDLEVBQ2xDLEtBQUssRUFDTCxNQUFNLENBQ1AsQ0FBQztRQUVGLE9BQU8saUJBQWlCLENBQUMsU0FBUyxDQUFDLENBQUM7SUFDdEMsQ0FBQztDQUNGIn0=

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revideo/2d",
-  "version": "0.5.8-beta.1082+5514e32d",
+  "version": "0.5.9-alpha.1086+9e6dd0dd",
   "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-beta.1082+5514e32d",
+    "@revideo/ui": "^0.5.9-alpha.1086+9e6dd0dd",
     "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-beta.1082+5514e32d",
+    "@revideo/core": "^0.5.9-alpha.1086+9e6dd0dd",
     "@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": "5514e32d74656cbbc12f121b48d4d3078850d817"
+  "gitHead": "9e6dd0dd6df36e20bfa983eab0d9267e4f518fc1"
 }

package/src/lib/components/Media.ts

@@ -95,6 +95,10 @@ 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: HTMLImageElement | null = null;
+  protected lastFrame: ImageBitmap | 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<HTMLImageElement> {
+  protected async ffmpegSeekedVideo(): Promise<ImageBitmap> {
     const video = this.video();
     const time = this.clampTime(this.time());
     const duration = this.getDuration();

package/src/lib/scenes/Scene2D.ts

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

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

@@ -3,22 +3,6 @@ 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(
@@ -28,37 +12,39 @@ export class ImageCommunication {
     duration: number,
     fps: number,
   ) {
-    return new Promise<HTMLImageElement>((resolve, reject) => {
-      if (!import.meta.hot) {
-        reject('FfmpegVideoFrame can only be used with HMR.');
-        return;
-      }
-
-      function handler(event: MessageEvent) {
-        const image = new Image();
+    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,
+      }),
+    });
 
-        const uint8Array = new Uint8Array(event.data.frame.data);
-        const blob = new Blob([uint8Array], {type: 'image/png'});
-        const url = URL.createObjectURL(blob);
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
 
-        image.src = url;
+    const width = parseInt(response.headers.get('X-Frame-Width') || '1080', 10);
+    const height = parseInt(
+      response.headers.get('X-Frame-Height') || '1920',
+      10,
+    );
 
-        image.onload = () => {
-          resolve(image);
-        };
-      }
+    const arrayBuffer = await response.arrayBuffer();
 
-      this.nextFrameHandlers.push(handler);
+    const imageData = new ImageData(
+      new Uint8ClampedArray(arrayBuffer),
+      width,
+      height,
+    );
 
-      import.meta.hot.send('revideo:ffmpeg-decoder:video-frame', {
-        data: {
-          id: id,
-          filePath: src,
-          startTime: time,
-          duration,
-          fps,
-        },
-      });
-    });
+    return createImageBitmap(imageData);
   }
 }