@codingfactory/mediables-vue 2.8.0 → 2.9.0

package/dist/render-page/assets/{index-y90zwXpc.js → index-jZGmiMRr.js}

@@ -70936,6 +70936,10 @@ const MAX_SEEK_RETRY_ATTEMPTS = 6;
 const MIN_SEEK_TIMEOUT_MS = 250;
 const MAX_SEEK_NUDGE_SECONDS = 0.25;
 const MIN_SEEK_EPSILON_SECONDS = 1e-3;
+const HAVE_CURRENT_DATA = 2;
+function shouldSkipRedundantSeek(video, targetTime) {
+  return video.readyState >= HAVE_CURRENT_DATA && !video.seeking && Math.abs(video.currentTime - targetTime) < MIN_SEEK_EPSILON_SECONDS;
+}
 function normalizeSeekTimeoutMs(value) {
   if (!Number.isFinite(value) || value === void 0 || value < MIN_SEEK_TIMEOUT_MS) {
     return DEFAULT_SEEK_TIMEOUT_MS;
@@ -71046,7 +71050,548 @@ function resetTime(video) {
   } catch {
   }
 }
-const HAVE_CURRENT_DATA = 2;
+const MIN_PLAYBACK_RATE = 0.1;
+const MAX_PLAYBACK_RATE = 16;
+const DEFAULT_PLAYBACK_RATE = 1;
+const DEFAULT_FRAME_TIMEOUT_MS = 4e3;
+class PlaybackCaptureFallbackError extends Error {
+  constructor(startFrame, reason) {
+    super(reason);
+    this.name = "PlaybackCaptureFallbackError";
+    this.startFrame = startFrame;
+  }
+}
+function hasRequestVideoFrameCallback(video) {
+  return typeof video.requestVideoFrameCallback === "function";
+}
+function normalizeRenderCaptureMode(value) {
+  const normalized = typeof value === "string" ? value.trim().toLowerCase() : "";
+  if (normalized === "seek" || normalized === "rvfc" || normalized === "auto") {
+    return normalized;
+  }
+  return "auto";
+}
+function normalizeCapturePlaybackRate(value) {
+  if (!Number.isFinite(value) || value === void 0 || value <= 0) {
+    return DEFAULT_PLAYBACK_RATE;
+  }
+  return Math.min(MAX_PLAYBACK_RATE, Math.max(MIN_PLAYBACK_RATE, value));
+}
+function normalizeMaxFrameGap(value) {
+  if (!Number.isFinite(value) || value === void 0 || value < 0) {
+    return 0;
+  }
+  return Math.floor(value);
+}
+function normalizeFrameTimeoutMs(value) {
+  if (!Number.isFinite(value) || value === void 0 || value < 250) {
+    return DEFAULT_FRAME_TIMEOUT_MS;
+  }
+  return Math.floor(value);
+}
+function hasUnsupportedTimeline(recipe) {
+  const clips = Array.isArray(recipe.timeline) ? recipe.timeline : [];
+  if (clips.length > 1) {
+    return true;
+  }
+  const firstClip = clips[0];
+  if (firstClip === void 0) {
+    return false;
+  }
+  return typeof firstClip.speed === "number" && Number.isFinite(firstClip.speed) && Math.abs(firstClip.speed - 1) > 1e-4;
+}
+function resolveRenderCaptureMode(options) {
+  const requestedMode = normalizeRenderCaptureMode(options.requestedMode);
+  if (requestedMode === "seek") {
+    return {
+      requestedMode,
+      effectiveMode: "seek",
+      fallbackReason: null
+    };
+  }
+  if (!options.supportsRequestVideoFrameCallback) {
+    if (requestedMode === "rvfc") {
+      return {
+        requestedMode,
+        effectiveMode: "seek",
+        fallbackReason: "requestVideoFrameCallback unavailable"
+      };
+    }
+    return {
+      requestedMode,
+      effectiveMode: "seek",
+      fallbackReason: "auto selected seek because requestVideoFrameCallback is unavailable"
+    };
+  }
+  if (!Number.isFinite(options.fps) || options.fps <= 0) {
+    return {
+      requestedMode,
+      effectiveMode: "seek",
+      fallbackReason: "auto selected seek because fps is invalid"
+    };
+  }
+  if (!Number.isFinite(options.trimStart) || !Number.isFinite(options.trimEnd) || options.trimEnd <= options.trimStart) {
+    return {
+      requestedMode,
+      effectiveMode: "seek",
+      fallbackReason: "auto selected seek because trim bounds are invalid"
+    };
+  }
+  if (hasUnsupportedTimeline(options.recipe)) {
+    return {
+      requestedMode,
+      effectiveMode: "seek",
+      fallbackReason: "auto selected seek because the recipe is not a single forward clip"
+    };
+  }
+  return {
+    requestedMode,
+    effectiveMode: "rvfc",
+    fallbackReason: null
+  };
+}
+function mapMediaTimeToOutputFrame(mediaTime, trimStart, fps) {
+  if (!Number.isFinite(mediaTime) || !Number.isFinite(trimStart) || !Number.isFinite(fps) || fps <= 0) {
+    return 0;
+  }
+  return Math.max(0, Math.round((mediaTime - trimStart) * fps));
+}
+function outputTimeForFrame(frame, trimStart, fps) {
+  return trimStart + frame / fps;
+}
+async function waitForNextVideoFrame(video, timeoutMs) {
+  return new Promise((resolve, reject) => {
+    let settled = false;
+    let callbackHandle = null;
+    const finish = (metadata, error) => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      window.clearTimeout(timeoutHandle);
+      if (callbackHandle !== null && typeof video.cancelVideoFrameCallback === "function") {
+        video.cancelVideoFrameCallback(callbackHandle);
+      }
+      if (error !== void 0) {
+        reject(error);
+        return;
+      }
+      if (metadata === null) {
+        reject(new Error("Video frame callback completed without metadata"));
+        return;
+      }
+      resolve(metadata);
+    };
+    const timeoutHandle = window.setTimeout(() => {
+      finish(null, new Error(`Timed out waiting for playback frame after ${timeoutMs}ms`));
+    }, timeoutMs);
+    callbackHandle = video.requestVideoFrameCallback((_now, metadata) => {
+      finish(metadata);
+    });
+  });
+}
+async function runSeekCaptureLoop(options) {
+  const startFrame = Math.max(0, Math.floor(options.startFrame ?? 0));
+  for (let frame = startFrame; frame < options.totalFrames; frame++) {
+    const timeSec = outputTimeForFrame(frame, options.trimStart, options.fps);
+    options.touchHeartbeat("capturing-seek");
+    await options.seekToFrame(frame, timeSec);
+    await options.captureFrame({
+      frame,
+      timeSec,
+      duplicatePreviousFrame: false
+    });
+    options.updateProgress(frame);
+    options.touchHeartbeat("encoding-video");
+  }
+  return options.totalFrames;
+}
+async function runPlaybackCaptureLoop(options) {
+  var _a;
+  if (!hasRequestVideoFrameCallback(options.video)) {
+    throw new PlaybackCaptureFallbackError(
+      Math.max(0, Math.floor(options.startFrame ?? 0)),
+      "requestVideoFrameCallback unavailable"
+    );
+  }
+  const video = options.video;
+  let nextFrame = Math.max(0, Math.floor(options.startFrame ?? 0));
+  const previousPlaybackRate = video.playbackRate;
+  const previousMuted = video.muted;
+  const timeoutMs = normalizeFrameTimeoutMs(options.frameTimeoutMs);
+  try {
+    video.muted = true;
+    video.playbackRate = normalizeCapturePlaybackRate(options.playbackRate);
+    if (nextFrame < options.totalFrames) {
+      const firstTimeSec = outputTimeForFrame(nextFrame, options.trimStart, options.fps);
+      options.touchHeartbeat("capturing-playback");
+      await options.seekToFrame(nextFrame, firstTimeSec);
+      await options.captureFrame({
+        frame: nextFrame,
+        timeSec: firstTimeSec,
+        duplicatePreviousFrame: false
+      });
+      options.updateProgress(nextFrame);
+      nextFrame += 1;
+    }
+    while (nextFrame < options.totalFrames) {
+      options.touchHeartbeat("capturing-playback");
+      try {
+        await video.play();
+      } catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        throw new PlaybackCaptureFallbackError(nextFrame, `playback start failed: ${message}`);
+      }
+      const waitStartedAt = performance.now();
+      const metadata = await waitForNextVideoFrame(video, timeoutMs);
+      (_a = options.markPlaybackWait) == null ? void 0 : _a.call(options, performance.now() - waitStartedAt);
+      video.pause();
+      if (metadata.mediaTime < options.trimStart) {
+        continue;
+      }
+      if (metadata.mediaTime > options.trimEnd + 1 / options.fps) {
+        throw new PlaybackCaptureFallbackError(nextFrame, "playback moved beyond trim end");
+      }
+      const frameIndex = mapMediaTimeToOutputFrame(metadata.mediaTime, options.trimStart, options.fps);
+      if (frameIndex < nextFrame) {
+        continue;
+      }
+      const gap = frameIndex - nextFrame;
+      if (gap > options.maxFrameGap) {
+        throw new PlaybackCaptureFallbackError(
+          nextFrame,
+          `playback skipped ${gap} output frame${gap === 1 ? "" : "s"}`
+        );
+      }
+      while (nextFrame < frameIndex) {
+        const duplicateTimeSec = outputTimeForFrame(nextFrame, options.trimStart, options.fps);
+        await options.captureFrame({
+          frame: nextFrame,
+          timeSec: duplicateTimeSec,
+          duplicatePreviousFrame: true
+        });
+        options.updateProgress(nextFrame);
+        nextFrame += 1;
+      }
+      const timeSec = outputTimeForFrame(frameIndex, options.trimStart, options.fps);
+      await options.captureFrame({
+        frame: frameIndex,
+        timeSec,
+        duplicatePreviousFrame: false
+      });
+      options.updateProgress(frameIndex);
+      nextFrame = frameIndex + 1;
+    }
+    return nextFrame;
+  } finally {
+    video.pause();
+    video.playbackRate = previousPlaybackRate;
+    video.muted = previousMuted;
+  }
+}
+function nowMs() {
+  return performance.now();
+}
+function roundMs(value) {
+  return Math.round(value * 100) / 100;
+}
+function createRenderMetrics(options) {
+  const startedAt = nowMs();
+  let captureMode = options.captureMode;
+  let fallbackReason = options.fallbackReason ?? null;
+  let framesRendered = 0;
+  let duplicateFrames = 0;
+  let playbackFallbacks = 0;
+  let seekMs = 0;
+  let sourceSnapshotMs = 0;
+  let textureUploadMs = 0;
+  let pixiRenderMs = 0;
+  let encodeMs = 0;
+  let encodeBackpressureMs = 0;
+  let frameReadbackMs = 0;
+  let framePipeMs = 0;
+  let framePipeBackpressureMs = 0;
+  let videoFlushMs = 0;
+  let ffmpegEncodeElapsedMs = 0;
+  let audioEncodeMs = 0;
+  let audioFlushMs = 0;
+  let muxFinalizeMs = 0;
+  let playbackWaitMs = 0;
+  const markDuration = (metric, durationMs) => {
+    if (!Number.isFinite(durationMs) || durationMs <= 0) {
+      return;
+    }
+    switch (metric) {
+      case "seek":
+        seekMs += durationMs;
+        return;
+      case "sourceSnapshot":
+        sourceSnapshotMs += durationMs;
+        return;
+      case "textureUpload":
+        textureUploadMs += durationMs;
+        return;
+      case "pixiRender":
+        pixiRenderMs += durationMs;
+        return;
+      case "encode":
+        encodeMs += durationMs;
+        return;
+      case "encodeBackpressure":
+        encodeBackpressureMs += durationMs;
+        return;
+      case "frameReadback":
+        frameReadbackMs += durationMs;
+        return;
+      case "framePipe":
+        framePipeMs += durationMs;
+        return;
+      case "framePipeBackpressure":
+        framePipeBackpressureMs += durationMs;
+        return;
+      case "videoFlush":
+        videoFlushMs += durationMs;
+        return;
+      case "ffmpegEncode":
+        ffmpegEncodeElapsedMs += durationMs;
+        return;
+      case "audioEncode":
+        audioEncodeMs += durationMs;
+        return;
+      case "audioFlush":
+        audioFlushMs += durationMs;
+        return;
+      case "muxFinalize":
+        muxFinalizeMs += durationMs;
+        return;
+      case "playbackWait":
+        playbackWaitMs += durationMs;
+        return;
+    }
+  };
+  return {
+    markDuration,
+    markFrameRendered: () => {
+      framesRendered += 1;
+    },
+    markDuplicateFrame: () => {
+      duplicateFrames += 1;
+    },
+    markPlaybackFallback: (reason) => {
+      playbackFallbacks += 1;
+      fallbackReason = reason;
+    },
+    setCaptureMode: (nextCaptureMode, reason = null) => {
+      captureMode = nextCaptureMode;
+      fallbackReason = reason;
+    },
+    setFfmpegEncodeElapsed: (durationMs) => {
+      if (Number.isFinite(durationMs) && durationMs >= 0) {
+        ffmpegEncodeElapsedMs = durationMs;
+      }
+    },
+    snapshot: () => ({
+      encoderMode: options.encoderMode ?? "webcodecs",
+      captureMode,
+      requestedCaptureMode: options.requestedCaptureMode,
+      fallbackReason,
+      fps: options.fps,
+      framesRendered,
+      totalFrames: options.totalFrames,
+      duplicateFrames,
+      playbackFallbacks,
+      seekMs: roundMs(seekMs),
+      sourceSnapshotMs: roundMs(sourceSnapshotMs),
+      textureUploadMs: roundMs(textureUploadMs),
+      pixiRenderMs: roundMs(pixiRenderMs),
+      encodeMs: roundMs(encodeMs),
+      encodeBackpressureMs: roundMs(encodeBackpressureMs),
+      frameReadbackMs: roundMs(frameReadbackMs),
+      framePipeMs: roundMs(framePipeMs),
+      framePipeBackpressureMs: roundMs(framePipeBackpressureMs),
+      videoFlushMs: roundMs(videoFlushMs),
+      ffmpegEncodeElapsedMs: roundMs(ffmpegEncodeElapsedMs),
+      audioEncodeMs: roundMs(audioEncodeMs),
+      audioFlushMs: roundMs(audioFlushMs),
+      muxFinalizeMs: roundMs(muxFinalizeMs),
+      playbackWaitMs: roundMs(playbackWaitMs),
+      elapsedMs: roundMs(nowMs() - startedAt)
+    })
+  };
+}
+async function measureAsyncMetric(metrics, metric, callback) {
+  const startedAt = nowMs();
+  try {
+    return await callback();
+  } finally {
+    metrics.markDuration(metric, nowMs() - startedAt);
+  }
+}
+function measureSyncMetric(metrics, metric, callback) {
+  const startedAt = nowMs();
+  try {
+    return callback();
+  } finally {
+    metrics.markDuration(metric, nowMs() - startedAt);
+  }
+}
+const MAX_BUFFERED_BYTES = 64 * 1024 * 1024;
+const MAX_IN_FLIGHT_FRAMES = 4;
+const MAX_IN_FLIGHT_BYTES = 64 * 1024 * 1024;
+function waitForMilliseconds$1(milliseconds) {
+  return new Promise((resolve) => {
+    window.setTimeout(resolve, milliseconds);
+  });
+}
+function decodeFrameSocketMessage(rawData) {
+  if (typeof rawData !== "string") {
+    return null;
+  }
+  try {
+    const decoded = JSON.parse(rawData);
+    if (typeof decoded !== "object" || decoded === null) {
+      return null;
+    }
+    const message = decoded;
+    if (message["type"] === "ack" && typeof message["frame"] === "number") {
+      return { type: "ack", frame: message["frame"] };
+    }
+    if (message["type"] === "error" && typeof message["message"] === "string") {
+      return { type: "error", message: message["message"] };
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+async function waitForSocketOpen(socket) {
+  if (socket.readyState === WebSocket.OPEN) {
+    return;
+  }
+  if (socket.readyState === WebSocket.CLOSING || socket.readyState === WebSocket.CLOSED) {
+    throw new Error("ffmpeg frame WebSocket closed before opening");
+  }
+  await new Promise((resolve, reject) => {
+    const onOpen = () => {
+      cleanup();
+      resolve();
+    };
+    const onError = () => {
+      cleanup();
+      reject(new Error("ffmpeg frame WebSocket failed to open"));
+    };
+    const cleanup = () => {
+      socket.removeEventListener("open", onOpen);
+      socket.removeEventListener("error", onError);
+    };
+    socket.addEventListener("open", onOpen);
+    socket.addEventListener("error", onError);
+  });
+}
+async function waitForSendWindow(socket, pendingAcks, inFlightBytes, nextFrameBytes) {
+  while (socket.bufferedAmount > MAX_BUFFERED_BYTES || pendingAcks.size >= MAX_IN_FLIGHT_FRAMES || pendingAcks.size > 0 && inFlightBytes() + nextFrameBytes > MAX_IN_FLIGHT_BYTES) {
+    if (socket.readyState === WebSocket.CLOSING || socket.readyState === WebSocket.CLOSED) {
+      throw new Error("ffmpeg frame WebSocket closed while waiting for send window");
+    }
+    await waitForMilliseconds$1(10);
+  }
+}
+function createFfmpegFrameSocket(url2) {
+  const socket = new WebSocket(url2);
+  socket.binaryType = "arraybuffer";
+  const pendingAcks = /* @__PURE__ */ new Map();
+  let pendingBytes = 0;
+  const rejectPending = (error) => {
+    for (const pendingAck of pendingAcks.values()) {
+      pendingAck.reject(error);
+    }
+    pendingAcks.clear();
+    pendingBytes = 0;
+  };
+  socket.addEventListener("message", (event) => {
+    const message = decodeFrameSocketMessage(event.data);
+    if (message === null) {
+      return;
+    }
+    if (message.type === "error") {
+      rejectPending(new Error(message.message));
+      return;
+    }
+    const pendingAck = pendingAcks.get(message.frame);
+    if (pendingAck === void 0) {
+      rejectPending(new Error(`Unexpected ffmpeg frame ack ${message.frame}; no matching frame is pending`));
+      return;
+    }
+    pendingAcks.delete(message.frame);
+    pendingBytes = Math.max(0, pendingBytes - pendingAck.bytes);
+    pendingAck.resolve();
+  });
+  socket.addEventListener("error", () => {
+    rejectPending(new Error("ffmpeg frame WebSocket error"));
+  });
+  socket.addEventListener("close", () => {
+    rejectPending(new Error("ffmpeg frame WebSocket closed"));
+  });
+  return {
+    sendFrame: async (frameBytes, frame, onSent) => {
+      if (pendingAcks.has(frame)) {
+        throw new Error(`Cannot send duplicate ffmpeg frame ${frame}; it is still awaiting ack`);
+      }
+      await waitForSocketOpen(socket);
+      await waitForSendWindow(socket, pendingAcks, () => pendingBytes, frameBytes.byteLength);
+      let resolveAck = null;
+      let rejectAck = null;
+      const ackPromise = new Promise((resolve, reject) => {
+        resolveAck = resolve;
+        rejectAck = reject;
+      });
+      if (resolveAck === null || rejectAck === null) {
+        throw new Error("Failed to initialize ffmpeg frame ack handlers");
+      }
+      pendingAcks.set(frame, {
+        bytes: frameBytes.byteLength,
+        promise: ackPromise,
+        resolve: resolveAck,
+        reject: rejectAck
+      });
+      pendingBytes += frameBytes.byteLength;
+      socket.send(frameBytes);
+      onSent == null ? void 0 : onSent();
+      await ackPromise;
+    },
+    flush: async () => {
+      while (pendingAcks.size > 0) {
+        await Promise.race(Array.from(pendingAcks.values(), (pendingAck) => pendingAck.promise));
+      }
+    },
+    close: () => {
+      if (socket.readyState === WebSocket.OPEN || socket.readyState === WebSocket.CONNECTING) {
+        socket.close();
+      }
+    }
+  };
+}
+async function copyCanvasToRgba(canvas, width, height, fallbackCanvas, fallbackCtx) {
+  const expectedBytes = width * height * 4;
+  const videoFrame = new VideoFrame(canvas, { timestamp: 0 });
+  try {
+    const bytes2 = new Uint8Array(expectedBytes);
+    await videoFrame.copyTo(bytes2, { format: "RGBA" });
+    return bytes2;
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    console.warn("[RenderVideo] VideoFrame.copyTo(RGBA) failed; falling back to getImageData()", message);
+  } finally {
+    videoFrame.close();
+  }
+  fallbackCtx.clearRect(0, 0, width, height);
+  fallbackCtx.drawImage(canvas, 0, 0, width, height);
+  const imageData = fallbackCtx.getImageData(0, 0, width, height);
+  if (fallbackCanvas.width !== width || fallbackCanvas.height !== height) {
+    throw new Error("RGBA fallback canvas dimensions changed during readback");
+  }
+  return new Uint8Array(imageData.data);
+}
 const PENDING_SEEK_DRAIN_TIMEOUT_MS = 1e3;
 function resolveFitMode(recipe) {
   var _a;
@@ -71107,6 +71652,31 @@ function waitForMilliseconds(milliseconds) {
     window.setTimeout(resolve, milliseconds);
   });
 }
+function resolveEncoderMode(config) {
+  return config.encoder === "ffmpeg" ? "ffmpeg" : "webcodecs";
+}
+function collectRenderRuntimeInfo() {
+  const canvas = document.createElement("canvas");
+  const gl = canvas.getContext("webgl2") ?? canvas.getContext("webgl");
+  const runtimeInfo = {
+    userAgent: navigator.userAgent,
+    webglVendor: null,
+    webglRenderer: null,
+    webglUnmaskedVendor: null,
+    webglUnmaskedRenderer: null
+  };
+  if (gl === null) {
+    return runtimeInfo;
+  }
+  runtimeInfo.webglVendor = String(gl.getParameter(gl.VENDOR));
+  runtimeInfo.webglRenderer = String(gl.getParameter(gl.RENDERER));
+  const debugInfo = gl.getExtension("WEBGL_debug_renderer_info");
+  if (debugInfo !== null) {
+    runtimeInfo.webglUnmaskedVendor = String(gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL));
+    runtimeInfo.webglUnmaskedRenderer = String(gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL));
+  }
+  return runtimeInfo;
+}
 function touchRenderHeartbeat(stage) {
   window.__RENDER_HEARTBEAT__ = Date.now();
   if (stage !== void 0) {
@@ -71220,7 +71790,7 @@ function seekVideoOnce(video, timeSec, timeoutMs) {
         `Video seek timed out at ${timeSec}s after ${timeoutMs}ms (readyState=${video.readyState}, seeking=${video.seeking}, currentTime=${video.currentTime.toFixed(4)}, duration=${video.duration}, networkState=${video.networkState}, paused=${video.paused}, ended=${video.ended})`
       ));
     }, timeoutMs);
-    if (!video.seeking && Math.abs(video.currentTime - timeSec) < 1e-3) {
+    if (shouldSkipRedundantSeek(video, timeSec)) {
       ensureFrameDecoded(video, timeoutMs).then(() => finish()).catch((error) => {
         const message = error instanceof Error ? error.message : String(error);
         finish(new Error(`Frame decode failed at ${timeSec}s: ${message}`));
@@ -71354,6 +71924,8 @@ async function main() {
   window.__RENDER_AUDIO_STATUS__ = null;
   window.__RENDER_HEARTBEAT__ = Date.now();
   window.__RENDER_STAGE__ = "initializing";
+  window.__RENDER_METRICS__ = null;
+  window.__RENDER_RUNTIME__ = collectRenderRuntimeInfo();
   try {
     const config = window.__RENDER_CONFIG__;
     if (!config) throw new Error("No __RENDER_CONFIG__ found on window");
@@ -71363,9 +71935,17 @@ async function main() {
       width,
       height,
       fps,
+      sourceFrameRate,
+      recipeFrameRate,
+      frameRateSource,
       bitrate = 5e6,
-      audioBitrate = 128e3
+      audioBitrate = 128e3,
+      captureMode,
+      capturePlaybackRate,
+      maxFrameGap,
+      frameSocketUrl
     } = config;
+    const encoderMode = resolveEncoderMode(config);
     const trimStart = resolveTrimStart(recipe);
     const video = document.getElementById("source-video");
     touchRenderHeartbeat("loading-source");
@@ -71377,9 +71957,45 @@ async function main() {
     const trimEnd = resolveTrimEnd(recipe, videoDuration);
     const exportDuration = Math.max(0, trimEnd - trimStart);
     const totalFrames = Math.max(1, Math.ceil(exportDuration * fps));
-    const hasAudioEncoder = typeof AudioEncoder !== "undefined";
+    const keyFrameIntervalFrames = Math.max(1, Math.round(fps * 2));
+    const captureModeResolution = resolveRenderCaptureMode({
+      requestedMode: captureMode,
+      recipe,
+      trimStart,
+      trimEnd,
+      fps,
+      supportsRequestVideoFrameCallback: typeof video.requestVideoFrameCallback === "function"
+    });
+    const metrics = createRenderMetrics({
+      fps,
+      totalFrames,
+      requestedCaptureMode: captureModeResolution.requestedMode,
+      captureMode: captureModeResolution.effectiveMode,
+      encoderMode,
+      fallbackReason: captureModeResolution.fallbackReason
+    });
+    window.__RENDER_METRICS__ = metrics.snapshot();
+    console.log("[Render] Runtime resolved", window.__RENDER_RUNTIME__);
+    console.log("[Render] Timing resolved", {
+      fps,
+      frameRateSource: frameRateSource ?? "unknown",
+      sourceFrameRate: sourceFrameRate ?? null,
+      recipeFrameRate: recipeFrameRate ?? null,
+      trimStart,
+      trimEnd,
+      exportDuration,
+      totalFrames,
+      keyFrameIntervalFrames,
+      encoderMode,
+      requestedCaptureMode: captureModeResolution.requestedMode,
+      captureMode: captureModeResolution.effectiveMode,
+      captureFallbackReason: captureModeResolution.fallbackReason
+    });
+    const hasAudioEncoder = encoderMode === "webcodecs" && typeof AudioEncoder !== "undefined";
     console.log("[RenderAudio] AudioEncoder available:", hasAudioEncoder);
-    if (!hasAudioEncoder) {
+    if (encoderMode === "ffmpeg") {
+      window.__RENDER_AUDIO_STATUS__ = "external:ffmpeg";
+    } else if (!hasAudioEncoder) {
       window.__RENDER_AUDIO_STATUS__ = "skipped:AudioEncoder-unavailable";
     }
     const audioPromise = hasAudioEncoder ? decodeAudioFromSource(sourceUrl) : Promise.resolve(null);
@@ -71445,171 +72061,395 @@ async function main() {
     }
     sprite.filters = filterInstances;
     const audioBuffer = await audioPromise;
-    const hasAudio = !!audioBuffer && audioBuffer.numberOfChannels > 0 && audioBuffer.length > 0;
+    const hasAudio = encoderMode === "webcodecs" && !!audioBuffer && audioBuffer.numberOfChannels > 0 && audioBuffer.length > 0;
     console.log("[RenderAudio] hasAudio:", hasAudio, audioBuffer ? { channels: audioBuffer.numberOfChannels, length: audioBuffer.length } : "null");
-    if (!hasAudio && hasAudioEncoder) {
+    if (encoderMode === "webcodecs" && !hasAudio && hasAudioEncoder) {
       window.__RENDER_AUDIO_STATUS__ = "skipped:decode-failed";
     }
-    const chunkWriteQueue = createChunkWriteQueue();
-    const muxerOptions = {
-      target: new StreamTarget({
-        onData: (data, position2) => {
-          const b64 = toBase64(data);
-          chunkWriteQueue.enqueue(() => window.__writeChunk(b64, position2));
+    const chunkWriteQueue = encoderMode === "webcodecs" ? createChunkWriteQueue() : null;
+    let muxer = null;
+    let encoder = null;
+    let ffmpegFrameSocket = null;
+    const pendingFfmpegFrameAcks = [];
+    let ffmpegFrameAckFailure = null;
+    const trackFfmpegFrameAck = (ackPromise) => {
+      let trackedAck;
+      trackedAck = ackPromise.catch((error) => {
+        if (ffmpegFrameAckFailure === null) {
+          ffmpegFrameAckFailure = error instanceof Error ? error : new Error(String(error));
         }
-      }),
-      video: {
-        codec: "avc",
-        width,
-        height,
-        frameRate: fps
-      },
-      fastStart: false
-      // StreamTarget doesn't support fastStart
+      }).finally(() => {
+        const index = pendingFfmpegFrameAcks.indexOf(trackedAck);
+        if (index >= 0) {
+          pendingFfmpegFrameAcks.splice(index, 1);
+        }
+      });
+      pendingFfmpegFrameAcks.push(trackedAck);
     };
-    if (hasAudio) {
-      muxerOptions.audio = {
-        codec: "aac",
-        numberOfChannels: audioBuffer.numberOfChannels,
-        sampleRate: audioBuffer.sampleRate
-      };
-    }
-    const muxer = new Muxer(muxerOptions);
-    const codecCandidates = [
-      { codec: "avc1.640028", hw: "prefer-software" },
-      // High Profile Level 4.0 (prefer software in headless)
-      { codec: "avc1.4d0028", hw: "prefer-software" },
-      // Main Profile Level 4.0
-      { codec: "avc1.420028", hw: "prefer-software" }
-      // Baseline Profile Level 4.0
-    ];
-    let encoderConfig = null;
-    for (const candidate of codecCandidates) {
-      const cfg = {
-        codec: candidate.codec,
-        width,
-        height,
-        bitrate,
-        framerate: fps,
-        hardwareAcceleration: candidate.hw
+    const assertNoFfmpegFrameAckFailure = () => {
+      if (ffmpegFrameAckFailure !== null) {
+        throw ffmpegFrameAckFailure;
+      }
+    };
+    const flushFfmpegFrameAcks = async () => {
+      if (ffmpegFrameSocket !== null) {
+        await ffmpegFrameSocket.flush();
+      }
+      while (pendingFfmpegFrameAcks.length > 0) {
+        const pendingAcks = pendingFfmpegFrameAcks.splice(0);
+        await Promise.all(pendingAcks);
+        assertNoFfmpegFrameAckFailure();
+      }
+      assertNoFfmpegFrameAckFailure();
+    };
+    const encoderFrameRate = Math.max(1, Math.round(fps));
+    if (encoderMode === "ffmpeg") {
+      if (typeof frameSocketUrl !== "string" || frameSocketUrl.trim() === "") {
+        throw new Error("ffmpeg encoder mode requires frameSocketUrl");
+      }
+      ffmpegFrameSocket = createFfmpegFrameSocket(frameSocketUrl);
+      console.log("[RenderVideo] Using ffmpeg frame socket encoder");
+    } else {
+      const muxerOptions = {
+        target: new StreamTarget({
+          onData: (data, position2) => {
+            if (chunkWriteQueue === null) {
+              throw new Error("Chunk write queue unavailable for WebCodecs encoder");
+            }
+            const b64 = toBase64(data);
+            chunkWriteQueue.enqueue(() => window.__writeChunk(b64, position2));
+          }
+        }),
+        video: {
+          codec: "avc",
+          width,
+          height,
+          frameRate: encoderFrameRate
+        },
+        fastStart: false
+        // StreamTarget doesn't support fastStart
       };
-      const support = await VideoEncoder.isConfigSupported(cfg);
-      if (support.supported) {
-        encoderConfig = cfg;
-        break;
+      if (hasAudio && audioBuffer !== null) {
+        muxerOptions.audio = {
+          codec: "aac",
+          numberOfChannels: audioBuffer.numberOfChannels,
+          sampleRate: audioBuffer.sampleRate
+        };
       }
-    }
-    if (!encoderConfig) {
-      throw new Error(`No supported VideoEncoder codec found for ${width}x${height}`);
-    }
-    const encoder = new VideoEncoder({
-      output: (chunk, metadata) => {
-        muxer.addVideoChunk(chunk, metadata);
-      },
-      error: (err) => {
-        throw new Error(`VideoEncoder error: ${err.message}`);
+      muxer = new Muxer(muxerOptions);
+      const codecCandidates = [
+        { codec: "avc1.640028", hw: "prefer-software" },
+        // High Profile Level 4.0 (prefer software in headless)
+        { codec: "avc1.4d0028", hw: "prefer-software" },
+        // Main Profile Level 4.0
+        { codec: "avc1.420028", hw: "prefer-software" }
+        // Baseline Profile Level 4.0
+      ];
+      let encoderConfig = null;
+      for (const candidate of codecCandidates) {
+        const cfg = {
+          codec: candidate.codec,
+          width,
+          height,
+          bitrate,
+          framerate: encoderFrameRate,
+          hardwareAcceleration: candidate.hw
+        };
+        const support = await VideoEncoder.isConfigSupported(cfg);
+        if (support.supported) {
+          encoderConfig = cfg;
+          break;
+        }
       }
-    });
-    encoder.configure(encoderConfig);
-    for (let frame = 0; frame < totalFrames; frame++) {
-      const timeSec = trimStart + frame / fps;
-      await seekVideo(
-        video,
-        timeSec,
-        config.seekTimeoutMs ?? 4e3,
-        config.seekRetryAttempts ?? 3,
-        fps
-      );
-      await drawCurrentVideoFrameToCanvas(video, sourceCtx, sourceWidth, sourceHeight);
-      videoTexture.source.update();
-      app.render();
-      const timestamp = Math.floor(frame / fps * 1e6);
-      const frameDuration = Math.floor(1e6 / fps);
-      const videoFrame = new VideoFrame(
-        app.canvas,
-        { timestamp, duration: frameDuration }
-      );
-      const keyFrame = frame % (fps * 2) === 0;
-      encoder.encode(videoFrame, { keyFrame });
-      videoFrame.close();
-      if (encoder.encodeQueueSize > 5) {
-        await new Promise((resolve) => {
-          encoder.addEventListener("dequeue", () => resolve(), { once: true });
-        });
+      if (!encoderConfig) {
+        throw new Error(`No supported VideoEncoder codec found for ${width}x${height}`);
       }
+      encoder = new VideoEncoder({
+        output: (chunk, metadata) => {
+          if (muxer === null) {
+            throw new Error("Muxer unavailable for VideoEncoder output");
+          }
+          muxer.addVideoChunk(chunk, metadata);
+        },
+        error: (err) => {
+          throw new Error(`VideoEncoder error: ${err.message}`);
+        }
+      });
+      encoder.configure(encoderConfig);
+    }
+    const rgbaFallbackCanvas = document.createElement("canvas");
+    rgbaFallbackCanvas.width = width;
+    rgbaFallbackCanvas.height = height;
+    const rgbaFallbackCtx = rgbaFallbackCanvas.getContext("2d", { willReadFrequently: true });
+    if (!rgbaFallbackCtx) throw new Error("Failed to create 2D context for ffmpeg frame readback fallback");
+    const seekTimeoutMs = config.seekTimeoutMs ?? 4e3;
+    const seekRetryAttempts = config.seekRetryAttempts ?? 3;
+    const updateVideoProgress = (frame) => {
       window.__RENDER_PROGRESS__ = Math.round((frame + 1) / totalFrames * 90);
-      touchRenderHeartbeat("encoding-video");
-    }
-    touchRenderHeartbeat("flushing-video");
-    await encoder.flush();
-    encoder.close();
-    if (hasAudio) {
-      window.__RENDER_PROGRESS__ = 91;
-      touchRenderHeartbeat("encoding-audio");
-      const trimmed = trimAudioBuffer(audioBuffer, trimStart, trimEnd);
-      const audioEncoderConfig = {
-        codec: "mp4a.40.2",
-        numberOfChannels: trimmed.numberOfChannels,
-        sampleRate: trimmed.sampleRate,
-        bitrate: audioBitrate
-      };
-      const audioSupport = await AudioEncoder.isConfigSupported(audioEncoderConfig);
-      console.log("[RenderAudio] AAC encoder supported:", audioSupport.supported);
-      if (audioSupport.supported) {
-        const audioEncoder = new AudioEncoder({
-          output: (chunk, metadata) => {
-            muxer.addAudioChunk(chunk, metadata);
-          },
-          error: (err) => {
-            throw new Error(`AudioEncoder error: ${err.message}`);
+      window.__RENDER_METRICS__ = metrics.snapshot();
+    };
+    const seekToFrame = async (_frame, timeSec) => {
+      const seekHeartbeat = setInterval(() => {
+        touchRenderHeartbeat("seeking");
+      }, 5e3);
+      try {
+        await measureAsyncMetric(metrics, "seek", () => seekVideo(
+          video,
+          timeSec,
+          seekTimeoutMs,
+          seekRetryAttempts,
+          fps
+        ));
+      } finally {
+        clearInterval(seekHeartbeat);
+      }
+    };
+    let lastRgbaFrame = null;
+    const captureFrame = async ({
+      frame,
+      duplicatePreviousFrame
+    }) => {
+      assertNoFfmpegFrameAckFailure();
+      if (!duplicatePreviousFrame) {
+        await measureAsyncMetric(metrics, "sourceSnapshot", () => drawCurrentVideoFrameToCanvas(video, sourceCtx, sourceWidth, sourceHeight));
+        measureSyncMetric(metrics, "textureUpload", () => {
+          videoTexture.source.update();
+        });
+        measureSyncMetric(metrics, "pixiRender", () => {
+          app.render();
+        });
+      } else {
+        metrics.markDuplicateFrame();
+      }
+      const activeFrameSocket = ffmpegFrameSocket;
+      if (activeFrameSocket !== null) {
+        let rgbaFrame;
+        if (duplicatePreviousFrame) {
+          if (lastRgbaFrame === null) {
+            throw new Error("Cannot duplicate ffmpeg frame before a previous frame exists");
           }
+          rgbaFrame = lastRgbaFrame;
+        } else {
+          touchRenderHeartbeat("reading-frame");
+          rgbaFrame = await measureAsyncMetric(metrics, "frameReadback", () => copyCanvasToRgba(
+            app.canvas,
+            width,
+            height,
+            rgbaFallbackCanvas,
+            rgbaFallbackCtx
+          ));
+          lastRgbaFrame = rgbaFrame;
+        }
+        touchRenderHeartbeat("piping-frame");
+        let markFrameSent = null;
+        const frameSentPromise = new Promise((resolve) => {
+          markFrameSent = resolve;
         });
-        audioEncoder.configure(audioEncoderConfig);
-        const chunkSize = 1024;
-        const totalSamples = trimmed.channels[0].length;
-        for (let offset = 0; offset < totalSamples; offset += chunkSize) {
-          const frameSamples = Math.min(chunkSize, totalSamples - offset);
-          const planarData = new Float32Array(trimmed.numberOfChannels * frameSamples);
-          for (let ch = 0; ch < trimmed.numberOfChannels; ch++) {
-            planarData.set(
-              trimmed.channels[ch].subarray(offset, offset + frameSamples),
-              ch * frameSamples
-            );
+        const frameAckPromise = activeFrameSocket.sendFrame(rgbaFrame, frame, () => {
+          markFrameSent == null ? void 0 : markFrameSent();
+        }).catch((error) => {
+          markFrameSent == null ? void 0 : markFrameSent();
+          throw error;
+        });
+        trackFfmpegFrameAck(frameAckPromise);
+        await measureAsyncMetric(metrics, "framePipe", () => frameSentPromise);
+      } else {
+        if (encoder === null) {
+          throw new Error("VideoEncoder unavailable for WebCodecs render path");
+        }
+        measureSyncMetric(metrics, "encode", () => {
+          const timestamp = Math.round(frame / fps * 1e6);
+          const nextTimestamp = Math.round((frame + 1) / fps * 1e6);
+          const frameDuration = Math.max(1, nextTimestamp - timestamp);
+          const videoFrame = new VideoFrame(
+            app.canvas,
+            { timestamp, duration: frameDuration }
+          );
+          const keyFrame = frame % keyFrameIntervalFrames === 0;
+          encoder.encode(videoFrame, { keyFrame });
+          videoFrame.close();
+        });
+        if (encoder.encodeQueueSize > 5) {
+          await measureAsyncMetric(metrics, "encodeBackpressure", () => new Promise((resolve) => {
+            encoder.addEventListener("dequeue", () => resolve(), { once: true });
+          }));
+        }
+      }
+      metrics.markFrameRendered();
+      window.__RENDER_METRICS__ = metrics.snapshot();
+    };
+    const runSeekFromFrame = async (startFrame = 0, fallbackReason = captureModeResolution.fallbackReason) => {
+      metrics.setCaptureMode(
+        "seek",
+        fallbackReason
+      );
+      await runSeekCaptureLoop({
+        totalFrames,
+        trimStart,
+        fps,
+        startFrame,
+        seekToFrame,
+        captureFrame,
+        updateProgress: updateVideoProgress,
+        touchHeartbeat: touchRenderHeartbeat
+      });
+    };
+    const effectiveCaptureMode = captureModeResolution.effectiveMode;
+    if (effectiveCaptureMode === "rvfc") {
+      metrics.setCaptureMode("rvfc", null);
+      try {
+        await runPlaybackCaptureLoop({
+          video,
+          totalFrames,
+          trimStart,
+          trimEnd,
+          fps,
+          playbackRate: normalizeCapturePlaybackRate(capturePlaybackRate),
+          maxFrameGap: normalizeMaxFrameGap(maxFrameGap),
+          frameTimeoutMs: seekTimeoutMs,
+          seekToFrame,
+          captureFrame,
+          updateProgress: updateVideoProgress,
+          touchHeartbeat: touchRenderHeartbeat,
+          markPlaybackWait: (durationMs) => {
+            metrics.markDuration("playbackWait", durationMs);
           }
-          const audioData = new AudioData({
-            format: "f32-planar",
-            sampleRate: trimmed.sampleRate,
-            numberOfFrames: frameSamples,
-            numberOfChannels: trimmed.numberOfChannels,
-            timestamp: Math.floor(offset / trimmed.sampleRate * 1e6),
-            data: planarData
+        });
+      } catch (error) {
+        if (!(error instanceof PlaybackCaptureFallbackError)) {
+          throw error;
+        }
+        metrics.markPlaybackFallback(error.message);
+        console.warn("[RenderVideo] playback capture fell back to seek", {
+          startFrame: error.startFrame,
+          reason: error.message
+        });
+        touchRenderHeartbeat("fallback-seek");
+        await runSeekFromFrame(error.startFrame, error.message);
+      }
+    } else {
+      await runSeekFromFrame(0);
+    }
+    window.__RENDER_METRICS__ = metrics.snapshot();
+    if (encoderMode === "ffmpeg") {
+      const backpressureHeartbeat = window.setInterval(() => {
+        touchRenderHeartbeat("ffmpeg-backpressure");
+      }, 5e3);
+      try {
+        await measureAsyncMetric(metrics, "framePipeBackpressure", () => flushFfmpegFrameAcks());
+      } finally {
+        window.clearInterval(backpressureHeartbeat);
+      }
+      ffmpegFrameSocket == null ? void 0 : ffmpegFrameSocket.close();
+      window.__RENDER_PROGRESS__ = 99;
+      window.__RENDER_STATUS__ = "done";
+      window.__RENDER_METRICS__ = metrics.snapshot();
+      touchRenderHeartbeat("waiting-ffmpeg-finalize");
+    } else {
+      if (encoder === null || muxer === null || chunkWriteQueue === null) {
+        throw new Error("WebCodecs encoder resources were not initialized");
+      }
+      touchRenderHeartbeat("flushing-video");
+      const videoFlushHeartbeat = setInterval(() => {
+        touchRenderHeartbeat("flushing-video");
+      }, 5e3);
+      try {
+        await measureAsyncMetric(metrics, "videoFlush", () => encoder.flush());
+      } finally {
+        clearInterval(videoFlushHeartbeat);
+      }
+      encoder.close();
+      window.__RENDER_METRICS__ = metrics.snapshot();
+      if (hasAudio && audioBuffer !== null) {
+        window.__RENDER_PROGRESS__ = 91;
+        touchRenderHeartbeat("encoding-audio");
+        const trimmed = trimAudioBuffer(audioBuffer, trimStart, trimEnd);
+        const audioEncoderConfig = {
+          codec: "mp4a.40.2",
+          numberOfChannels: trimmed.numberOfChannels,
+          sampleRate: trimmed.sampleRate,
+          bitrate: audioBitrate
+        };
+        const audioSupport = await AudioEncoder.isConfigSupported(audioEncoderConfig);
+        console.log("[RenderAudio] AAC encoder supported:", audioSupport.supported);
+        if (audioSupport.supported) {
+          const activeMuxer = muxer;
+          const audioEncoder = new AudioEncoder({
+            output: (chunk, metadata) => {
+              activeMuxer.addAudioChunk(chunk, metadata);
+            },
+            error: (err) => {
+              throw new Error(`AudioEncoder error: ${err.message}`);
+            }
           });
-          audioEncoder.encode(audioData);
-          audioData.close();
-          if (audioEncoder.encodeQueueSize > 10) {
-            await new Promise((resolve) => {
-              audioEncoder.addEventListener("dequeue", () => resolve(), { once: true });
+          audioEncoder.configure(audioEncoderConfig);
+          const chunkSize = 1024;
+          const firstChannel = trimmed.channels[0];
+          if (firstChannel === void 0) {
+            throw new Error("Decoded audio has no channel data");
+          }
+          const totalSamples = firstChannel.length;
+          for (let offset = 0; offset < totalSamples; offset += chunkSize) {
+            const frameSamples = Math.min(chunkSize, totalSamples - offset);
+            const planarData = new Float32Array(trimmed.numberOfChannels * frameSamples);
+            for (let ch = 0; ch < trimmed.numberOfChannels; ch++) {
+              const channel = trimmed.channels[ch];
+              if (channel === void 0) {
+                throw new Error(`Decoded audio channel ${ch} is unavailable`);
+              }
+              planarData.set(
+                channel.subarray(offset, offset + frameSamples),
+                ch * frameSamples
+              );
+            }
+            const audioData = new AudioData({
+              format: "f32-planar",
+              sampleRate: trimmed.sampleRate,
+              numberOfFrames: frameSamples,
+              numberOfChannels: trimmed.numberOfChannels,
+              timestamp: Math.floor(offset / trimmed.sampleRate * 1e6),
+              data: planarData
+            });
+            measureSyncMetric(metrics, "audioEncode", () => {
+              audioEncoder.encode(audioData);
             });
+            audioData.close();
+            if (audioEncoder.encodeQueueSize > 10) {
+              await measureAsyncMetric(metrics, "audioEncode", () => new Promise((resolve) => {
+                audioEncoder.addEventListener("dequeue", () => resolve(), { once: true });
+              }));
+            }
+            touchRenderHeartbeat("encoding-audio");
+            window.__RENDER_METRICS__ = metrics.snapshot();
+          }
+          touchRenderHeartbeat("flushing-audio");
+          const audioFlushHeartbeat = setInterval(() => {
+            touchRenderHeartbeat("flushing-audio");
+          }, 5e3);
+          try {
+            await measureAsyncMetric(metrics, "audioFlush", () => audioEncoder.flush());
+          } finally {
+            clearInterval(audioFlushHeartbeat);
           }
-          touchRenderHeartbeat("encoding-audio");
+          audioEncoder.close();
+          console.log("[RenderAudio] Audio encoding complete");
+          window.__RENDER_AUDIO_STATUS__ = "encoded";
+        } else {
+          console.warn("[RenderAudio] AAC not supported, exporting without audio");
+          window.__RENDER_AUDIO_STATUS__ = "skipped:aac-unsupported";
         }
-        touchRenderHeartbeat("flushing-audio");
-        await audioEncoder.flush();
-        audioEncoder.close();
-        console.log("[RenderAudio] Audio encoding complete");
-        window.__RENDER_AUDIO_STATUS__ = "encoded";
-      } else {
-        console.warn("[RenderAudio] AAC not supported, exporting without audio");
-        window.__RENDER_AUDIO_STATUS__ = "skipped:aac-unsupported";
+        window.__RENDER_PROGRESS__ = 99;
       }
-      window.__RENDER_PROGRESS__ = 99;
+      touchRenderHeartbeat("finalizing-muxer");
+      measureSyncMetric(metrics, "muxFinalize", () => {
+        muxer.finalize();
+      });
+      await measureAsyncMetric(metrics, "muxFinalize", () => chunkWriteQueue.flush());
+      window.__RENDER_PROGRESS__ = 100;
+      window.__RENDER_STATUS__ = "done";
+      window.__RENDER_METRICS__ = metrics.snapshot();
+      touchRenderHeartbeat("done");
     }
-    touchRenderHeartbeat("finalizing-muxer");
-    muxer.finalize();
-    await chunkWriteQueue.flush();
-    window.__RENDER_PROGRESS__ = 100;
-    window.__RENDER_STATUS__ = "done";
-    touchRenderHeartbeat("done");
     app.destroy(true);
   } catch (err) {
     const message = err instanceof Error ? err.message : String(err);