@remotion/webcodecs 4.0.330 → 4.0.331

package/dist/esm/index.mjs

@@ -5593,20 +5593,23 @@ var convertMedia = async function({
   });
 };
 // src/extract-frames.ts
+import { parseMedia } from "@remotion/media-parser";
+
+// src/internal-extract-frames.ts
 import {
-  hasBeenAborted,
   MediaParserAbortError as MediaParserAbortError4,
-  mediaParserController as mediaParserController2,
-  WEBCODECS_TIMESCALE
+  WEBCODECS_TIMESCALE,
+  hasBeenAborted,
+  mediaParserController as mediaParserController2
 } from "@remotion/media-parser";
-import { parseMediaOnWebWorker } from "@remotion/media-parser/worker";
 var internalExtractFrames = ({
   src,
   onFrame,
   signal,
   timestampsInSeconds,
   acknowledgeRemotionLicense,
-  logLevel
+  logLevel,
+  parseMediaImplementation
 }) => {
   const controller = mediaParserController2();
   const expectedFrames = [];
@@ -5619,7 +5622,7 @@ var internalExtractFrames = ({
   let dur = null;
   let lastFrame;
   let lastFrameEmitted;
-  parseMediaOnWebWorker({
+  parseMediaImplementation({
     src: new URL(src, window.location.href),
     acknowledgeRemotionLicense,
     controller,
@@ -5656,11 +5659,17 @@ var internalExtractFrames = ({
             onFrame(lastFrame);
             lastFrameEmitted = lastFrame;
             expectedFrames.shift();
+            if (lastFrame) {
+              lastFrame.close();
+            }
             lastFrame = frame;
             return;
           }
           expectedFrames.shift();
           onFrame(frame);
+          if (lastFrame && lastFrame !== lastFrameEmitted) {
+            lastFrame.close();
+          }
           lastFrameEmitted = frame;
           lastFrame = frame;
         },
@@ -5681,14 +5690,14 @@ var internalExtractFrames = ({
           if (!sam) {
             throw new Error("Sample is undefined");
           }
-          await decoder.waitForQueueToBeLessThan(10);
+          await decoder.waitForQueueToBeLessThan(20);
           Log.trace(logLevel, "Decoding sample", sam.timestamp);
           await decoder.decode(sam);
         }
       };
       return async (sample) => {
         const nextTimestampWeWant = timestampTargets[0];
-        Log.trace(logLevel, "Received sample with dts", sample.decodingTimestamp, "and cts", sample.timestamp);
+        Log.trace(logLevel, `Received ${sample.type} sample with dts`, sample.decodingTimestamp, "and cts", sample.timestamp);
         if (sample.type === "key") {
           await decoder.flush();
           queued.length = 0;
@@ -5735,12 +5744,15 @@ var internalExtractFrames = ({
   });
   return resolvers.promise;
 };
+
+// src/extract-frames.ts
 var extractFrames = (options) => {
   return internalExtractFrames({
     ...options,
     signal: options.signal ?? null,
     acknowledgeRemotionLicense: options.acknowledgeRemotionLicense ?? false,
-    logLevel: options.logLevel ?? "info"
+    logLevel: options.logLevel ?? "info",
+    parseMediaImplementation: parseMedia
   });
 };
 // src/get-available-audio-codecs.ts
@@ -5762,7 +5774,7 @@ var getAvailableAudioCodecs = ({
 import {
   hasBeenAborted as hasBeenAborted2,
   mediaParserController as mediaParserController3,
-  parseMedia
+  parseMedia as parseMedia2
 } from "@remotion/media-parser";
 var extractOverlappingAudioSamples = ({
   sample,
@@ -5820,7 +5832,7 @@ var getPartialAudioData = async ({
     if (fromSeconds > 0) {
       controller.seek(fromSeconds);
     }
-    await parseMedia({
+    await parseMedia2({
       acknowledgeRemotionLicense: true,
       src,
       controller,

package/dist/esm/worker.mjs

@@ -0,0 +1,506 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+
+// src/extract-frames-on-web-worker.ts
+import { parseMediaOnWebWorker } from "@remotion/media-parser/worker";
+
+// src/internal-extract-frames.ts
+import {
+  MediaParserAbortError,
+  WEBCODECS_TIMESCALE,
+  hasBeenAborted,
+  mediaParserController
+} from "@remotion/media-parser";
+
+// src/create/with-resolvers.ts
+var withResolvers = function() {
+  let resolve;
+  let reject;
+  const promise = new Promise((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return { promise, resolve, reject };
+};
+var withResolversAndWaitForReturn = () => {
+  const { promise, reject, resolve } = withResolvers();
+  const { promise: returnPromise, resolve: resolveReturn } = withResolvers();
+  return {
+    getPromiseToImmediatelyReturn: () => {
+      resolveReturn(undefined);
+      return promise;
+    },
+    reject: (reason) => {
+      returnPromise.then(() => reject(reason));
+    },
+    resolve
+  };
+};
+
+// src/flush-pending.ts
+var makeFlushPending = () => {
+  const { promise, resolve, reject } = withResolvers();
+  return {
+    promise,
+    resolve,
+    reject
+  };
+};
+
+// src/create/event-emitter.ts
+class IoEventEmitter {
+  listeners = {
+    input: [],
+    output: [],
+    processed: [],
+    progress: []
+  };
+  addEventListener(name, callback) {
+    this.listeners[name].push(callback);
+  }
+  removeEventListener(name, callback) {
+    this.listeners[name] = this.listeners[name].filter((l) => l !== callback);
+  }
+  dispatchEvent(dispatchName, context) {
+    this.listeners[dispatchName].forEach((callback) => {
+      callback({ detail: context });
+    });
+  }
+}
+
+// src/log.ts
+import { MediaParserInternals } from "@remotion/media-parser";
+var { Log } = MediaParserInternals;
+
+// src/io-manager/make-timeout-promise.ts
+var makeTimeoutPromise = ({
+  label,
+  ms,
+  controller
+}) => {
+  const { promise, reject, resolve } = withResolvers();
+  let timeout = null;
+  const set = () => {
+    timeout = setTimeout(() => {
+      reject(new Error(`${label()} (timed out after ${ms}ms)`));
+    }, ms);
+  };
+  set();
+  const onPause = () => {
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+  };
+  const onResume = () => {
+    set();
+  };
+  if (controller) {
+    controller.addEventListener("pause", onPause);
+    controller.addEventListener("resume", onResume);
+  }
+  return {
+    timeoutPromise: promise,
+    clear: () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+      resolve();
+      if (controller) {
+        controller.removeEventListener("pause", onPause);
+        controller.removeEventListener("resume", onResume);
+      }
+    }
+  };
+};
+
+// src/io-manager/io-synchronizer.ts
+var makeIoSynchronizer = ({
+  logLevel,
+  label,
+  controller
+}) => {
+  const eventEmitter = new IoEventEmitter;
+  let lastInput = 0;
+  let lastOutput = 0;
+  let inputsSinceLastOutput = 0;
+  let inputs = [];
+  let resolvers = [];
+  const getQueuedItems = () => {
+    inputs = inputs.filter((input) => Math.floor(input) > Math.floor(lastOutput) + 1);
+    return inputs.length;
+  };
+  const printState = (prefix) => {
+    Log.trace(logLevel, `[${label}] ${prefix}, state: Last input = ${lastInput} Last output = ${lastOutput} Inputs since last output = ${inputsSinceLastOutput}, Queue = ${getQueuedItems()}`);
+  };
+  const inputItem = (timestamp) => {
+    lastInput = timestamp;
+    inputsSinceLastOutput++;
+    inputs.push(timestamp);
+    eventEmitter.dispatchEvent("input", {
+      timestamp
+    });
+    printState("Input item");
+  };
+  const onOutput = (timestamp) => {
+    lastOutput = timestamp;
+    inputsSinceLastOutput = 0;
+    eventEmitter.dispatchEvent("output", {
+      timestamp
+    });
+    printState("Got output");
+  };
+  const waitForOutput = () => {
+    const { promise, resolve } = withResolvers();
+    const on = () => {
+      eventEmitter.removeEventListener("output", on);
+      resolve();
+      resolvers = resolvers.filter((resolver) => resolver !== resolve);
+    };
+    eventEmitter.addEventListener("output", on);
+    resolvers.push(resolve);
+    return promise;
+  };
+  const makeErrorBanner = () => {
+    return [
+      `Waited too long for ${label} to finish:`,
+      `${getQueuedItems()} queued items`,
+      `inputs: ${JSON.stringify(inputs)}`,
+      `last output: ${lastOutput}`
+    ];
+  };
+  const waitForQueueSize = async (queueSize) => {
+    if (getQueuedItems() <= queueSize) {
+      return Promise.resolve();
+    }
+    const { timeoutPromise, clear } = makeTimeoutPromise({
+      label: () => [
+        ...makeErrorBanner(),
+        `wanted: <${queueSize} queued items`,
+        `Report this at https://remotion.dev/report`
+      ].join(`
+`),
+      ms: 1e4,
+      controller
+    });
+    if (controller) {
+      controller._internals._mediaParserController._internals.signal.addEventListener("abort", clear);
+    }
+    await Promise.race([
+      timeoutPromise,
+      (async () => {
+        while (getQueuedItems() > queueSize) {
+          await waitForOutput();
+        }
+      })()
+    ]).finally(() => clear());
+    if (controller) {
+      controller._internals._mediaParserController._internals.signal.removeEventListener("abort", clear);
+    }
+  };
+  const clearQueue = () => {
+    inputs.length = 0;
+    lastInput = 0;
+    lastOutput = 0;
+    inputsSinceLastOutput = 0;
+    resolvers.forEach((resolver) => {
+      return resolver();
+    });
+    resolvers.length = 0;
+    inputs.length = 0;
+  };
+  return {
+    inputItem,
+    onOutput,
+    waitForQueueSize,
+    clearQueue
+  };
+};
+
+// src/create-video-decoder.ts
+var internalCreateVideoDecoder = ({
+  onFrame,
+  onError,
+  controller,
+  config,
+  logLevel
+}) => {
+  if (controller && controller._internals._mediaParserController._internals.signal.aborted) {
+    throw new Error("Not creating audio decoder, already aborted");
+  }
+  const ioSynchronizer = makeIoSynchronizer({
+    logLevel,
+    label: "Video decoder",
+    controller
+  });
+  let mostRecentSampleReceived = null;
+  const videoDecoder = new VideoDecoder({
+    async output(frame) {
+      try {
+        await onFrame(frame);
+      } catch (err) {
+        onError(err);
+        frame.close();
+      }
+      ioSynchronizer.onOutput(frame.timestamp);
+    },
+    error(error) {
+      onError(error);
+    }
+  });
+  const close = () => {
+    if (controller) {
+      controller._internals._mediaParserController._internals.signal.removeEventListener("abort", onAbort);
+    }
+    if (videoDecoder.state === "closed") {
+      return;
+    }
+    videoDecoder.close();
+  };
+  const onAbort = () => {
+    close();
+  };
+  if (controller) {
+    controller._internals._mediaParserController._internals.signal.addEventListener("abort", onAbort);
+  }
+  videoDecoder.configure(config);
+  const decode = async (sample) => {
+    if (videoDecoder.state === "closed") {
+      return;
+    }
+    try {
+      await controller?._internals._mediaParserController._internals.checkForAbortAndPause();
+    } catch (err) {
+      onError(err);
+      return;
+    }
+    mostRecentSampleReceived = sample.timestamp;
+    const encodedChunk = sample instanceof EncodedVideoChunk ? sample : new EncodedVideoChunk(sample);
+    videoDecoder.decode(encodedChunk);
+    ioSynchronizer.inputItem(sample.timestamp);
+  };
+  let flushPending = null;
+  let lastReset = null;
+  return {
+    decode,
+    close,
+    flush: () => {
+      if (flushPending) {
+        throw new Error("Flush already pending");
+      }
+      const pendingFlush = makeFlushPending();
+      flushPending = pendingFlush;
+      Promise.resolve().then(() => {
+        return videoDecoder.flush();
+      }).catch(() => {}).finally(() => {
+        pendingFlush.resolve();
+        flushPending = null;
+      });
+      return pendingFlush.promise;
+    },
+    waitForQueueToBeLessThan: ioSynchronizer.waitForQueueSize,
+    reset: () => {
+      lastReset = Date.now();
+      flushPending?.resolve();
+      ioSynchronizer.clearQueue();
+      videoDecoder.reset();
+      videoDecoder.configure(config);
+    },
+    checkReset: () => {
+      const initTime = Date.now();
+      return {
+        wasReset: () => lastReset !== null && lastReset > initTime
+      };
+    },
+    getMostRecentSampleInput() {
+      return mostRecentSampleReceived;
+    }
+  };
+};
+var createVideoDecoder = ({
+  onFrame,
+  onError,
+  controller,
+  track,
+  logLevel
+}) => {
+  return internalCreateVideoDecoder({
+    onFrame,
+    onError,
+    controller: controller ?? null,
+    config: track,
+    logLevel: logLevel ?? "info"
+  });
+};
+
+// src/internal-extract-frames.ts
+var internalExtractFrames = ({
+  src,
+  onFrame,
+  signal,
+  timestampsInSeconds,
+  acknowledgeRemotionLicense,
+  logLevel,
+  parseMediaImplementation
+}) => {
+  const controller = mediaParserController();
+  const expectedFrames = [];
+  const resolvers = withResolvers();
+  const abortListener = () => {
+    controller.abort();
+    resolvers.reject(new MediaParserAbortError("Aborted by user"));
+  };
+  signal?.addEventListener("abort", abortListener, { once: true });
+  let dur = null;
+  let lastFrame;
+  let lastFrameEmitted;
+  parseMediaImplementation({
+    src: new URL(src, window.location.href),
+    acknowledgeRemotionLicense,
+    controller,
+    logLevel,
+    onDurationInSeconds(durationInSeconds) {
+      dur = durationInSeconds;
+    },
+    onVideoTrack: async ({ track, container }) => {
+      const timestampTargetsUnsorted = typeof timestampsInSeconds === "function" ? await timestampsInSeconds({
+        track,
+        container,
+        durationInSeconds: dur
+      }) : timestampsInSeconds;
+      const timestampTargets = timestampTargetsUnsorted.sort((a, b) => a - b);
+      if (timestampTargets.length === 0) {
+        throw new Error("expected at least one timestamp to extract but found zero");
+      }
+      controller.seek(timestampTargets[0]);
+      const decoder = createVideoDecoder({
+        onFrame: (frame) => {
+          Log.trace(logLevel, "Received frame with timestamp", frame.timestamp);
+          if (expectedFrames.length === 0) {
+            frame.close();
+            return;
+          }
+          if (frame.timestamp < expectedFrames[0] - 1) {
+            if (lastFrame) {
+              lastFrame.close();
+            }
+            lastFrame = frame;
+            return;
+          }
+          if (expectedFrames[0] + 6667 < frame.timestamp && lastFrame) {
+            onFrame(lastFrame);
+            lastFrameEmitted = lastFrame;
+            expectedFrames.shift();
+            if (lastFrame) {
+              lastFrame.close();
+            }
+            lastFrame = frame;
+            return;
+          }
+          expectedFrames.shift();
+          onFrame(frame);
+          if (lastFrame && lastFrame !== lastFrameEmitted) {
+            lastFrame.close();
+          }
+          lastFrameEmitted = frame;
+          lastFrame = frame;
+        },
+        onError: (e) => {
+          controller.abort();
+          try {
+            decoder.close();
+          } catch {}
+          resolvers.reject(e);
+        },
+        track
+      });
+      const queued = [];
+      const doProcess = async () => {
+        expectedFrames.push(timestampTargets.shift() * WEBCODECS_TIMESCALE);
+        while (queued.length > 0) {
+          const sam = queued.shift();
+          if (!sam) {
+            throw new Error("Sample is undefined");
+          }
+          await decoder.waitForQueueToBeLessThan(20);
+          Log.trace(logLevel, "Decoding sample", sam.timestamp);
+          await decoder.decode(sam);
+        }
+      };
+      return async (sample) => {
+        const nextTimestampWeWant = timestampTargets[0];
+        Log.trace(logLevel, `Received ${sample.type} sample with dts`, sample.decodingTimestamp, "and cts", sample.timestamp);
+        if (sample.type === "key") {
+          await decoder.flush();
+          queued.length = 0;
+        }
+        queued.push(sample);
+        if (sample.decodingTimestamp >= timestampTargets[timestampTargets.length - 1] * WEBCODECS_TIMESCALE) {
+          await doProcess();
+          await decoder.flush();
+          controller.abort();
+          return;
+        }
+        if (nextTimestampWeWant === undefined) {
+          throw new Error("this should not happen");
+        }
+        if (sample.decodingTimestamp >= nextTimestampWeWant * WEBCODECS_TIMESCALE) {
+          await doProcess();
+          if (timestampTargets.length === 0) {
+            await decoder.flush();
+            controller.abort();
+          }
+        }
+        return async () => {
+          await doProcess();
+          await decoder.flush();
+          if (lastFrame && lastFrameEmitted !== lastFrame) {
+            lastFrame.close();
+          }
+        };
+      };
+    }
+  }).then(() => {
+    resolvers.resolve();
+  }).catch((e) => {
+    if (!hasBeenAborted(e)) {
+      resolvers.reject(e);
+    } else {
+      resolvers.resolve();
+    }
+  }).finally(() => {
+    if (lastFrame && lastFrameEmitted !== lastFrame) {
+      lastFrame.close();
+    }
+    signal?.removeEventListener("abort", abortListener);
+  });
+  return resolvers.promise;
+};
+
+// src/extract-frames-on-web-worker.ts
+var extractFramesOnWebWorker = (options) => {
+  return internalExtractFrames({
+    ...options,
+    signal: options.signal ?? null,
+    acknowledgeRemotionLicense: options.acknowledgeRemotionLicense ?? false,
+    logLevel: options.logLevel ?? "info",
+    parseMediaImplementation: parseMediaOnWebWorker
+  });
+};
+export {
+  extractFramesOnWebWorker
+};

package/dist/extract-frames-on-web-worker.d.ts

@@ -0,0 +1,12 @@
+import { type MediaParserLogLevel } from '@remotion/media-parser';
+import { type ExtractFramesTimestampsInSecondsFn } from './internal-extract-frames';
+export type ExtractFramesOnWebWorkerProps = {
+    src: string;
+    timestampsInSeconds: number[] | ExtractFramesTimestampsInSecondsFn;
+    onFrame: (frame: VideoFrame) => void;
+    signal?: AbortSignal;
+    acknowledgeRemotionLicense?: boolean;
+    logLevel?: MediaParserLogLevel;
+};
+export type ExtractFramesOnWebWorker = (options: ExtractFramesOnWebWorkerProps) => Promise<void>;
+export declare const extractFramesOnWebWorker: ExtractFramesOnWebWorker;

package/dist/extract-frames-on-web-worker.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractFramesOnWebWorker = void 0;
+const worker_1 = require("@remotion/media-parser/worker");
+const internal_extract_frames_1 = require("./internal-extract-frames");
+const extractFramesOnWebWorker = (options) => {
+    return (0, internal_extract_frames_1.internalExtractFrames)({
+        ...options,
+        signal: options.signal ?? null,
+        acknowledgeRemotionLicense: options.acknowledgeRemotionLicense ?? false,
+        logLevel: options.logLevel ?? 'info',
+        parseMediaImplementation: worker_1.parseMediaOnWebWorker,
+    });
+};
+exports.extractFramesOnWebWorker = extractFramesOnWebWorker;

package/dist/extract-frames-on-worker.js

@@ -0,0 +1 @@
+"use strict";

package/dist/extract-frames.d.ts

@@ -1,14 +1,12 @@
-import type { MediaParserContainer, MediaParserLogLevel, MediaParserVideoTrack } from '@remotion/media-parser';
-export type ExtractFramesTimestampsInSecondsFn = (options: {
-    track: MediaParserVideoTrack;
-    container: MediaParserContainer;
-    durationInSeconds: number | null;
-}) => Promise<number[]> | number[];
-export declare const extractFrames: (options: {
+import { type MediaParserLogLevel } from '@remotion/media-parser';
+import { type ExtractFramesTimestampsInSecondsFn } from './internal-extract-frames';
+export type ExtractFramesProps = {
     src: string;
     timestampsInSeconds: number[] | ExtractFramesTimestampsInSecondsFn;
     onFrame: (frame: VideoFrame) => void;
     signal?: AbortSignal;
     acknowledgeRemotionLicense?: boolean;
     logLevel?: MediaParserLogLevel;
-}) => Promise<void>;
+};
+export type ExtractFrames = (options: ExtractFramesProps) => Promise<void>;
+export declare const extractFrames: ExtractFrames;

package/dist/extract-frames.js

@@ -2,156 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.extractFrames = void 0;
 const media_parser_1 = require("@remotion/media-parser");
-const worker_1 = require("@remotion/media-parser/worker");
-const create_video_decoder_1 = require("./create-video-decoder");
-const with_resolvers_1 = require("./create/with-resolvers");
-const log_1 = require("./log");
-const internalExtractFrames = ({ src, onFrame, signal, timestampsInSeconds, acknowledgeRemotionLicense, logLevel, }) => {
-    const controller = (0, media_parser_1.mediaParserController)();
-    const expectedFrames = [];
-    const resolvers = (0, with_resolvers_1.withResolvers)();
-    const abortListener = () => {
-        controller.abort();
-        resolvers.reject(new media_parser_1.MediaParserAbortError('Aborted by user'));
-    };
-    signal?.addEventListener('abort', abortListener, { once: true });
-    let dur = null;
-    let lastFrame;
-    let lastFrameEmitted;
-    (0, worker_1.parseMediaOnWebWorker)({
-        src: new URL(src, window.location.href),
-        acknowledgeRemotionLicense,
-        controller,
-        logLevel,
-        onDurationInSeconds(durationInSeconds) {
-            dur = durationInSeconds;
-        },
-        onVideoTrack: async ({ track, container }) => {
-            const timestampTargetsUnsorted = typeof timestampsInSeconds === 'function'
-                ? await timestampsInSeconds({
-                    track,
-                    container,
-                    durationInSeconds: dur,
-                })
-                : timestampsInSeconds;
-            const timestampTargets = timestampTargetsUnsorted.sort((a, b) => a - b);
-            if (timestampTargets.length === 0) {
-                throw new Error('expected at least one timestamp to extract but found zero');
-            }
-            controller.seek(timestampTargets[0]);
-            const decoder = (0, create_video_decoder_1.createVideoDecoder)({
-                onFrame: (frame) => {
-                    log_1.Log.trace(logLevel, 'Received frame with timestamp', frame.timestamp);
-                    if (expectedFrames.length === 0) {
-                        frame.close();
-                        return;
-                    }
-                    if (frame.timestamp < expectedFrames[0] - 1) {
-                        if (lastFrame) {
-                            lastFrame.close();
-                        }
-                        lastFrame = frame;
-                        return;
-                    }
-                    // A WebM might have a timestamp of 67000 but we request 66666
-                    // See a test with this problem in it-tests/rendering/frame-accuracy.test.ts
-                    // Solution: We allow a 10.000ms - 3.333ms = 6.667ms difference between the requested timestamp and the actual timestamp
-                    if (expectedFrames[0] + 6667 < frame.timestamp && lastFrame) {
-                        onFrame(lastFrame);
-                        lastFrameEmitted = lastFrame;
-                        expectedFrames.shift();
-                        lastFrame = frame;
-                        return;
-                    }
-                    expectedFrames.shift();
-                    onFrame(frame);
-                    lastFrameEmitted = frame;
-                    lastFrame = frame;
-                },
-                onError: (e) => {
-                    controller.abort();
-                    try {
-                        decoder.close();
-                    }
-                    catch { }
-                    resolvers.reject(e);
-                },
-                track,
-            });
-            const queued = [];
-            const doProcess = async () => {
-                expectedFrames.push(timestampTargets.shift() * media_parser_1.WEBCODECS_TIMESCALE);
-                while (queued.length > 0) {
-                    const sam = queued.shift();
-                    if (!sam) {
-                        throw new Error('Sample is undefined');
-                    }
-                    await decoder.waitForQueueToBeLessThan(10);
-                    log_1.Log.trace(logLevel, 'Decoding sample', sam.timestamp);
-                    await decoder.decode(sam);
-                }
-            };
-            return async (sample) => {
-                const nextTimestampWeWant = timestampTargets[0];
-                log_1.Log.trace(logLevel, 'Received sample with dts', sample.decodingTimestamp, 'and cts', sample.timestamp);
-                if (sample.type === 'key') {
-                    await decoder.flush();
-                    queued.length = 0;
-                }
-                queued.push(sample);
-                if (sample.decodingTimestamp >=
-                    timestampTargets[timestampTargets.length - 1] * media_parser_1.WEBCODECS_TIMESCALE) {
-                    await doProcess();
-                    await decoder.flush();
-                    controller.abort();
-                    return;
-                }
-                if (nextTimestampWeWant === undefined) {
-                    throw new Error('this should not happen');
-                }
-                if (sample.decodingTimestamp >=
-                    nextTimestampWeWant * media_parser_1.WEBCODECS_TIMESCALE) {
-                    await doProcess();
-                    if (timestampTargets.length === 0) {
-                        await decoder.flush();
-                        controller.abort();
-                    }
-                }
-                return async () => {
-                    await doProcess();
-                    await decoder.flush();
-                    if (lastFrame && lastFrameEmitted !== lastFrame) {
-                        lastFrame.close();
-                    }
-                };
-            };
-        },
-    })
-        .then(() => {
-        resolvers.resolve();
-    })
-        .catch((e) => {
-        if (!(0, media_parser_1.hasBeenAborted)(e)) {
-            resolvers.reject(e);
-        }
-        else {
-            resolvers.resolve();
-        }
-    })
-        .finally(() => {
-        if (lastFrame && lastFrameEmitted !== lastFrame) {
-            lastFrame.close();
-        }
-        signal?.removeEventListener('abort', abortListener);
-    });
-    return resolvers.promise;
-};
+const internal_extract_frames_1 = require("./internal-extract-frames");
 const extractFrames = (options) => {
-    return internalExtractFrames({
+    return (0, internal_extract_frames_1.internalExtractFrames)({
         ...options,
         signal: options.signal ?? null,
         acknowledgeRemotionLicense: options.acknowledgeRemotionLicense ?? false,
         logLevel: options.logLevel ?? 'info',
+        parseMediaImplementation: media_parser_1.parseMedia,
     });
 };
 exports.extractFrames = extractFrames;

package/dist/index.d.ts

@@ -13,8 +13,7 @@ export { createVideoDecoder } from './create-video-decoder';
 export type { WebCodecsVideoDecoder } from './create-video-decoder';
 export { defaultOnAudioTrackHandler } from './default-on-audio-track-handler';
 export { defaultOnVideoTrackHandler } from './default-on-video-track-handler';
-export { extractFrames } from './extract-frames';
-export type { ExtractFramesTimestampsInSecondsFn } from './extract-frames';
+export { extractFrames, ExtractFrames, ExtractFramesProps, } from './extract-frames';
 export { getAvailableAudioCodecs } from './get-available-audio-codecs';
 export type { ConvertMediaAudioCodec } from './get-available-audio-codecs';
 export { getAvailableContainers } from './get-available-containers';
@@ -24,6 +23,7 @@ export type { ConvertMediaVideoCodec } from './get-available-video-codecs';
 export { getDefaultAudioCodec } from './get-default-audio-codec';
 export { getDefaultVideoCodec } from './get-default-video-codec';
 export { getPartialAudioData, GetPartialAudioDataProps, } from './get-partial-audio-data';
+export type { ExtractFramesTimestampsInSecondsFn } from './internal-extract-frames';
 export type { AudioOperation, ConvertMediaOnAudioTrackHandler, } from './on-audio-track-handler';
 export type { ConvertMediaOnVideoTrackHandler, VideoOperation, } from './on-video-track-handler';
 export type { ResizeOperation } from './resizing/mode';

package/dist/internal-extract-frames.d.ts

@@ -0,0 +1,16 @@
+import type { MediaParserContainer, MediaParserLogLevel, MediaParserVideoTrack, ParseMedia } from '@remotion/media-parser';
+import type { ParseMediaOnWorker } from '@remotion/media-parser/worker';
+export type ExtractFramesTimestampsInSecondsFn = (options: {
+    track: MediaParserVideoTrack;
+    container: MediaParserContainer;
+    durationInSeconds: number | null;
+}) => Promise<number[]> | number[];
+export declare const internalExtractFrames: ({ src, onFrame, signal, timestampsInSeconds, acknowledgeRemotionLicense, logLevel, parseMediaImplementation, }: {
+    timestampsInSeconds: number[] | ExtractFramesTimestampsInSecondsFn;
+    src: string;
+    onFrame: (frame: VideoFrame) => void;
+    signal: AbortSignal | null;
+    acknowledgeRemotionLicense: boolean;
+    logLevel: MediaParserLogLevel;
+    parseMediaImplementation: ParseMediaOnWorker | ParseMedia;
+}) => Promise<void>;

package/dist/internal-extract-frames.js

@@ -0,0 +1,156 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.internalExtractFrames = void 0;
+const media_parser_1 = require("@remotion/media-parser");
+const create_video_decoder_1 = require("./create-video-decoder");
+const with_resolvers_1 = require("./create/with-resolvers");
+const log_1 = require("./log");
+const internalExtractFrames = ({ src, onFrame, signal, timestampsInSeconds, acknowledgeRemotionLicense, logLevel, parseMediaImplementation, }) => {
+    const controller = (0, media_parser_1.mediaParserController)();
+    const expectedFrames = [];
+    const resolvers = (0, with_resolvers_1.withResolvers)();
+    const abortListener = () => {
+        controller.abort();
+        resolvers.reject(new media_parser_1.MediaParserAbortError('Aborted by user'));
+    };
+    signal?.addEventListener('abort', abortListener, { once: true });
+    let dur = null;
+    let lastFrame;
+    let lastFrameEmitted;
+    parseMediaImplementation({
+        src: new URL(src, window.location.href),
+        acknowledgeRemotionLicense,
+        controller,
+        logLevel,
+        onDurationInSeconds(durationInSeconds) {
+            dur = durationInSeconds;
+        },
+        onVideoTrack: async ({ track, container }) => {
+            const timestampTargetsUnsorted = typeof timestampsInSeconds === 'function'
+                ? await timestampsInSeconds({
+                    track,
+                    container,
+                    durationInSeconds: dur,
+                })
+                : timestampsInSeconds;
+            const timestampTargets = timestampTargetsUnsorted.sort((a, b) => a - b);
+            if (timestampTargets.length === 0) {
+                throw new Error('expected at least one timestamp to extract but found zero');
+            }
+            controller.seek(timestampTargets[0]);
+            const decoder = (0, create_video_decoder_1.createVideoDecoder)({
+                onFrame: (frame) => {
+                    log_1.Log.trace(logLevel, 'Received frame with timestamp', frame.timestamp);
+                    if (expectedFrames.length === 0) {
+                        frame.close();
+                        return;
+                    }
+                    if (frame.timestamp < expectedFrames[0] - 1) {
+                        if (lastFrame) {
+                            lastFrame.close();
+                        }
+                        lastFrame = frame;
+                        return;
+                    }
+                    // A WebM might have a timestamp of 67000 but we request 66666
+                    // See a test with this problem in it-tests/rendering/frame-accuracy.test.ts
+                    // Solution: We allow a 10.000ms - 3.333ms = 6.667ms difference between the requested timestamp and the actual timestamp
+                    if (expectedFrames[0] + 6667 < frame.timestamp && lastFrame) {
+                        onFrame(lastFrame);
+                        lastFrameEmitted = lastFrame;
+                        expectedFrames.shift();
+                        if (lastFrame) {
+                            lastFrame.close();
+                        }
+                        lastFrame = frame;
+                        return;
+                    }
+                    expectedFrames.shift();
+                    onFrame(frame);
+                    if (lastFrame && lastFrame !== lastFrameEmitted) {
+                        lastFrame.close();
+                    }
+                    lastFrameEmitted = frame;
+                    lastFrame = frame;
+                },
+                onError: (e) => {
+                    controller.abort();
+                    try {
+                        decoder.close();
+                    }
+                    catch {
+                        // Ignore
+                    }
+                    resolvers.reject(e);
+                },
+                track,
+            });
+            const queued = [];
+            const doProcess = async () => {
+                expectedFrames.push(timestampTargets.shift() * media_parser_1.WEBCODECS_TIMESCALE);
+                while (queued.length > 0) {
+                    const sam = queued.shift();
+                    if (!sam) {
+                        throw new Error('Sample is undefined');
+                    }
+                    await decoder.waitForQueueToBeLessThan(20);
+                    log_1.Log.trace(logLevel, 'Decoding sample', sam.timestamp);
+                    await decoder.decode(sam);
+                }
+            };
+            return async (sample) => {
+                const nextTimestampWeWant = timestampTargets[0];
+                log_1.Log.trace(logLevel, `Received ${sample.type} sample with dts`, sample.decodingTimestamp, 'and cts', sample.timestamp);
+                if (sample.type === 'key') {
+                    await decoder.flush();
+                    queued.length = 0;
+                }
+                queued.push(sample);
+                if (sample.decodingTimestamp >=
+                    timestampTargets[timestampTargets.length - 1] * media_parser_1.WEBCODECS_TIMESCALE) {
+                    await doProcess();
+                    await decoder.flush();
+                    controller.abort();
+                    return;
+                }
+                if (nextTimestampWeWant === undefined) {
+                    throw new Error('this should not happen');
+                }
+                if (sample.decodingTimestamp >=
+                    nextTimestampWeWant * media_parser_1.WEBCODECS_TIMESCALE) {
+                    await doProcess();
+                    if (timestampTargets.length === 0) {
+                        await decoder.flush();
+                        controller.abort();
+                    }
+                }
+                return async () => {
+                    await doProcess();
+                    await decoder.flush();
+                    if (lastFrame && lastFrameEmitted !== lastFrame) {
+                        lastFrame.close();
+                    }
+                };
+            };
+        },
+    })
+        .then(() => {
+        resolvers.resolve();
+    })
+        .catch((e) => {
+        if (!(0, media_parser_1.hasBeenAborted)(e)) {
+            resolvers.reject(e);
+        }
+        else {
+            resolvers.resolve();
+        }
+    })
+        .finally(() => {
+        if (lastFrame && lastFrameEmitted !== lastFrame) {
+            lastFrame.close();
+        }
+        signal?.removeEventListener('abort', abortListener);
+    });
+    return resolvers.promise;
+};
+exports.internalExtractFrames = internalExtractFrames;

package/dist/worker.d.ts

@@ -0,0 +1 @@
+export { ExtractFramesOnWebWorker, ExtractFramesOnWebWorkerProps, extractFramesOnWebWorker, } from './extract-frames-on-web-worker';

package/dist/worker.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractFramesOnWebWorker = void 0;
+var extract_frames_on_web_worker_1 = require("./extract-frames-on-web-worker");
+Object.defineProperty(exports, "extractFramesOnWebWorker", { enumerable: true, get: function () { return extract_frames_on_web_worker_1.extractFramesOnWebWorker; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/webcodecs",
-  "version": "4.0.330",
+  "version": "4.0.331",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "module": "dist/esm/index.mjs",
@@ -19,8 +19,8 @@
   "author": "Jonny Burger <jonny@remotion.dev>",
   "license": "Remotion License (See https://remotion.dev/docs/webcodecs#license)",
   "dependencies": {
-    "@remotion/media-parser": "4.0.330",
-    "@remotion/licensing": "4.0.330"
+    "@remotion/media-parser": "4.0.331",
+    "@remotion/licensing": "4.0.331"
   },
   "peerDependencies": {},
   "devDependencies": {
@@ -29,8 +29,8 @@
     "vite": "5.4.19",
     "@playwright/test": "1.51.1",
     "eslint": "9.19.0",
-    "@remotion/eslint-config-internal": "4.0.330",
-    "@remotion/example-videos": "4.0.330"
+    "@remotion/example-videos": "4.0.331",
+    "@remotion/eslint-config-internal": "4.0.331"
   },
   "keywords": [],
   "publishConfig": {
@@ -55,6 +55,12 @@
       "module": "./dist/esm/buffer.mjs",
       "import": "./dist/esm/buffer.mjs"
     },
+    "./worker": {
+      "types": "./dist/worker.d.ts",
+      "require": "./dist/worker.js",
+      "module": "./dist/esm/worker.mjs",
+      "import": "./dist/esm/worker.mjs"
+    },
     "./package.json": "./package.json"
   },
   "typesVersions": {
@@ -62,6 +68,9 @@
       "web-fs": [
         "dist/writers/web-fs.d.ts"
       ],
+      "worker": [
+        "dist/worker.d.ts"
+      ],
       "buffer": [
         "dist/writers/buffer.d.ts"
       ]