@meframe/core 0.0.28 → 0.0.30-beta

package/dist/workers/stages/compose/{video-compose.worker.M5uomNVr.js → video-compose.worker.DHQ8B105.js}

@@ -1,17 +1,4 @@
 import { W as WorkerChannel, a as WorkerMessageType, b as WorkerState } from "../../WorkerChannel.CE5euh3R.js";
-const MICROSECONDS_PER_SECOND = 1e6;
-const DEFAULT_FPS = 30;
-function normalizeFps(value) {
-  if (!Number.isFinite(value) || value <= 0) {
-    return DEFAULT_FPS;
-  }
-  return value;
-}
-function frameDurationFromFps(fps) {
-  const normalized = normalizeFps(fps);
-  const duration = MICROSECONDS_PER_SECOND / normalized;
-  return Math.max(Math.round(duration), 1);
-}
 function measureTextWidth(ctx, text, fontSize, fontFamily, fontWeight = 400) {
   ctx.save();
   ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
@@ -1456,7 +1443,9 @@ class FilterProcessor {
 const closeLayerFrame = (layer) => {
   if (layer.type === "video") {
     const vf = layer.videoFrame;
-    vf?.close?.();
+    if (vf?.close) {
+      vf.close();
+    }
   }
 };
 class VideoComposer {
@@ -1466,32 +1455,42 @@ class VideoComposer {
   layerRenderer;
   transitionProcessor;
   filterProcessor;
-  timelineContext;
+  frameDurationUs;
+  // Cached frame duration
   constructor(config) {
     this.config = this.applyDefaults(config);
-    this.canvas = new OffscreenCanvas(this.config.width, this.config.height);
-    const ctx = this.canvas.getContext("2d", {
-      alpha: true,
-      desynchronized: true,
-      willReadFrequently: false,
-      colorSpace: "srgb"
-    });
-    if (!ctx) {
+    this.frameDurationUs = Math.round(1e6 / this.config.fps);
+    if (config.externalCanvas) {
+      this.canvas = config.externalCanvas;
+      this.ctx = this.canvas.getContext("2d", {
+        alpha: true,
+        desynchronized: true,
+        willReadFrequently: false,
+        colorSpace: "srgb"
+      });
+    } else {
+      this.canvas = new OffscreenCanvas(this.config.width, this.config.height);
+      this.ctx = this.canvas.getContext("2d", {
+        alpha: true,
+        desynchronized: true,
+        willReadFrequently: false,
+        colorSpace: "srgb"
+      });
+    }
+    if (!this.ctx) {
       throw new Error("Failed to create 2D rendering context");
     }
-    this.ctx = ctx;
     this.ctx.imageSmoothingEnabled = this.config.enableSmoothing;
     this.loadFonts();
     this.ctx.imageSmoothingQuality = "high";
     this.layerRenderer = new LayerRenderer(
-      ctx,
+      this.ctx,
       this.config.width,
       this.config.height,
       this.config.fps
     );
     this.transitionProcessor = new TransitionProcessor(this.config.width, this.config.height);
     this.filterProcessor = new FilterProcessor();
-    this.timelineContext = this.config.timeline;
   }
   applyDefaults(config) {
     return {
@@ -1513,21 +1512,18 @@ class VideoComposer {
         clipDurationUs: Infinity,
         compositionFps: 30
       },
-      fonts: config.fonts ?? []
+      fonts: config.fonts ?? [],
+      externalCanvas: config.externalCanvas
     };
   }
-  createStreams(instruction) {
-    if (instruction?.baseConfig.timeline) {
-      this.timelineContext = instruction.baseConfig.timeline;
-    }
+  createStreams(_instruction) {
     const stream = new TransformStream(
       {
         transform: async (request, controller) => {
           const result = await this.composeFrame(request);
-          controller.enqueue(result.frame);
-          setTimeout(() => {
-            result.frame.close();
-          }, 1e3);
+          if (result.frame) {
+            controller.enqueue(result.frame);
+          }
         },
         flush: async () => {
           this.filterProcessor.clearCache();
@@ -1560,13 +1556,27 @@ class VideoComposer {
         continue;
       }
       try {
-        if (layer.filters && layer.filters.length > 0) {
-          this.ctx.save();
-          this.filterProcessor.applyFilters(this.ctx, layer.filters);
-        }
-        await this.layerRenderer.renderLayer(layer);
-        if (layer.filters && layer.filters.length > 0) {
-          this.ctx.restore();
+        if (layer.rcFrame) {
+          await layer.rcFrame.use(async (frame2) => {
+            layer.videoFrame = frame2;
+            if (layer.filters && layer.filters.length > 0) {
+              this.ctx.save();
+              this.filterProcessor.applyFilters(this.ctx, layer.filters);
+            }
+            await this.layerRenderer.renderLayer(layer);
+            if (layer.filters && layer.filters.length > 0) {
+              this.ctx.restore();
+            }
+          });
+        } else {
+          if (layer.filters && layer.filters.length > 0) {
+            this.ctx.save();
+            this.filterProcessor.applyFilters(this.ctx, layer.filters);
+          }
+          await this.layerRenderer.renderLayer(layer);
+          if (layer.filters && layer.filters.length > 0) {
+            this.ctx.restore();
+          }
         }
       } catch (error) {
         console.error("[VideoComposer] composeFrame error: ", error);
@@ -1576,7 +1586,10 @@ class VideoComposer {
     if (request.transition) {
       this.ctx.restore();
     }
-    const frame = await this.createOutputFrame(request.timeUs);
+    let frame = null;
+    if (!this.config.externalCanvas) {
+      frame = await this.createOutputFrame(request.timeUs);
+    }
     return {
       frame,
       timeUs: request.timeUs
@@ -1602,10 +1615,10 @@ class VideoComposer {
   //   return [...layers].sort((a, b) => a.zIndex - b.zIndex);
   // }
   async createOutputFrame(timeUs) {
-    const duration = frameDurationFromFps(this.timelineContext.compositionFps);
     const frame = new VideoFrame(this.canvas, {
       timestamp: timeUs,
-      duration,
+      duration: this.frameDurationUs,
+      // Use cached duration
       alpha: "discard",
       visibleRect: { x: 0, y: 0, width: this.canvas.width, height: this.canvas.height }
     });
@@ -1629,6 +1642,9 @@ class VideoComposer {
   }
   updateConfig(config) {
     Object.assign(this.config, this.applyDefaults({ ...this.config, ...config }));
+    if (config.fps !== void 0) {
+      this.frameDurationUs = Math.round(1e6 / this.config.fps);
+    }
     if (config.width || config.height) {
       this.canvas.width = this.config.width;
       this.canvas.height = this.config.height;
@@ -1638,9 +1654,6 @@ class VideoComposer {
     if (config.enableSmoothing !== void 0) {
       this.ctx.imageSmoothingEnabled = this.config.enableSmoothing;
     }
-    if (config.timeline) {
-      this.timelineContext = config.timeline;
-    }
     if (config.fonts) {
       this.loadFonts();
     }
@@ -1649,6 +1662,19 @@ class VideoComposer {
     this.filterProcessor.clearCache();
   }
 }
+const MICROSECONDS_PER_SECOND = 1e6;
+const DEFAULT_FPS = 30;
+function normalizeFps(value) {
+  if (!Number.isFinite(value) || value <= 0) {
+    return DEFAULT_FPS;
+  }
+  return value;
+}
+function frameDurationFromFps(fps) {
+  const normalized = normalizeFps(fps);
+  const duration = MICROSECONDS_PER_SECOND / normalized;
+  return Math.max(Math.round(duration), 1);
+}
 function interpolateKeyframes(keyframes, timeUs) {
   const defaultTransform = {
     x: 0,
@@ -1727,6 +1753,183 @@ function applyEasing(t, easing) {
       return t;
   }
 }
+class FrameRateConverter {
+  clipDurationUs;
+  frameDurationUs;
+  // State for frame processing
+  targetFrameIndex = 0;
+  targetFrameTimeUs = 0;
+  sourceFrameBuffer = [];
+  constructor(targetFps, clipDurationUs) {
+    if (targetFps <= 0) {
+      throw new Error(`Invalid target fps: ${targetFps}`);
+    }
+    if (clipDurationUs <= 0) {
+      throw new Error(`Invalid clip duration: ${clipDurationUs}`);
+    }
+    this.clipDurationUs = clipDurationUs;
+    this.frameDurationUs = Math.round(1e6 / targetFps);
+  }
+  /**
+   * Create a TransformStream that converts VFR frames to CFR frames
+   */
+  createStream() {
+    return new TransformStream({
+      start: () => {
+        this.targetFrameIndex = 0;
+        this.targetFrameTimeUs = 0;
+        this.sourceFrameBuffer = [];
+        this.sourceFrameCount = 0;
+        this.outputFrameCount = 0;
+      },
+      transform: (sourceFrame, controller) => {
+        this.processSourceFrame(sourceFrame, controller);
+      },
+      flush: (controller) => {
+        this.flushRemainingFrames(controller);
+      }
+    });
+  }
+  sourceFrameCount = 0;
+  outputFrameCount = 0;
+  /**
+   * Process incoming source frame and output target frames
+   */
+  processSourceFrame(sourceFrame, controller) {
+    this.sourceFrameBuffer.push(sourceFrame);
+    this.sourceFrameCount++;
+    while (this.targetFrameTimeUs < this.clipDurationUs) {
+      const closestFrame = this.findClosestFrame(this.targetFrameTimeUs);
+      if (!closestFrame) {
+        break;
+      }
+      if (this.shouldWaitForNextFrame(closestFrame)) {
+        break;
+      }
+      try {
+        const targetFrame = new VideoFrame(closestFrame, {
+          timestamp: this.targetFrameTimeUs,
+          duration: this.frameDurationUs
+        });
+        controller.enqueue(targetFrame);
+        this.outputFrameCount++;
+        this.cleanupOldFrames(this.targetFrameTimeUs);
+        this.targetFrameIndex++;
+        this.targetFrameTimeUs = this.targetFrameIndex * this.frameDurationUs;
+      } catch (_error) {
+        console.error("[FrameRateConverter] Failed to create target frame:", _error);
+        this.targetFrameIndex++;
+        this.targetFrameTimeUs = this.targetFrameIndex * this.frameDurationUs;
+      }
+    }
+  }
+  /**
+   * Flush remaining target frames at end of stream
+   */
+  flushRemainingFrames(controller) {
+    while (this.sourceFrameBuffer.length > 0) {
+      const closestFrame = this.findClosestFrame(this.targetFrameTimeUs);
+      if (!closestFrame) {
+        break;
+      }
+      if (this.targetFrameTimeUs >= this.clipDurationUs) {
+        break;
+      }
+      try {
+        const targetFrame = new VideoFrame(closestFrame, {
+          timestamp: this.targetFrameTimeUs,
+          duration: this.frameDurationUs
+        });
+        controller.enqueue(targetFrame);
+        this.cleanupOldFrames(this.targetFrameTimeUs);
+        this.targetFrameIndex++;
+        this.targetFrameTimeUs = this.targetFrameIndex * this.frameDurationUs;
+      } catch (_error) {
+        console.error("[FrameRateConverter] Failed to create target frame in flush:", _error);
+        break;
+      }
+    }
+    for (const frame of this.sourceFrameBuffer) {
+      try {
+        frame.close();
+      } catch {
+      }
+    }
+    this.sourceFrameBuffer = [];
+  }
+  /**
+   * Find the source frame closest to target time
+   */
+  findClosestFrame(targetTimeUs) {
+    if (this.sourceFrameBuffer.length === 0) {
+      return null;
+    }
+    let closestFrame = this.sourceFrameBuffer[0];
+    let minError = Math.abs((closestFrame?.timestamp ?? 0) - targetTimeUs);
+    for (const frame of this.sourceFrameBuffer) {
+      const error = Math.abs((frame.timestamp ?? 0) - targetTimeUs);
+      if (error < minError) {
+        minError = error;
+        closestFrame = frame;
+      }
+    }
+    return closestFrame ?? null;
+  }
+  /**
+   * Check if we should wait for next source frame before outputting
+   * Returns true if:
+   * - We only have 1 frame in buffer
+   * - The closest frame is before target time
+   * - We might get a better match from next frame
+   */
+  shouldWaitForNextFrame(closestFrame) {
+    if (this.sourceFrameBuffer.length <= 1) {
+      const frameTimestamp = closestFrame.timestamp ?? 0;
+      if (frameTimestamp < this.targetFrameTimeUs) {
+        return true;
+      }
+    }
+    return false;
+  }
+  /**
+   * Clean up source frames that are no longer needed
+   * Keep frames that might be needed for future target frames
+   */
+  cleanupOldFrames(currentTargetTimeUs) {
+    const nextTargetTimeUs = currentTargetTimeUs + this.frameDurationUs;
+    const previousTargetTimeUs = currentTargetTimeUs - this.frameDurationUs;
+    let removeCount = 0;
+    for (let i = 0; i < this.sourceFrameBuffer.length; i++) {
+      const frame = this.sourceFrameBuffer[i];
+      if (!frame) continue;
+      const frameTimestamp = frame.timestamp ?? 0;
+      const isNeededForNext = Math.abs(frameTimestamp - nextTargetTimeUs) < Math.abs(frameTimestamp - previousTargetTimeUs);
+      if (frameTimestamp < previousTargetTimeUs && !isNeededForNext) {
+        try {
+          frame.close();
+        } catch {
+        }
+        removeCount++;
+      } else {
+        break;
+      }
+    }
+    if (removeCount > 0) {
+      this.sourceFrameBuffer.splice(0, removeCount);
+    }
+  }
+  /**
+   * Get current conversion state (for debugging)
+   */
+  getState() {
+    return {
+      targetFrameIndex: this.targetFrameIndex,
+      targetFrameTimeUs: this.targetFrameTimeUs,
+      bufferSize: this.sourceFrameBuffer.length,
+      frameDurationUs: this.frameDurationUs
+    };
+  }
+}
 function resolveActiveLayers(layers, timestamp) {
   return layers.filter((layer) => {
     if (!layer.payload.attachmentId) {
@@ -1842,7 +2045,6 @@ class VideoComposeWorker {
   downstreamPort = null;
   upstreamPort = null;
   instructions = null;
-  streamState = null;
   imageMap = /* @__PURE__ */ new Map();
   constructor() {
     this.channel = new WorkerChannel(self, {
@@ -1925,7 +2127,13 @@ class VideoComposeWorker {
       console.warn("[VideoComposeWorker] No instructions installed");
       return;
     }
-    const filteredStream = stream.pipeThrough(
+    const timeline = this.instructions.baseConfig.timeline;
+    const fpsConverter = new FrameRateConverter(
+      timeline?.compositionFps ?? 30,
+      timeline?.clipDurationUs ?? Infinity
+    );
+    const cfrStream = stream.pipeThrough(fpsConverter.createStream());
+    const filteredStream = cfrStream.pipeThrough(
       new TransformStream({
         transform: (frame, controller) => {
           try {
@@ -2004,7 +2212,6 @@ class VideoComposeWorker {
     this.imageMap.forEach((bitmap) => bitmap.close());
     this.imageMap.clear();
     this.instructions = null;
-    this.streamState = null;
     this.channel.state = WorkerState.Disposed;
     return { success: true };
   }
@@ -2045,7 +2252,6 @@ class VideoComposeWorker {
   }
   async handleDisposeClip() {
     this.instructions = null;
-    this.streamState = null;
     this.downstreamPort?.close();
     this.upstreamPort?.close();
     this.downstreamPort = null;
@@ -2115,7 +2321,7 @@ class VideoComposeWorker {
     }
   }
   buildComposeRequest(instruction, frame) {
-    const clipRelativeTime = this.computeTimelineTimestamp(frame, instruction.baseConfig);
+    const clipRelativeTime = frame.timestamp ?? 0;
     const clipDurationUs = instruction.baseConfig.timeline?.clipDurationUs ?? Infinity;
     if (clipRelativeTime < 0 || clipRelativeTime >= clipDurationUs) {
       return null;
@@ -2159,35 +2365,6 @@ class VideoComposeWorker {
       direction: entry.params.payload?.direction
     };
   }
-  computeTimelineTimestamp(frame, config) {
-    if (!this.streamState) {
-      this.streamState = {
-        lastSourceTimestamp: null,
-        nextFrameIndex: 0
-      };
-    }
-    const timeline = config.timeline;
-    if (!timeline) {
-      const ts = frame.timestamp ?? 0;
-      this.streamState.lastSourceTimestamp = frame.timestamp ?? null;
-      return ts;
-    }
-    const { compositionFps } = timeline;
-    const sourceTimestamp = frame.timestamp ?? null;
-    if (sourceTimestamp !== null && this.streamState.lastSourceTimestamp !== null && sourceTimestamp < this.streamState.lastSourceTimestamp) {
-      this.streamState.nextFrameIndex = 0;
-    }
-    const frameDuration = frameDurationFromFps(compositionFps);
-    let frameIndex = this.streamState.nextFrameIndex;
-    if (sourceTimestamp !== null) {
-      const approxIndex = Math.round(sourceTimestamp / frameDuration);
-      frameIndex = Math.max(frameIndex, approxIndex);
-    }
-    const relativeTimeUs = frameIndex * frameDuration;
-    this.streamState.nextFrameIndex = frameIndex + 1;
-    this.streamState.lastSourceTimestamp = sourceTimestamp;
-    return relativeTimeUs;
-  }
 }
 const worker = new VideoComposeWorker();
 self.addEventListener("beforeunload", () => {
@@ -2198,4 +2375,4 @@ export {
   VideoComposeWorker,
   videoCompose_worker as default
 };
-//# sourceMappingURL=video-compose.worker.M5uomNVr.js.map
+//# sourceMappingURL=video-compose.worker.DHQ8B105.js.map