@remotion/webcodecs 4.0.230 → 4.0.231

package/README.md

@@ -15,4 +15,15 @@ Remove the `^` character from the version number to use the exact version.
  
 ## Usage
  
-This is an internal package and has no documentation.
+See the [documentation](https://remotion.dev/webcodecs) for more information.
+
+## License
+This package is licensed under the [/docs/license](Remotion License).
+We consider a team of 4 or more people a "company".
+
+**For "companies"**: A Remotion Company license needs to be obtained to use this package.
+In a future version of `@remotion/webcodecs`, this package will also require the purchase of a newly created "WebCodecs Conversion Seat". [Get in touch](https://remotion.dev/contact) with us if you are planning to use this package.
+
+**For individuals and teams up to 3**: You can use this package for free.
+
+This is a short, non-binding explanation of our license. See the [https://remotion.dev/docs/license](License) itself for more details.

package/dist/audio-encoder.js

@@ -50,7 +50,7 @@ const createAudioEncoder = ({ onChunk, onError, codec, signal, config: audioEnco
         if (encoder.state === 'closed') {
             return;
         }
-        await ioSynchronizer.waitFor({ unemitted: 2, _unprocessed: 2 });
+        await ioSynchronizer.waitFor({ unemitted: 20, _unprocessed: 20 });
         // @ts-expect-error - can have changed in the meanwhile
         if (encoder.state === 'closed') {
             return;

package/dist/browser-quirks.d.ts

@@ -0,0 +1,2 @@
+export declare const isFirefox: () => boolean;
+export declare const isSafari: () => boolean;

package/dist/browser-quirks.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isSafari = exports.isFirefox = void 0;
+const isFirefox = () => {
+    return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+};
+exports.isFirefox = isFirefox;
+const isSafari = () => {
+    return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+};
+exports.isSafari = isSafari;

package/dist/convert-media.d.ts

@@ -6,7 +6,7 @@ import type { LogLevel, Options, ParseMediaDynamicOptions, ParseMediaFields, Par
 import type { ConvertMediaAudioCodec, ConvertMediaContainer, ConvertMediaVideoCodec } from './codec-id';
 import { type ConvertMediaOnAudioTrackHandler } from './on-audio-track-handler';
 import { type ConvertMediaOnVideoTrackHandler } from './on-video-track-handler';
-export type ConvertMediaState = {
+export type ConvertMediaProgress = {
     decodedVideoFrames: number;
     decodedAudioFrames: number;
     encodedVideoFrames: number;
@@ -19,17 +19,18 @@ export type ConvertMediaState = {
 export type ConvertMediaResult = {
     save: () => Promise<Blob>;
     remove: () => Promise<void>;
+    finalState: ConvertMediaProgress;
 };
-export type ConvertMediaOnMediaStateUpdate = (state: ConvertMediaState) => void;
+export type ConvertMediaOnProgress = (state: ConvertMediaProgress) => void;
 export type ConvertMediaOnVideoFrame = (options: {
     frame: VideoFrame;
     track: VideoTrack;
 }) => Promise<VideoFrame> | VideoFrame;
-export declare const convertMedia: <F extends Options<ParseMediaFields>>({ src, onVideoFrame, onMediaStateUpdate: onMediaStateDoNoCallDirectly, audioCodec, container, videoCodec, signal: userPassedAbortSignal, onAudioTrack: userAudioResolver, onVideoTrack: userVideoResolver, reader, fields, logLevel, writer, ...more }: {
+export declare const convertMedia: <F extends Options<ParseMediaFields>>({ src, onVideoFrame, onProgress: onProgressDoNotCallDirectly, audioCodec, container, videoCodec, signal: userPassedAbortSignal, onAudioTrack: userAudioResolver, onVideoTrack: userVideoResolver, reader, fields, logLevel, writer, progressIntervalInMs, ...more }: {
     src: ParseMediaOptions<F>["src"];
     container: ConvertMediaContainer;
     onVideoFrame?: ConvertMediaOnVideoFrame;
-    onMediaStateUpdate?: ConvertMediaOnMediaStateUpdate;
+    onProgress?: ConvertMediaOnProgress;
     videoCodec?: ConvertMediaVideoCodec;
     audioCodec?: ConvertMediaAudioCodec;
     signal?: AbortSignal;
@@ -38,4 +39,5 @@ export declare const convertMedia: <F extends Options<ParseMediaFields>>({ src,
     reader?: ParseMediaOptions<F>["reader"];
     logLevel?: LogLevel;
     writer?: WriterInterface;
+    progressIntervalInMs?: number;
 } & ParseMediaDynamicOptions<F>) => Promise<ConvertMediaResult>;

package/dist/convert-media.js

@@ -12,10 +12,13 @@ const media_parser_1 = require("@remotion/media-parser");
 const auto_select_writer_1 = require("./auto-select-writer");
 const calculate_progress_1 = require("./calculate-progress");
 const error_cause_1 = __importDefault(require("./error-cause"));
+const generate_output_filename_1 = require("./generate-output-filename");
 const on_audio_track_1 = require("./on-audio-track");
 const on_video_track_1 = require("./on-video-track");
+const throttled_state_update_1 = require("./throttled-state-update");
 const with_resolvers_1 = require("./with-resolvers");
-const convertMedia = async function ({ src, onVideoFrame, onMediaStateUpdate: onMediaStateDoNoCallDirectly, audioCodec, container, videoCodec, signal: userPassedAbortSignal, onAudioTrack: userAudioResolver, onVideoTrack: userVideoResolver, reader, fields, logLevel = 'info', writer, ...more }) {
+const convertMedia = async function ({ src, onVideoFrame, onProgress: onProgressDoNotCallDirectly, audioCodec, container, videoCodec, signal: userPassedAbortSignal, onAudioTrack: userAudioResolver, onVideoTrack: userVideoResolver, reader, fields, logLevel = 'info', writer, progressIntervalInMs, ...more }) {
+    var _a, _b;
     if (userPassedAbortSignal === null || userPassedAbortSignal === void 0 ? void 0 : userPassedAbortSignal.aborted) {
         return Promise.reject(new error_cause_1.default('Aborted'));
     }
@@ -37,49 +40,49 @@ const convertMedia = async function ({ src, onVideoFrame, onMediaStateUpdate: on
         abortConversion(new error_cause_1.default('Conversion aborted by user'));
     };
     userPassedAbortSignal === null || userPassedAbortSignal === void 0 ? void 0 : userPassedAbortSignal.addEventListener('abort', onUserAbort);
-    const convertMediaState = {
-        decodedAudioFrames: 0,
-        decodedVideoFrames: 0,
-        encodedVideoFrames: 0,
-        encodedAudioFrames: 0,
-        bytesWritten: 0,
-        millisecondsWritten: 0,
-        expectedOutputDurationInMs: null,
-        overallProgress: 0,
-    };
-    const onMediaStateUpdate = (newState) => {
-        if (controller.signal.aborted) {
-            return;
-        }
-        onMediaStateDoNoCallDirectly === null || onMediaStateDoNoCallDirectly === void 0 ? void 0 : onMediaStateDoNoCallDirectly(newState);
-    };
     const creator = container === 'webm'
         ? media_parser_1.MediaParserInternals.createMatroskaMedia
         : media_parser_1.MediaParserInternals.createIsoBaseMedia;
+    const throttledState = (0, throttled_state_update_1.throttledStateUpdate)({
+        updateFn: onProgressDoNotCallDirectly !== null && onProgressDoNotCallDirectly !== void 0 ? onProgressDoNotCallDirectly : null,
+        everyMilliseconds: progressIntervalInMs !== null && progressIntervalInMs !== void 0 ? progressIntervalInMs : 100,
+        signal: controller.signal,
+    });
     const state = await creator({
+        filename: (0, generate_output_filename_1.generateOutputFilename)(src, container),
         writer: await (0, auto_select_writer_1.autoSelectWriter)(writer, logLevel),
         onBytesProgress: (bytesWritten) => {
-            convertMediaState.bytesWritten = bytesWritten;
-            onMediaStateUpdate === null || onMediaStateUpdate === void 0 ? void 0 : onMediaStateUpdate(convertMediaState);
+            var _a;
+            (_a = throttledState.update) === null || _a === void 0 ? void 0 : _a.call(throttledState, (prevState) => {
+                return {
+                    ...prevState,
+                    bytesWritten,
+                };
+            });
         },
         onMillisecondsProgress: (millisecondsWritten) => {
-            if (millisecondsWritten > convertMediaState.millisecondsWritten) {
-                convertMediaState.millisecondsWritten = millisecondsWritten;
-                convertMediaState.overallProgress = (0, calculate_progress_1.calculateProgress)({
-                    millisecondsWritten: convertMediaState.millisecondsWritten,
-                    expectedOutputDurationInMs: convertMediaState.expectedOutputDurationInMs,
-                });
-                onMediaStateUpdate === null || onMediaStateUpdate === void 0 ? void 0 : onMediaStateUpdate(convertMediaState);
-            }
+            var _a;
+            (_a = throttledState.update) === null || _a === void 0 ? void 0 : _a.call(throttledState, (prevState) => {
+                if (millisecondsWritten > prevState.millisecondsWritten) {
+                    return {
+                        ...prevState,
+                        millisecondsWritten,
+                        overallProgress: (0, calculate_progress_1.calculateProgress)({
+                            millisecondsWritten: prevState.millisecondsWritten,
+                            expectedOutputDurationInMs: prevState.expectedOutputDurationInMs,
+                        }),
+                    };
+                }
+                return prevState;
+            });
         },
         logLevel,
     });
     const onVideoTrack = (0, on_video_track_1.makeVideoTrackHandler)({
         state,
         onVideoFrame: onVideoFrame !== null && onVideoFrame !== void 0 ? onVideoFrame : null,
-        onMediaStateUpdate: onMediaStateUpdate !== null && onMediaStateUpdate !== void 0 ? onMediaStateUpdate : null,
+        onMediaStateUpdate: (_a = throttledState.update) !== null && _a !== void 0 ? _a : null,
         abortConversion,
-        convertMediaState,
         controller,
         defaultVideoCodec: videoCodec !== null && videoCodec !== void 0 ? videoCodec : null,
         onVideoTrack: userVideoResolver !== null && userVideoResolver !== void 0 ? userVideoResolver : null,
@@ -90,8 +93,7 @@ const convertMedia = async function ({ src, onVideoFrame, onMediaStateUpdate: on
         abortConversion,
         defaultAudioCodec: audioCodec !== null && audioCodec !== void 0 ? audioCodec : null,
         controller,
-        convertMediaState,
-        onMediaStateUpdate: onMediaStateUpdate !== null && onMediaStateUpdate !== void 0 ? onMediaStateUpdate : null,
+        onMediaStateUpdate: (_b = throttledState.update) !== null && _b !== void 0 ? _b : null,
         state,
         onAudioTrack: userAudioResolver !== null && userAudioResolver !== void 0 ? userAudioResolver : null,
         logLevel,
@@ -110,6 +112,7 @@ const convertMedia = async function ({ src, onVideoFrame, onMediaStateUpdate: on
         reader,
         ...more,
         onDurationInSeconds: (durationInSeconds) => {
+            var _a;
             if (durationInSeconds === null) {
                 return null;
             }
@@ -118,22 +121,33 @@ const convertMedia = async function ({ src, onVideoFrame, onMediaStateUpdate: on
                 casted.onDurationInSeconds(durationInSeconds);
             }
             const expectedOutputDurationInMs = durationInSeconds * 1000;
-            convertMediaState.expectedOutputDurationInMs = expectedOutputDurationInMs;
-            convertMediaState.overallProgress = (0, calculate_progress_1.calculateProgress)({
-                millisecondsWritten: convertMediaState.millisecondsWritten,
-                expectedOutputDurationInMs,
+            (_a = throttledState.update) === null || _a === void 0 ? void 0 : _a.call(throttledState, (prevState) => {
+                return {
+                    ...prevState,
+                    expectedOutputDurationInMs,
+                    overallProgress: (0, calculate_progress_1.calculateProgress)({
+                        millisecondsWritten: prevState.millisecondsWritten,
+                        expectedOutputDurationInMs,
+                    }),
+                };
             });
-            onMediaStateUpdate(convertMediaState);
         },
     })
         .then(() => {
         return state.waitForFinish();
     })
         .then(() => {
-        resolve({ save: state.save, remove: state.remove });
+        resolve({
+            save: state.save,
+            remove: state.remove,
+            finalState: throttledState.get(),
+        });
     })
         .catch((err) => {
         reject(err);
+    })
+        .finally(() => {
+        throttledState.stopAndGetLastProgress();
     });
     return getPromiseToImmediatelyReturn().finally(() => {
         userPassedAbortSignal === null || userPassedAbortSignal === void 0 ? void 0 : userPassedAbortSignal.removeEventListener('abort', onUserAbort);

package/dist/convert-to-correct-videoframe.d.ts

@@ -0,0 +1,9 @@
+import type { ConvertMediaVideoCodec } from './codec-id';
+export declare const needsToCorrectVideoFrame: ({ videoFrame, outputCodec, }: {
+    videoFrame: VideoFrame;
+    outputCodec: ConvertMediaVideoCodec;
+}) => boolean;
+export declare const convertToCorrectVideoFrame: ({ videoFrame, outputCodec, }: {
+    videoFrame: VideoFrame;
+    outputCodec: ConvertMediaVideoCodec;
+}) => VideoFrame;

package/dist/convert-to-correct-videoframe.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertToCorrectVideoFrame = exports.needsToCorrectVideoFrame = void 0;
+const browser_quirks_1 = require("./browser-quirks");
+const needsToCorrectVideoFrame = ({ videoFrame, outputCodec, }) => {
+    return (0, browser_quirks_1.isFirefox)() && videoFrame.format === 'BGRX' && outputCodec === 'h264';
+};
+exports.needsToCorrectVideoFrame = needsToCorrectVideoFrame;
+const convertToCorrectVideoFrame = ({ videoFrame, outputCodec, }) => {
+    if (!(0, exports.needsToCorrectVideoFrame)({ videoFrame, outputCodec })) {
+        return videoFrame;
+    }
+    const canvas = new OffscreenCanvas(videoFrame.displayWidth, videoFrame.displayHeight);
+    canvas.width = videoFrame.displayWidth;
+    canvas.height = videoFrame.displayHeight;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        throw new Error('Could not get 2d context');
+    }
+    ctx.drawImage(videoFrame, 0, 0);
+    return new VideoFrame(canvas, {
+        displayHeight: videoFrame.displayHeight,
+        displayWidth: videoFrame.displayWidth,
+        duration: videoFrame.duration,
+        timestamp: videoFrame.timestamp,
+    });
+};
+exports.convertToCorrectVideoFrame = convertToCorrectVideoFrame;

package/dist/esm/index.mjs

@@ -1,3 +1,18 @@
+// src/set-remotion-imported.ts
+import { VERSION } from "@remotion/media-parser";
+var setRemotionImported = () => {
+  if (typeof globalThis === "undefined") {
+    return;
+  }
+  if (globalThis.remotion_imported) {
+    return;
+  }
+  globalThis.remotion_imported = VERSION;
+  if (typeof window !== "undefined") {
+    window.remotion_imported = `${VERSION}-webcodecs`;
+  }
+};
+
 // src/log.ts
 import { MediaParserInternals } from "@remotion/media-parser";
 var { Log } = MediaParserInternals;
@@ -267,7 +282,7 @@ var createAudioEncoder = ({
     if (encoder.state === "closed") {
       return;
     }
-    await ioSynchronizer.waitFor({ unemitted: 2, _unprocessed: 2 });
+    await ioSynchronizer.waitFor({ unemitted: 20, _unprocessed: 20 });
     if (encoder.state === "closed") {
       return;
     }
@@ -403,6 +418,14 @@ var getVideoDecoderConfigWithHardwareAcceleration = async (config) => {
   return null;
 };
 
+// src/browser-quirks.ts
+var isFirefox = () => {
+  return navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
+};
+var isSafari = () => {
+  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+};
+
 // src/choose-correct-avc1-profile.ts
 var chooseCorrectAvc1Profile = ({
   width,
@@ -451,7 +474,8 @@ var getVideoEncoderConfig = async ({
   const config = {
     codec: codec === "h264" ? chooseCorrectAvc1Profile({ fps, height, width }) : codec === "vp9" ? "vp09.00.10.08" : codec,
     height,
-    width
+    width,
+    bitrate: isSafari() ? 3000000 : undefined
   };
   const hardware = {
     ...config,
@@ -544,6 +568,14 @@ var calculateProgress = ({
 // src/error-cause.ts
 var error_cause_default = Error;
 
+// src/generate-output-filename.ts
+var generateOutputFilename = (source, container) => {
+  const filename = typeof source === "string" ? source : source instanceof File ? source.name : "converted";
+  const behindSlash = filename.split("/").pop();
+  const withoutExtension = behindSlash.split(".").slice(0, -1).join(".");
+  return `${withoutExtension}.${container}`;
+};
+
 // src/convert-encoded-chunk.ts
 var convertEncodedChunk = (chunk, trackId) => {
   const arr = new Uint8Array(chunk.byteLength);
@@ -614,7 +646,6 @@ var defaultOnAudioTrackHandler = async ({
 var makeAudioTrackHandler = ({
   state,
   defaultAudioCodec: audioCodec,
-  convertMediaState,
   controller,
   abortConversion,
   onMediaStateUpdate,
@@ -652,8 +683,12 @@ var makeAudioTrackHandler = ({
         timescale: track.timescale,
         codecPrivate: track.codecPrivate
       });
-      convertMediaState.encodedAudioFrames++;
-      onMediaStateUpdate?.({ ...convertMediaState });
+      onMediaStateUpdate?.((prevState) => {
+        return {
+          ...prevState,
+          encodedAudioFrames: prevState.encodedAudioFrames + 1
+        };
+      });
     };
   }
   const audioEncoderConfig = await getAudioEncoderConfig({
@@ -697,8 +732,12 @@ var makeAudioTrackHandler = ({
         timescale: track.timescale,
         codecPrivate
       });
-      convertMediaState.encodedAudioFrames++;
-      onMediaStateUpdate?.({ ...convertMediaState });
+      onMediaStateUpdate?.((prevState) => {
+        return {
+          ...prevState,
+          encodedAudioFrames: prevState.encodedAudioFrames + 1
+        };
+      });
     },
     onError: (err) => {
       abortConversion(new error_cause_default(`Audio encoder of ${track.trackId} failed (see .cause of this error)`, {
@@ -713,8 +752,12 @@ var makeAudioTrackHandler = ({
   const audioDecoder = createAudioDecoder({
     onFrame: async (frame) => {
       await audioEncoder.encodeFrame(frame);
-      convertMediaState.decodedAudioFrames++;
-      onMediaStateUpdate?.(convertMediaState);
+      onMediaStateUpdate?.((prevState) => {
+        return {
+          ...prevState,
+          decodedAudioFrames: prevState.decodedAudioFrames + 1
+        };
+      });
       frame.close();
     },
     onError(error) {
@@ -783,21 +826,50 @@ var defaultOnVideoTrackHandler = async ({
   return Promise.resolve({ type: "fail" });
 };
 
+// src/convert-to-correct-videoframe.ts
+var needsToCorrectVideoFrame = ({
+  videoFrame,
+  outputCodec
+}) => {
+  return isFirefox() && videoFrame.format === "BGRX" && outputCodec === "h264";
+};
+var convertToCorrectVideoFrame = ({
+  videoFrame,
+  outputCodec
+}) => {
+  if (!needsToCorrectVideoFrame({ videoFrame, outputCodec })) {
+    return videoFrame;
+  }
+  const canvas = new OffscreenCanvas(videoFrame.displayWidth, videoFrame.displayHeight);
+  canvas.width = videoFrame.displayWidth;
+  canvas.height = videoFrame.displayHeight;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("Could not get 2d context");
+  }
+  ctx.drawImage(videoFrame, 0, 0);
+  return new VideoFrame(canvas, {
+    displayHeight: videoFrame.displayHeight,
+    displayWidth: videoFrame.displayWidth,
+    duration: videoFrame.duration,
+    timestamp: videoFrame.timestamp
+  });
+};
+
 // src/on-frame.ts
 var onFrame = async ({
   frame,
   onVideoFrame,
   videoEncoder,
-  onMediaStateUpdate,
   track,
-  convertMediaState
+  outputCodec
 }) => {
   const newFrame = onVideoFrame ? await onVideoFrame({ frame, track }) : frame;
-  if (newFrame.codedHeight !== frame.codedHeight) {
-    throw new Error(`Returned VideoFrame of track ${track.trackId} has different codedHeight (${newFrame.codedHeight}) than the input frame (${frame.codedHeight})`);
+  if (newFrame.codedHeight !== frame.displayHeight) {
+    throw new Error(`Returned VideoFrame of track ${track.trackId} has different codedHeight (${newFrame.codedHeight}) than the input frame displayHeight (${frame.displayHeight})`);
   }
-  if (newFrame.codedWidth !== frame.codedWidth) {
-    throw new Error(`Returned VideoFrame of track ${track.trackId} has different codedWidth (${newFrame.codedWidth}) than the input frame (${frame.codedWidth})`);
+  if (newFrame.codedWidth !== frame.displayWidth) {
+    throw new Error(`Returned VideoFrame of track ${track.trackId} has different codedWidth (${newFrame.codedWidth}) than the input frame displayWidth (${frame.displayWidth})`);
   }
   if (newFrame.displayWidth !== frame.displayWidth) {
     throw new Error(`Returned VideoFrame of track ${track.trackId} has different displayWidth (${newFrame.displayWidth}) than the input frame (${newFrame.displayHeight})`);
@@ -811,13 +883,18 @@ var onFrame = async ({
   if (newFrame.duration !== frame.duration) {
     throw new Error(`Returned VideoFrame of track ${track.trackId} has different duration (${newFrame.duration}) than the input frame (${newFrame.duration}). When calling new VideoFrame(), pass {duration: frame.duration} as second argument`);
   }
-  await videoEncoder.encodeFrame(newFrame, newFrame.timestamp);
-  convertMediaState.decodedVideoFrames++;
-  onMediaStateUpdate?.({ ...convertMediaState });
-  newFrame.close();
+  const fixedFrame = convertToCorrectVideoFrame({
+    videoFrame: newFrame,
+    outputCodec
+  });
+  await videoEncoder.encodeFrame(fixedFrame, fixedFrame.timestamp);
+  fixedFrame.close();
   if (frame !== newFrame) {
     frame.close();
   }
+  if (fixedFrame !== newFrame) {
+    fixedFrame.close();
+  }
 };
 
 // src/video-decoder.ts
@@ -910,7 +987,8 @@ var createVideoEncoder = ({
   onError,
   signal,
   config,
-  logLevel
+  logLevel,
+  outputCodec
 }) => {
   if (signal.aborted) {
     throw new Error("Not creating video encoder, already aborted");
@@ -948,6 +1026,7 @@ var createVideoEncoder = ({
     close();
   };
   signal.addEventListener("abort", onAbort);
+  Log.verbose(logLevel, "Configuring video encoder", config);
   encoder.configure(config);
   let framesProcessed = 0;
   const encodeFrame = async (frame) => {
@@ -955,14 +1034,14 @@ var createVideoEncoder = ({
       return;
     }
     await ioSynchronizer.waitFor({
-      unemitted: 2,
-      _unprocessed: 2
+      unemitted: 10,
+      _unprocessed: 10
     });
     if (encoder.state === "closed") {
       return;
     }
     const keyFrame = framesProcessed % 40 === 0;
-    encoder.encode(frame, {
+    encoder.encode(convertToCorrectVideoFrame({ videoFrame: frame, outputCodec }), {
       keyFrame
     });
     ioSynchronizer.inputItem(frame.timestamp, keyFrame);
@@ -992,7 +1071,6 @@ var makeVideoTrackHandler = ({
   onVideoFrame,
   onMediaStateUpdate,
   abortConversion,
-  convertMediaState,
   controller,
   defaultVideoCodec,
   onVideoTrack,
@@ -1033,8 +1111,12 @@ var makeVideoTrackHandler = ({
         timescale: track.timescale,
         codecPrivate: track.codecPrivate
       });
-      convertMediaState.decodedVideoFrames++;
-      onMediaStateUpdate?.({ ...convertMediaState });
+      onMediaStateUpdate?.((prevState) => {
+        return {
+          ...prevState,
+          decodedVideoFrames: prevState.decodedVideoFrames + 1
+        };
+      });
     };
   }
   const videoEncoderConfig = await getVideoEncoderConfig({
@@ -1071,8 +1153,12 @@ var makeVideoTrackHandler = ({
         timescale: track.timescale,
         codecPrivate: arrayBufferToUint8Array(metadata?.decoderConfig?.description ?? null)
       });
-      convertMediaState.encodedVideoFrames++;
-      onMediaStateUpdate?.({ ...convertMediaState });
+      onMediaStateUpdate?.((prevState) => {
+        return {
+          ...prevState,
+          encodedVideoFrames: prevState.encodedVideoFrames + 1
+        };
+      });
     },
     onError: (err) => {
       abortConversion(new error_cause_default(`Video encoder of track ${track.trackId} failed (see .cause of this error)`, {
@@ -1081,18 +1167,18 @@ var makeVideoTrackHandler = ({
     },
     signal: controller.signal,
     config: videoEncoderConfig,
-    logLevel
+    logLevel,
+    outputCodec: videoOperation.videoCodec
   });
   const videoDecoder = createVideoDecoder({
     config: videoDecoderConfig,
     onFrame: async (frame) => {
       await onFrame({
-        convertMediaState,
         frame,
-        onMediaStateUpdate,
         track,
         videoEncoder,
-        onVideoFrame
+        onVideoFrame,
+        outputCodec: videoOperation.videoCodec
       });
     },
     onError: (err) => {
@@ -1117,11 +1203,63 @@ var makeVideoTrackHandler = ({
   };
 };
 
+// src/throttled-state-update.ts
+var throttledStateUpdate = ({
+  updateFn,
+  everyMilliseconds,
+  signal
+}) => {
+  let currentState = {
+    decodedAudioFrames: 0,
+    decodedVideoFrames: 0,
+    encodedVideoFrames: 0,
+    encodedAudioFrames: 0,
+    bytesWritten: 0,
+    millisecondsWritten: 0,
+    expectedOutputDurationInMs: null,
+    overallProgress: 0
+  };
+  if (!updateFn) {
+    return {
+      get: () => currentState,
+      update: null,
+      stopAndGetLastProgress: () => {
+      }
+    };
+  }
+  let lastUpdated = null;
+  const callUpdateIfChanged = () => {
+    if (currentState === lastUpdated) {
+      return;
+    }
+    updateFn(currentState);
+    lastUpdated = currentState;
+  };
+  const interval = setInterval(() => {
+    callUpdateIfChanged();
+  }, everyMilliseconds);
+  const onAbort = () => {
+    clearInterval(interval);
+  };
+  signal.addEventListener("abort", onAbort, { once: true });
+  return {
+    get: () => currentState,
+    update: (fn) => {
+      currentState = fn(currentState);
+    },
+    stopAndGetLastProgress: () => {
+      clearInterval(interval);
+      signal.removeEventListener("abort", onAbort);
+      return currentState;
+    }
+  };
+};
+
 // src/convert-media.ts
 var convertMedia = async function({
   src,
   onVideoFrame,
-  onMediaStateUpdate: onMediaStateDoNoCallDirectly,
+  onProgress: onProgressDoNotCallDirectly,
   audioCodec,
   container,
   videoCodec,
@@ -1132,6 +1270,7 @@ var convertMedia = async function({
   fields,
   logLevel = "info",
   writer,
+  progressIntervalInMs,
   ...more
 }) {
   if (userPassedAbortSignal?.aborted) {
@@ -1155,47 +1294,45 @@ var convertMedia = async function({
     abortConversion(new error_cause_default("Conversion aborted by user"));
   };
   userPassedAbortSignal?.addEventListener("abort", onUserAbort);
-  const convertMediaState = {
-    decodedAudioFrames: 0,
-    decodedVideoFrames: 0,
-    encodedVideoFrames: 0,
-    encodedAudioFrames: 0,
-    bytesWritten: 0,
-    millisecondsWritten: 0,
-    expectedOutputDurationInMs: null,
-    overallProgress: 0
-  };
-  const onMediaStateUpdate = (newState) => {
-    if (controller.signal.aborted) {
-      return;
-    }
-    onMediaStateDoNoCallDirectly?.(newState);
-  };
   const creator = container === "webm" ? MediaParserInternals4.createMatroskaMedia : MediaParserInternals4.createIsoBaseMedia;
+  const throttledState = throttledStateUpdate({
+    updateFn: onProgressDoNotCallDirectly ?? null,
+    everyMilliseconds: progressIntervalInMs ?? 100,
+    signal: controller.signal
+  });
   const state = await creator({
+    filename: generateOutputFilename(src, container),
     writer: await autoSelectWriter(writer, logLevel),
     onBytesProgress: (bytesWritten) => {
-      convertMediaState.bytesWritten = bytesWritten;
-      onMediaStateUpdate?.(convertMediaState);
+      throttledState.update?.((prevState) => {
+        return {
+          ...prevState,
+          bytesWritten
+        };
+      });
     },
     onMillisecondsProgress: (millisecondsWritten) => {
-      if (millisecondsWritten > convertMediaState.millisecondsWritten) {
-        convertMediaState.millisecondsWritten = millisecondsWritten;
-        convertMediaState.overallProgress = calculateProgress({
-          millisecondsWritten: convertMediaState.millisecondsWritten,
-          expectedOutputDurationInMs: convertMediaState.expectedOutputDurationInMs
-        });
-        onMediaStateUpdate?.(convertMediaState);
-      }
+      throttledState.update?.((prevState) => {
+        if (millisecondsWritten > prevState.millisecondsWritten) {
+          return {
+            ...prevState,
+            millisecondsWritten,
+            overallProgress: calculateProgress({
+              millisecondsWritten: prevState.millisecondsWritten,
+              expectedOutputDurationInMs: prevState.expectedOutputDurationInMs
+            })
+          };
+        }
+        return prevState;
+      });
     },
     logLevel
   });
   const onVideoTrack = makeVideoTrackHandler({
     state,
     onVideoFrame: onVideoFrame ?? null,
-    onMediaStateUpdate: onMediaStateUpdate ?? null,
+    onMediaStateUpdate: throttledState.update ?? null,
     abortConversion,
-    convertMediaState,
     controller,
     defaultVideoCodec: videoCodec ?? null,
     onVideoTrack: userVideoResolver ?? null,
@@ -1206,8 +1343,7 @@ var convertMedia = async function({
     abortConversion,
     defaultAudioCodec: audioCodec ?? null,
     controller,
-    convertMediaState,
-    onMediaStateUpdate: onMediaStateUpdate ?? null,
+    onMediaStateUpdate: throttledState.update ?? null,
     state,
     onAudioTrack: userAudioResolver ?? null,
     logLevel,
@@ -1234,24 +1370,36 @@ var convertMedia = async function({
         casted.onDurationInSeconds(durationInSeconds);
       }
       const expectedOutputDurationInMs = durationInSeconds * 1000;
-      convertMediaState.expectedOutputDurationInMs = expectedOutputDurationInMs;
-      convertMediaState.overallProgress = calculateProgress({
-        millisecondsWritten: convertMediaState.millisecondsWritten,
-        expectedOutputDurationInMs
+      throttledState.update?.((prevState) => {
+        return {
+          ...prevState,
+          expectedOutputDurationInMs,
+          overallProgress: calculateProgress({
+            millisecondsWritten: prevState.millisecondsWritten,
+            expectedOutputDurationInMs
+          })
+        };
       });
-      onMediaStateUpdate(convertMediaState);
     }
   }).then(() => {
     return state.waitForFinish();
   }).then(() => {
-    resolve({ save: state.save, remove: state.remove });
+    resolve({
+      save: state.save,
+      remove: state.remove,
+      finalState: throttledState.get()
+    });
   }).catch((err) => {
     reject(err);
+  }).finally(() => {
+    throttledState.stopAndGetLastProgress();
   });
   return getPromiseToImmediatelyReturn().finally(() => {
     userPassedAbortSignal?.removeEventListener("abort", onUserAbort);
   });
 };
+// src/index.ts
+setRemotionImported();
 export {
   getDefaultVideoCodec,
   getDefaultAudioCodec,

package/dist/generate-output-filename.d.ts

@@ -0,0 +1,2 @@
+import type { ConvertMediaContainer } from './codec-id';
+export declare const generateOutputFilename: (source: string | Blob, container: ConvertMediaContainer) => string;

package/dist/generate-output-filename.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateOutputFilename = void 0;
+const generateOutputFilename = (source, container) => {
+    const filename = typeof source === 'string'
+        ? source
+        : source instanceof File
+            ? source.name
+            : 'converted';
+    const behindSlash = filename.split('/').pop();
+    const withoutExtension = behindSlash.split('.').slice(0, -1).join('.');
+    return `${withoutExtension}.${container}`;
+};
+exports.generateOutputFilename = generateOutputFilename;

package/dist/index.d.ts

@@ -1,16 +1,16 @@
-export { WebCodecsAudioDecoder, createAudioDecoder } from './audio-decoder';
-export { WebCodecsAudioEncoder, createAudioEncoder } from './audio-encoder';
+export { createAudioDecoder, WebCodecsAudioDecoder } from './audio-decoder';
+export { createAudioEncoder, WebCodecsAudioEncoder } from './audio-encoder';
 export { canCopyAudioTrack } from './can-copy-audio-track';
 export { canCopyVideoTrack } from './can-copy-video-track';
 export { canReencodeAudioTrack } from './can-reencode-audio-track';
 export { canReencodeVideoTrack } from './can-reencode-video-track';
 export { ConvertMediaAudioCodec, ConvertMediaContainer, ConvertMediaVideoCodec, getAvailableAudioCodecs, getAvailableContainers, getAvailableVideoCodecs, } from './codec-id';
-export { ConvertMediaOnMediaStateUpdate, ConvertMediaOnVideoFrame, ConvertMediaResult, ConvertMediaState, convertMedia, } from './convert-media';
+export { convertMedia, ConvertMediaOnProgress, ConvertMediaOnVideoFrame, ConvertMediaProgress, ConvertMediaResult, } from './convert-media';
 export { defaultOnAudioTrackHandler } from './default-on-audio-track-handler';
 export { defaultOnVideoTrackHandler } from './default-on-video-track-handler';
 export { getDefaultAudioCodec } from './get-default-audio-codec';
 export { getDefaultVideoCodec } from './get-default-video-codec';
 export { AudioOperation, ConvertMediaOnAudioTrackHandler, } from './on-audio-track-handler';
 export { ConvertMediaOnVideoTrackHandler, VideoOperation, } from './on-video-track-handler';
-export { WebCodecsVideoDecoder, createVideoDecoder } from './video-decoder';
-export { WebCodecsVideoEncoder, createVideoEncoder } from './video-encoder';
+export { createVideoDecoder, WebCodecsVideoDecoder } from './video-decoder';
+export { createVideoEncoder, WebCodecsVideoEncoder } from './video-encoder';

package/dist/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createVideoEncoder = exports.createVideoDecoder = exports.getDefaultVideoCodec = exports.getDefaultAudioCodec = exports.defaultOnVideoTrackHandler = exports.defaultOnAudioTrackHandler = exports.convertMedia = exports.getAvailableVideoCodecs = exports.getAvailableContainers = exports.getAvailableAudioCodecs = exports.canReencodeVideoTrack = exports.canReencodeAudioTrack = exports.canCopyVideoTrack = exports.canCopyAudioTrack = exports.createAudioEncoder = exports.createAudioDecoder = void 0;
+const set_remotion_imported_1 = require("./set-remotion-imported");
 var audio_decoder_1 = require("./audio-decoder");
 Object.defineProperty(exports, "createAudioDecoder", { enumerable: true, get: function () { return audio_decoder_1.createAudioDecoder; } });
 var audio_encoder_1 = require("./audio-encoder");
@@ -31,3 +32,4 @@ var video_decoder_1 = require("./video-decoder");
 Object.defineProperty(exports, "createVideoDecoder", { enumerable: true, get: function () { return video_decoder_1.createVideoDecoder; } });
 var video_encoder_1 = require("./video-encoder");
 Object.defineProperty(exports, "createVideoEncoder", { enumerable: true, get: function () { return video_encoder_1.createVideoEncoder; } });
+(0, set_remotion_imported_1.setRemotionImported)();

package/dist/on-audio-track.d.ts

@@ -1,15 +1,14 @@
 import type { LogLevel, MediaFn, OnAudioTrack } from '@remotion/media-parser';
 import type { ConvertMediaAudioCodec, ConvertMediaContainer } from './codec-id';
-import type { ConvertMediaState } from './convert-media';
 import Error from './error-cause';
 import type { ConvertMediaOnAudioTrackHandler } from './on-audio-track-handler';
-export declare const makeAudioTrackHandler: ({ state, defaultAudioCodec: audioCodec, convertMediaState, controller, abortConversion, onMediaStateUpdate, onAudioTrack, logLevel, container, }: {
+import type { ConvertMediaProgressFn } from './throttled-state-update';
+export declare const makeAudioTrackHandler: ({ state, defaultAudioCodec: audioCodec, controller, abortConversion, onMediaStateUpdate, onAudioTrack, logLevel, container, }: {
     state: MediaFn;
     defaultAudioCodec: ConvertMediaAudioCodec | null;
-    convertMediaState: ConvertMediaState;
     controller: AbortController;
     abortConversion: (errCause: Error) => void;
-    onMediaStateUpdate: null | ((state: ConvertMediaState) => void);
+    onMediaStateUpdate: null | ConvertMediaProgressFn;
     onAudioTrack: ConvertMediaOnAudioTrackHandler | null;
     logLevel: LogLevel;
     container: ConvertMediaContainer;

package/dist/on-audio-track.js

@@ -12,7 +12,7 @@ const convert_encoded_chunk_1 = require("./convert-encoded-chunk");
 const default_on_audio_track_handler_1 = require("./default-on-audio-track-handler");
 const error_cause_1 = __importDefault(require("./error-cause"));
 const log_1 = require("./log");
-const makeAudioTrackHandler = ({ state, defaultAudioCodec: audioCodec, convertMediaState, controller, abortConversion, onMediaStateUpdate, onAudioTrack, logLevel, container, }) => async (track) => {
+const makeAudioTrackHandler = ({ state, defaultAudioCodec: audioCodec, controller, abortConversion, onMediaStateUpdate, onAudioTrack, logLevel, container, }) => async (track) => {
     const audioOperation = await (onAudioTrack !== null && onAudioTrack !== void 0 ? onAudioTrack : default_on_audio_track_handler_1.defaultOnAudioTrackHandler)({
         defaultAudioCodec: audioCodec,
         track,
@@ -43,8 +43,12 @@ const makeAudioTrackHandler = ({ state, defaultAudioCodec: audioCodec, convertMe
                 timescale: track.timescale,
                 codecPrivate: track.codecPrivate,
             });
-            convertMediaState.encodedAudioFrames++;
-            onMediaStateUpdate === null || onMediaStateUpdate === void 0 ? void 0 : onMediaStateUpdate({ ...convertMediaState });
+            onMediaStateUpdate === null || onMediaStateUpdate === void 0 ? void 0 : onMediaStateUpdate((prevState) => {
+                return {
+                    ...prevState,
+                    encodedAudioFrames: prevState.encodedAudioFrames + 1,
+                };
+            });
         };
     }
     const audioEncoderConfig = await (0, audio_encoder_config_1.getAudioEncoderConfig)({
@@ -92,8 +96,12 @@ const makeAudioTrackHandler = ({ state, defaultAudioCodec: audioCodec, convertMe
                 timescale: track.timescale,
                 codecPrivate,
             });
-            convertMediaState.encodedAudioFrames++;
-            onMediaStateUpdate === null || onMediaStateUpdate === void 0 ? void 0 : onMediaStateUpdate({ ...convertMediaState });
+            onMediaStateUpdate === null || onMediaStateUpdate === void 0 ? void 0 : onMediaStateUpdate((prevState) => {
+                return {
+                    ...prevState,
+                    encodedAudioFrames: prevState.encodedAudioFrames + 1,
+                };
+            });
         },
         onError: (err) => {
             abortConversion(new error_cause_1.default(`Audio encoder of ${track.trackId} failed (see .cause of this error)`, {
@@ -108,8 +116,12 @@ const makeAudioTrackHandler = ({ state, defaultAudioCodec: audioCodec, convertMe
     const audioDecoder = (0, audio_decoder_1.createAudioDecoder)({
         onFrame: async (frame) => {
             await audioEncoder.encodeFrame(frame);
-            convertMediaState.decodedAudioFrames++;
-            onMediaStateUpdate === null || onMediaStateUpdate === void 0 ? void 0 : onMediaStateUpdate(convertMediaState);
+            onMediaStateUpdate === null || onMediaStateUpdate === void 0 ? void 0 : onMediaStateUpdate((prevState) => {
+                return {
+                    ...prevState,
+                    decodedAudioFrames: prevState.decodedAudioFrames + 1,
+                };
+            });
             frame.close();
         },
         onError(error) {

package/dist/on-frame.d.ts

@@ -1,11 +1,11 @@
 import type { VideoTrack } from '@remotion/media-parser';
-import type { ConvertMediaOnMediaStateUpdate, ConvertMediaOnVideoFrame, ConvertMediaState } from './convert-media';
+import type { ConvertMediaVideoCodec } from './codec-id';
+import type { ConvertMediaOnVideoFrame } from './convert-media';
 import type { WebCodecsVideoEncoder } from './video-encoder';
-export declare const onFrame: ({ frame, onVideoFrame, videoEncoder, onMediaStateUpdate, track, convertMediaState, }: {
+export declare const onFrame: ({ frame, onVideoFrame, videoEncoder, track, outputCodec, }: {
     frame: VideoFrame;
     onVideoFrame: ConvertMediaOnVideoFrame | null;
     videoEncoder: WebCodecsVideoEncoder;
-    onMediaStateUpdate: ConvertMediaOnMediaStateUpdate | null;
     track: VideoTrack;
-    convertMediaState: ConvertMediaState;
+    outputCodec: ConvertMediaVideoCodec;
 }) => Promise<void>;

package/dist/on-frame.js

@@ -1,13 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.onFrame = void 0;
-const onFrame = async ({ frame, onVideoFrame, videoEncoder, onMediaStateUpdate, track, convertMediaState, }) => {
+const convert_to_correct_videoframe_1 = require("./convert-to-correct-videoframe");
+const onFrame = async ({ frame, onVideoFrame, videoEncoder, track, outputCodec, }) => {
     const newFrame = onVideoFrame ? await onVideoFrame({ frame, track }) : frame;
-    if (newFrame.codedHeight !== frame.codedHeight) {
-        throw new Error(`Returned VideoFrame of track ${track.trackId} has different codedHeight (${newFrame.codedHeight}) than the input frame (${frame.codedHeight})`);
+    if (newFrame.codedHeight !== frame.displayHeight) {
+        throw new Error(`Returned VideoFrame of track ${track.trackId} has different codedHeight (${newFrame.codedHeight}) than the input frame displayHeight (${frame.displayHeight})`);
     }
-    if (newFrame.codedWidth !== frame.codedWidth) {
-        throw new Error(`Returned VideoFrame of track ${track.trackId} has different codedWidth (${newFrame.codedWidth}) than the input frame (${frame.codedWidth})`);
+    if (newFrame.codedWidth !== frame.displayWidth) {
+        throw new Error(`Returned VideoFrame of track ${track.trackId} has different codedWidth (${newFrame.codedWidth}) than the input frame displayWidth (${frame.displayWidth})`);
     }
     if (newFrame.displayWidth !== frame.displayWidth) {
         throw new Error(`Returned VideoFrame of track ${track.trackId} has different displayWidth (${newFrame.displayWidth}) than the input frame (${newFrame.displayHeight})`);
@@ -21,12 +22,17 @@ const onFrame = async ({ frame, onVideoFrame, videoEncoder, onMediaStateUpdate,
     if (newFrame.duration !== frame.duration) {
         throw new Error(`Returned VideoFrame of track ${track.trackId} has different duration (${newFrame.duration}) than the input frame (${newFrame.duration}). When calling new VideoFrame(), pass {duration: frame.duration} as second argument`);
     }
-    await videoEncoder.encodeFrame(newFrame, newFrame.timestamp);
-    convertMediaState.decodedVideoFrames++;
-    onMediaStateUpdate === null || onMediaStateUpdate === void 0 ? void 0 : onMediaStateUpdate({ ...convertMediaState });
-    newFrame.close();
+    const fixedFrame = (0, convert_to_correct_videoframe_1.convertToCorrectVideoFrame)({
+        videoFrame: newFrame,
+        outputCodec,
+    });
+    await videoEncoder.encodeFrame(fixedFrame, fixedFrame.timestamp);
+    fixedFrame.close();
     if (frame !== newFrame) {
         frame.close();
     }
+    if (fixedFrame !== newFrame) {
+        fixedFrame.close();
+    }
 };
 exports.onFrame = onFrame;

package/dist/on-video-track.d.ts

@@ -1,14 +1,14 @@
 import type { LogLevel, MediaFn, OnVideoTrack } from '@remotion/media-parser';
 import type { ConvertMediaContainer, ConvertMediaVideoCodec } from './codec-id';
-import type { ConvertMediaOnMediaStateUpdate, ConvertMediaOnVideoFrame, ConvertMediaState } from './convert-media';
+import type { ConvertMediaOnVideoFrame } from './convert-media';
 import Error from './error-cause';
 import type { ConvertMediaOnVideoTrackHandler } from './on-video-track-handler';
-export declare const makeVideoTrackHandler: ({ state, onVideoFrame, onMediaStateUpdate, abortConversion, convertMediaState, controller, defaultVideoCodec, onVideoTrack, logLevel, container, }: {
+import type { ConvertMediaProgressFn } from './throttled-state-update';
+export declare const makeVideoTrackHandler: ({ state, onVideoFrame, onMediaStateUpdate, abortConversion, controller, defaultVideoCodec, onVideoTrack, logLevel, container, }: {
     state: MediaFn;
     onVideoFrame: null | ConvertMediaOnVideoFrame;
-    onMediaStateUpdate: null | ConvertMediaOnMediaStateUpdate;
+    onMediaStateUpdate: null | ConvertMediaProgressFn;
     abortConversion: (errCause: Error) => void;
-    convertMediaState: ConvertMediaState;
     controller: AbortController;
     defaultVideoCodec: ConvertMediaVideoCodec | null;
     onVideoTrack: ConvertMediaOnVideoTrackHandler | null;

package/dist/on-video-track.js

@@ -14,7 +14,7 @@ const video_decoder_1 = require("./video-decoder");
 const video_decoder_config_1 = require("./video-decoder-config");
 const video_encoder_1 = require("./video-encoder");
 const video_encoder_config_1 = require("./video-encoder-config");
-const makeVideoTrackHandler = ({ state, onVideoFrame, onMediaStateUpdate, abortConversion, convertMediaState, controller, defaultVideoCodec, onVideoTrack, logLevel, container, }) => async (track) => {
+const makeVideoTrackHandler = ({ state, onVideoFrame, onMediaStateUpdate, abortConversion, controller, defaultVideoCodec, onVideoTrack, logLevel, container, }) => async (track) => {
     if (controller.signal.aborted) {
         throw new error_cause_1.default('Aborted');
     }
@@ -49,8 +49,12 @@ const makeVideoTrackHandler = ({ state, onVideoFrame, onMediaStateUpdate, abortC
                 timescale: track.timescale,
                 codecPrivate: track.codecPrivate,
             });
-            convertMediaState.decodedVideoFrames++;
-            onMediaStateUpdate === null || onMediaStateUpdate === void 0 ? void 0 : onMediaStateUpdate({ ...convertMediaState });
+            onMediaStateUpdate === null || onMediaStateUpdate === void 0 ? void 0 : onMediaStateUpdate((prevState) => {
+                return {
+                    ...prevState,
+                    decodedVideoFrames: prevState.decodedVideoFrames + 1,
+                };
+            });
         };
     }
     const videoEncoderConfig = await (0, video_encoder_config_1.getVideoEncoderConfig)({
@@ -88,8 +92,12 @@ const makeVideoTrackHandler = ({ state, onVideoFrame, onMediaStateUpdate, abortC
                 timescale: track.timescale,
                 codecPrivate: (0, arraybuffer_to_uint8_array_1.arrayBufferToUint8Array)(((_b = (_a = metadata === null || metadata === void 0 ? void 0 : metadata.decoderConfig) === null || _a === void 0 ? void 0 : _a.description) !== null && _b !== void 0 ? _b : null)),
             });
-            convertMediaState.encodedVideoFrames++;
-            onMediaStateUpdate === null || onMediaStateUpdate === void 0 ? void 0 : onMediaStateUpdate({ ...convertMediaState });
+            onMediaStateUpdate === null || onMediaStateUpdate === void 0 ? void 0 : onMediaStateUpdate((prevState) => {
+                return {
+                    ...prevState,
+                    encodedVideoFrames: prevState.encodedVideoFrames + 1,
+                };
+            });
         },
         onError: (err) => {
             abortConversion(new error_cause_1.default(`Video encoder of track ${track.trackId} failed (see .cause of this error)`, {
@@ -99,17 +107,17 @@ const makeVideoTrackHandler = ({ state, onVideoFrame, onMediaStateUpdate, abortC
         signal: controller.signal,
         config: videoEncoderConfig,
         logLevel,
+        outputCodec: videoOperation.videoCodec,
     });
     const videoDecoder = (0, video_decoder_1.createVideoDecoder)({
         config: videoDecoderConfig,
         onFrame: async (frame) => {
             await (0, on_frame_1.onFrame)({
-                convertMediaState,
                 frame,
-                onMediaStateUpdate,
                 track,
                 videoEncoder,
                 onVideoFrame,
+                outputCodec: videoOperation.videoCodec,
             });
         },
         onError: (err) => {

package/dist/set-remotion-imported.d.ts

@@ -0,0 +1,6 @@
+declare global {
+    interface Window {
+        remotion_imported: string | boolean;
+    }
+}
+export declare const setRemotionImported: () => void;

package/dist/set-remotion-imported.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setRemotionImported = void 0;
+const media_parser_1 = require("@remotion/media-parser");
+// We set the `window.remotion_imported` variable for the sole purpose
+// of being picked up by Wappalyzer.
+// The Wappalyzer Chrome extension is used to detect the technologies
+// used on websites, and it looks for this variable.
+// Remotion is a customer of Wappalyzer and buys a list of domains
+// where Remotion is used from time to time.
+// Remotion uses this data to ensure companies which are required to get
+// a company license for this pacakge are actually doing so.
+const setRemotionImported = () => {
+    if (typeof globalThis === 'undefined') {
+        return;
+    }
+    if (globalThis.remotion_imported) {
+        return;
+    }
+    globalThis.remotion_imported = media_parser_1.VERSION;
+    if (typeof window !== 'undefined') {
+        window.remotion_imported = `${media_parser_1.VERSION}-webcodecs`;
+    }
+};
+exports.setRemotionImported = setRemotionImported;

package/dist/throttled-state-update.d.ts

@@ -0,0 +1,13 @@
+import type { ConvertMediaOnProgress, ConvertMediaProgress } from './convert-media';
+export type ConvertMediaProgressFn = (state: (prevState: ConvertMediaProgress) => ConvertMediaProgress) => void;
+type ReturnType = {
+    get: () => ConvertMediaProgress;
+    update: ConvertMediaProgressFn | null;
+    stopAndGetLastProgress: () => void;
+};
+export declare const throttledStateUpdate: ({ updateFn, everyMilliseconds, signal, }: {
+    updateFn: ConvertMediaOnProgress | null;
+    everyMilliseconds: number;
+    signal: AbortSignal;
+}) => ReturnType;
+export {};

package/dist/throttled-state-update.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.throttledStateUpdate = void 0;
+const throttledStateUpdate = ({ updateFn, everyMilliseconds, signal, }) => {
+    let currentState = {
+        decodedAudioFrames: 0,
+        decodedVideoFrames: 0,
+        encodedVideoFrames: 0,
+        encodedAudioFrames: 0,
+        bytesWritten: 0,
+        millisecondsWritten: 0,
+        expectedOutputDurationInMs: null,
+        overallProgress: 0,
+    };
+    if (!updateFn) {
+        return {
+            get: () => currentState,
+            update: null,
+            stopAndGetLastProgress: () => { },
+        };
+    }
+    let lastUpdated = null;
+    const callUpdateIfChanged = () => {
+        if (currentState === lastUpdated) {
+            return;
+        }
+        updateFn(currentState);
+        lastUpdated = currentState;
+    };
+    const interval = setInterval(() => {
+        callUpdateIfChanged();
+    }, everyMilliseconds);
+    const onAbort = () => {
+        clearInterval(interval);
+    };
+    signal.addEventListener('abort', onAbort, { once: true });
+    return {
+        get: () => currentState,
+        update: (fn) => {
+            currentState = fn(currentState);
+        },
+        stopAndGetLastProgress: () => {
+            clearInterval(interval);
+            signal.removeEventListener('abort', onAbort);
+            return currentState;
+        },
+    };
+};
+exports.throttledStateUpdate = throttledStateUpdate;

package/dist/video-encoder-config.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getVideoEncoderConfig = void 0;
+const browser_quirks_1 = require("./browser-quirks");
 const choose_correct_avc1_profile_1 = require("./choose-correct-avc1-profile");
 const getVideoEncoderConfig = async ({ codec, height, width, fps, }) => {
     if (typeof VideoEncoder === 'undefined') {
@@ -14,6 +15,7 @@ const getVideoEncoderConfig = async ({ codec, height, width, fps, }) => {
                 : codec,
         height,
         width,
+        bitrate: (0, browser_quirks_1.isSafari)() ? 3000000 : undefined,
     };
     const hardware = {
         ...config,

package/dist/video-encoder.d.ts

@@ -1,14 +1,16 @@
 import type { LogLevel } from '@remotion/media-parser';
+import type { ConvertMediaVideoCodec } from './codec-id';
 export type WebCodecsVideoEncoder = {
     encodeFrame: (videoFrame: VideoFrame, timestamp: number) => Promise<void>;
     waitForFinish: () => Promise<void>;
     close: () => void;
     flush: () => Promise<void>;
 };
-export declare const createVideoEncoder: ({ onChunk, onError, signal, config, logLevel, }: {
+export declare const createVideoEncoder: ({ onChunk, onError, signal, config, logLevel, outputCodec, }: {
     onChunk: (chunk: EncodedVideoChunk, metadata: EncodedVideoChunkMetadata | null) => Promise<void>;
     onError: (error: DOMException) => void;
     signal: AbortSignal;
     config: VideoEncoderConfig;
     logLevel: LogLevel;
+    outputCodec: ConvertMediaVideoCodec;
 }) => WebCodecsVideoEncoder;

package/dist/video-encoder.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createVideoEncoder = void 0;
+const convert_to_correct_videoframe_1 = require("./convert-to-correct-videoframe");
 const io_synchronizer_1 = require("./io-manager/io-synchronizer");
-const createVideoEncoder = ({ onChunk, onError, signal, config, logLevel, }) => {
+const log_1 = require("./log");
+const createVideoEncoder = ({ onChunk, onError, signal, config, logLevel, outputCodec, }) => {
     if (signal.aborted) {
         throw new Error('Not creating video encoder, already aborted');
     }
@@ -44,6 +46,7 @@ const createVideoEncoder = ({ onChunk, onError, signal, config, logLevel, }) =>
         close();
     };
     signal.addEventListener('abort', onAbort);
+    log_1.Log.verbose(logLevel, 'Configuring video encoder', config);
     encoder.configure(config);
     let framesProcessed = 0;
     const encodeFrame = async (frame) => {
@@ -51,15 +54,16 @@ const createVideoEncoder = ({ onChunk, onError, signal, config, logLevel, }) =>
             return;
         }
         await ioSynchronizer.waitFor({
-            unemitted: 2,
-            _unprocessed: 2,
+            // Firefox stalls if too few frames are passed
+            unemitted: 10,
+            _unprocessed: 10,
         });
         // @ts-expect-error - can have changed in the meanwhile
         if (encoder.state === 'closed') {
             return;
         }
         const keyFrame = framesProcessed % 40 === 0;
-        encoder.encode(frame, {
+        encoder.encode((0, convert_to_correct_videoframe_1.convertToCorrectVideoFrame)({ videoFrame: frame, outputCodec }), {
             keyFrame,
         });
         ioSynchronizer.inputItem(frame.timestamp, keyFrame);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/webcodecs",
-  "version": "4.0.230",
+  "version": "4.0.231",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "module": "dist/esm/index.mjs",
@@ -17,19 +17,20 @@
   "author": "Jonny Burger <jonny@remotion.dev>",
   "license": "Remotion License (See https://remotion.dev/docs/webcodecs#license)",
   "dependencies": {
-    "@remotion/media-parser": "4.0.230"
+    "@remotion/media-parser": "4.0.231"
   },
   "peerDependencies": {},
   "devDependencies": {
     "@types/dom-webcodecs": "0.1.11",
     "eslint": "9.14.0",
-    "@remotion/eslint-config-internal": "4.0.230"
+    "@remotion/eslint-config-internal": "4.0.231"
   },
   "keywords": [],
   "publishConfig": {
     "access": "public"
   },
   "description": "Media conversion in the browser",
+  "homepage": "https://remotion.dev/webcodecs",
   "scripts": {
     "formatting": "prettier src --check",
     "lint": "eslint src",