@remotion/webcodecs 4.0.229 → 4.0.231

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;
@@ -59,11 +74,11 @@ var makeIoSynchronizer = (logLevel, label) => {
   let unprocessed = 0;
   const getUnprocessed = () => unprocessed;
   const getUnemittedItems = () => {
-    inputs = inputs.filter((input) => input > lastOutput);
+    inputs = inputs.filter((input) => Math.floor(input) > Math.floor(lastOutput));
     return inputs.length;
   };
   const getUnemittedKeyframes = () => {
-    keyframes = keyframes.filter((keyframe) => keyframe > lastOutput);
+    keyframes = keyframes.filter((keyframe) => Math.floor(keyframe) > Math.floor(lastOutput));
     return keyframes.length;
   };
   const printState = (prefix) => {
@@ -221,7 +236,8 @@ var createAudioEncoder = ({
   codec,
   signal,
   config: audioEncoderConfig,
-  logLevel
+  logLevel,
+  onNewAudioSampleRate
 }) => {
   if (signal.aborted) {
     throw new Error("Not creating audio encoder, already aborted");
@@ -258,18 +274,29 @@ var createAudioEncoder = ({
     close();
   };
   signal.addEventListener("abort", onAbort);
-  if (codec !== "opus") {
-    throw new Error('Only `codec: "opus"` is supported currently');
+  if (codec !== "opus" && codec !== "aac") {
+    throw new Error('Only `codec: "opus"` and `codec: "aac"` is supported currently');
   }
-  encoder.configure(audioEncoderConfig);
+  const wantedSampleRate = audioEncoderConfig.sampleRate;
   const encodeFrame = async (audioData) => {
     if (encoder.state === "closed") {
       return;
     }
-    await ioSynchronizer.waitFor({ unemitted: 2, _unprocessed: 2 });
+    await ioSynchronizer.waitFor({ unemitted: 20, _unprocessed: 20 });
     if (encoder.state === "closed") {
       return;
     }
+    if (encoder.state === "unconfigured") {
+      if (audioData.sampleRate === wantedSampleRate) {
+        encoder.configure(audioEncoderConfig);
+      } else {
+        encoder.configure({
+          ...audioEncoderConfig,
+          sampleRate: audioData.sampleRate
+        });
+        onNewAudioSampleRate(audioData.sampleRate);
+      }
+    }
     encoder.encode(audioData);
     ioSynchronizer.inputItem(audioData.timestamp, true);
   };
@@ -293,27 +320,28 @@ var createAudioEncoder = ({
 // src/can-copy-audio-track.ts
 var canCopyAudioTrack = ({
   inputCodec,
-  outputCodec,
   container
 }) => {
-  if (outputCodec === "opus") {
-    return inputCodec === "opus" && container === "webm";
+  if (container === "webm") {
+    return inputCodec === "opus";
+  }
+  if (container === "mp4") {
+    return inputCodec === "aac";
   }
-  throw new Error(`Unhandled codec: ${outputCodec}`);
+  throw new Error(`Unhandled codec: ${container}`);
 };
 // src/can-copy-video-track.ts
 var canCopyVideoTrack = ({
   inputCodec,
-  outputCodec,
   container
 }) => {
-  if (outputCodec === "vp8") {
-    return inputCodec === "vp8" && container === "webm";
+  if (container === "webm") {
+    return inputCodec === "vp8" || inputCodec === "vp9";
   }
-  if (outputCodec === "vp9") {
-    return inputCodec === "vp9" && container === "webm";
+  if (container === "mp4") {
+    return inputCodec === "h264" || inputCodec === "h265";
   }
-  throw new Error(`Unhandled codec: ${outputCodec}`);
+  throw new Error(`Unhandled codec: ${container}`);
 };
 // src/audio-decoder-config.ts
 var getAudioDecoderConfig = async (config) => {
@@ -330,12 +358,25 @@ var getAudioDecoderConfig = async (config) => {
 };
 
 // src/audio-encoder-config.ts
+var getCodecString = (audioCodec) => {
+  if (audioCodec === "opus") {
+    return "opus";
+  }
+  if (audioCodec === "aac") {
+    return "mp4a.40.02";
+  }
+  throw new Error(`Unsupported audio codec: ${audioCodec}`);
+};
 var getAudioEncoderConfig = async (config) => {
+  const actualConfig = {
+    ...config,
+    codec: getCodecString(config.codec)
+  };
   if (typeof AudioEncoder === "undefined") {
     return null;
   }
-  if ((await AudioEncoder.isConfigSupported(config)).supported) {
-    return config;
+  if ((await AudioEncoder.isConfigSupported(actualConfig)).supported) {
+    return actualConfig;
   }
   return null;
 };
@@ -346,12 +387,7 @@ var canReencodeAudioTrack = async ({
   audioCodec,
   bitrate
 }) => {
-  const audioDecoderConfig = await getAudioDecoderConfig({
-    codec: track.codec,
-    numberOfChannels: track.numberOfChannels,
-    sampleRate: track.sampleRate,
-    description: track.description
-  });
+  const audioDecoderConfig = await getAudioDecoderConfig(track);
   const audioEncoderConfig = await getAudioEncoderConfig({
     codec: audioCodec,
     numberOfChannels: track.numberOfChannels,
@@ -382,19 +418,64 @@ 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,
+  height,
+  fps
+}) => {
+  const profiles = [
+    { level: "3.1", hex: "1F", width: 1280, height: 720, fps: 30 },
+    { level: "3.2", hex: "20", width: 1280, height: 1024, fps: 42.2 },
+    { level: "4.0", hex: "28", width: 2048, height: 1024, fps: 30 },
+    { level: "4.1", hex: "29", width: 2048, height: 1024, fps: 30 },
+    { level: "4.2", hex: "2A", width: 2048, height: 1080, fps: 60 },
+    { level: "5.0", hex: "32", width: 3672, height: 1536, fps: 26.7 },
+    { level: "5.1", hex: "33", width: 4096, height: 2304, fps: 26.7 },
+    { level: "5.2", hex: "34", width: 4096, height: 2304, fps: 56.3 },
+    { level: "6.0", hex: "3C", width: 8192, height: 4320, fps: 30.2 },
+    { level: "6.1", hex: "3D", width: 8192, height: 4320, fps: 60.4 },
+    { level: "6.2", hex: "3E", width: 8192, height: 4320, fps: 120.8 }
+  ];
+  const profile = profiles.find((p) => {
+    if (width > p.width) {
+      return false;
+    }
+    if (height > p.height) {
+      return false;
+    }
+    const fallbackFps = fps ?? 60;
+    return fallbackFps <= p.fps;
+  });
+  if (!profile) {
+    throw new Error(`No suitable AVC1 profile found for ${width}x${height}@${fps}fps`);
+  }
+  return `avc1.6400${profile.hex}`;
+};
+
 // src/video-encoder-config.ts
 var getVideoEncoderConfig = async ({
-  width,
+  codec,
   height,
-  codec
+  width,
+  fps
 }) => {
   if (typeof VideoEncoder === "undefined") {
     return null;
   }
   const config = {
-    codec: codec === "vp9" ? "vp09.00.10.08" : codec,
+    codec: codec === "h264" ? chooseCorrectAvc1Profile({ fps, height, width }) : codec === "vp9" ? "vp09.00.10.08" : codec,
     height,
-    width
+    width,
+    bitrate: isSafari() ? 3000000 : undefined
   };
   const hardware = {
     ...config,
@@ -421,19 +502,38 @@ var canReencodeVideoTrack = async ({
   const videoEncoderConfig = await getVideoEncoderConfig({
     codec: videoCodec,
     height: track.displayAspectHeight,
-    width: track.displayAspectWidth
+    width: track.displayAspectWidth,
+    fps: track.fps
   });
   const videoDecoderConfig = await getVideoDecoderConfigWithHardwareAcceleration(track);
   return Boolean(videoDecoderConfig && videoEncoderConfig);
 };
 // src/codec-id.ts
-var availableVideoCodecs = ["vp8", "vp9"];
-var getAvailableVideoCodecs = () => availableVideoCodecs;
-var availableAudioCodecs = ["opus"];
-var getAvailableAudioCodecs = () => availableAudioCodecs;
+var availableContainers = ["webm", "mp4"];
+var getAvailableContainers = () => {
+  return availableContainers;
+};
+var getAvailableVideoCodecs = (container) => {
+  if (container === "mp4") {
+    return ["h264"];
+  }
+  if (container === "webm") {
+    return ["vp8", "vp9"];
+  }
+  throw new Error(`Unsupported container: ${container}`);
+};
+var getAvailableAudioCodecs = (container) => {
+  if (container === "mp4") {
+    return ["aac"];
+  }
+  if (container === "webm") {
+    return ["opus"];
+  }
+  throw new Error(`Unsupported container: ${container}`);
+};
 // src/convert-media.ts
 import {
-  MediaParserInternals as MediaParserInternals2,
+  MediaParserInternals as MediaParserInternals4,
   parseMedia
 } from "@remotion/media-parser";
 
@@ -468,54 +568,84 @@ 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) => {
+var convertEncodedChunk = (chunk, trackId) => {
   const arr = new Uint8Array(chunk.byteLength);
   chunk.copyTo(arr);
   return {
     data: arr,
     duration: chunk.duration ?? undefined,
     timestamp: chunk.timestamp,
-    type: chunk.type
+    type: chunk.type,
+    cts: chunk.timestamp,
+    dts: chunk.timestamp,
+    trackId
   };
 };
 
-// src/resolve-audio-action.ts
+// src/default-on-audio-track-handler.ts
+import { MediaParserInternals as MediaParserInternals2 } from "@remotion/media-parser";
+
+// src/get-default-audio-codec.ts
+var getDefaultAudioCodec = ({
+  container
+}) => {
+  if (container === "webm") {
+    return "opus";
+  }
+  if (container === "mp4") {
+    return "aac";
+  }
+  throw new Error(`Unhandled container: ${container}`);
+};
+
+// src/default-on-audio-track-handler.ts
 var DEFAULT_BITRATE = 128000;
-var defaultResolveAudioAction = async ({
+var defaultOnAudioTrackHandler = async ({
   track,
-  audioCodec,
+  defaultAudioCodec,
   logLevel,
   container
 }) => {
   const bitrate = DEFAULT_BITRATE;
   const canCopy = canCopyAudioTrack({
     inputCodec: track.codecWithoutConfig,
-    outputCodec: audioCodec,
     container
   });
   if (canCopy) {
-    Log.verbose(logLevel, `Track ${track.trackId} (audio): Can copy = ${canCopy}, action = copy`);
+    MediaParserInternals2.Log.verbose(logLevel, `Track ${track.trackId} (audio): Can copy track, therefore copying`);
     return Promise.resolve({ type: "copy" });
   }
+  const audioCodec = defaultAudioCodec ?? getDefaultAudioCodec({ container });
   const canReencode = await canReencodeAudioTrack({
     audioCodec,
     track,
     bitrate
   });
   if (canReencode) {
-    Log.verbose(logLevel, `Track ${track.trackId} (audio): Can re-encode = ${canReencode}, can copy = ${canCopy}, action = reencode`);
-    return Promise.resolve({ type: "reencode", bitrate, audioCodec });
+    MediaParserInternals2.Log.verbose(logLevel, `Track ${track.trackId} (audio): Cannot copy, but re-encode, therefore re-encoding`);
+    return Promise.resolve({
+      type: "reencode",
+      bitrate,
+      audioCodec
+    });
   }
-  Log.verbose(logLevel, `Track ${track.trackId} (audio): Can re-encode = ${canReencode}, can copy = ${canCopy}, action = drop`);
-  return Promise.resolve({ type: "drop" });
+  MediaParserInternals2.Log.verbose(logLevel, `Track ${track.trackId} (audio): Can neither re-encode nor copy, failing render`);
+  return Promise.resolve({ type: "fail" });
 };
 
 // src/on-audio-track.ts
 var makeAudioTrackHandler = ({
   state,
-  audioCodec,
-  convertMediaState,
+  defaultAudioCodec: audioCodec,
   controller,
   abortConversion,
   onMediaStateUpdate,
@@ -523,8 +653,8 @@ var makeAudioTrackHandler = ({
   logLevel,
   container
 }) => async (track) => {
-  const audioOperation = await (onAudioTrack ?? defaultResolveAudioAction)({
-    audioCodec,
+  const audioOperation = await (onAudioTrack ?? defaultOnAudioTrackHandler)({
+    defaultAudioCodec: audioCodec,
     track,
     logLevel,
     container
@@ -532,18 +662,33 @@ var makeAudioTrackHandler = ({
   if (audioOperation.type === "drop") {
     return null;
   }
+  if (audioOperation.type === "fail") {
+    throw new error_cause_default(`Audio track with ID ${track.trackId} could resolved with {"type": "fail"}. This could mean that this audio track could neither be copied to the output container or re-encoded. You have the option to drop the track instead of failing it: https://remotion.dev/docs/webcodecs/track-transformation`);
+  }
   if (audioOperation.type === "copy") {
     const addedTrack = await state.addTrack({
       type: "audio",
-      codec: audioCodec,
+      codec: track.codecWithoutConfig,
       numberOfChannels: track.numberOfChannels,
       sampleRate: track.sampleRate,
-      codecPrivate: track.codecPrivate
+      codecPrivate: track.codecPrivate,
+      timescale: track.timescale
     });
+    Log.verbose(logLevel, `Copying audio track ${track.trackId} as track ${addedTrack.trackNumber}. Timescale = ${track.timescale}, codec = ${track.codecWithoutConfig} (${track.codec}) `);
     return async (audioSample) => {
-      await state.addSample(audioSample, addedTrack.trackNumber, false);
-      convertMediaState.encodedAudioFrames++;
-      onMediaStateUpdate?.({ ...convertMediaState });
+      await state.addSample({
+        chunk: audioSample,
+        trackNumber: addedTrack.trackNumber,
+        isVideo: false,
+        timescale: track.timescale,
+        codecPrivate: track.codecPrivate
+      });
+      onMediaStateUpdate?.((prevState) => {
+        return {
+          ...prevState,
+          encodedAudioFrames: prevState.encodedAudioFrames + 1
+        };
+      });
     };
   }
   const audioEncoderConfig = await getAudioEncoderConfig({
@@ -566,25 +711,40 @@ var makeAudioTrackHandler = ({
     abortConversion(new error_cause_default(`Could not configure audio decoder of track ${track.trackId}`));
     return null;
   }
+  const codecPrivate = audioOperation.audioCodec === "aac" ? new Uint8Array([17, 144]) : null;
   const { trackNumber } = await state.addTrack({
     type: "audio",
-    codec: audioCodec,
+    codec: audioOperation.audioCodec,
     numberOfChannels: track.numberOfChannels,
     sampleRate: track.sampleRate,
-    codecPrivate: null
+    codecPrivate,
+    timescale: track.timescale
   });
   const audioEncoder = createAudioEncoder({
+    onNewAudioSampleRate: (sampleRate) => {
+      state.updateTrackSampleRate({ sampleRate, trackNumber });
+    },
     onChunk: async (chunk) => {
-      await state.addSample(convertEncodedChunk(chunk), trackNumber, false);
-      convertMediaState.encodedAudioFrames++;
-      onMediaStateUpdate?.({ ...convertMediaState });
+      await state.addSample({
+        chunk: convertEncodedChunk(chunk, trackNumber),
+        trackNumber,
+        isVideo: false,
+        timescale: track.timescale,
+        codecPrivate
+      });
+      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)`, {
         cause: err
       }));
     },
-    codec: audioCodec,
+    codec: audioOperation.audioCodec,
     signal: controller.signal,
     config: audioEncoderConfig,
     logLevel
@@ -592,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) {
@@ -616,21 +780,96 @@ var makeAudioTrackHandler = ({
   };
 };
 
+// src/arraybuffer-to-uint8-array.ts
+var arrayBufferToUint8Array = (buffer) => {
+  return buffer ? new Uint8Array(buffer) : null;
+};
+
+// src/default-on-video-track-handler.ts
+import { MediaParserInternals as MediaParserInternals3 } from "@remotion/media-parser";
+
+// src/get-default-video-codec.ts
+var getDefaultVideoCodec = ({
+  container
+}) => {
+  if (container === "webm") {
+    return "vp8";
+  }
+  throw new Error(`Unhandled container: ${container} satisfies never`);
+};
+
+// src/default-on-video-track-handler.ts
+var defaultOnVideoTrackHandler = async ({
+  track,
+  defaultVideoCodec,
+  logLevel,
+  container
+}) => {
+  const canCopy = canCopyVideoTrack({
+    inputCodec: track.codecWithoutConfig,
+    container
+  });
+  if (canCopy) {
+    MediaParserInternals3.Log.verbose(logLevel, `Track ${track.trackId} (video): Can copy, therefore copying`);
+    return Promise.resolve({ type: "copy" });
+  }
+  const videoCodec = defaultVideoCodec ?? getDefaultVideoCodec({ container });
+  const canReencode = await canReencodeVideoTrack({
+    videoCodec,
+    track
+  });
+  if (canReencode) {
+    MediaParserInternals3.Log.verbose(logLevel, `Track ${track.trackId} (video): Cannot copy, but re-enconde, therefore re-encoding`);
+    return Promise.resolve({ type: "reencode", videoCodec });
+  }
+  MediaParserInternals3.Log.verbose(logLevel, `Track ${track.trackId} (video): Can neither copy nor re-encode, therefore failing`);
+  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})`);
@@ -644,38 +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();
   }
-};
-
-// src/resolve-video-action.ts
-var defaultResolveVideoAction = async ({
-  track,
-  videoCodec,
-  logLevel,
-  container
-}) => {
-  const canCopy = canCopyVideoTrack({
-    inputCodec: track.codecWithoutConfig,
-    outputCodec: videoCodec,
-    container
-  });
-  if (canCopy) {
-    Log.verbose(logLevel, `Track ${track.trackId} (video): Can copy, therefore copying`);
-    return Promise.resolve({ type: "copy" });
-  }
-  const canReencode = await canReencodeVideoTrack({ videoCodec, track });
-  if (canReencode) {
-    Log.verbose(logLevel, `Track ${track.trackId} (video): Cannot copy, but re-enconde, therefore re-encoding`);
-    return Promise.resolve({ type: "reencode", videoCodec });
+  if (fixedFrame !== newFrame) {
+    fixedFrame.close();
   }
-  Log.verbose(logLevel, `Track ${track.trackId} (video): Can neither copy nor re-encode, therefore dropping`);
-  return Promise.resolve({ type: "drop" });
 };
 
 // src/video-decoder.ts
@@ -747,9 +966,13 @@ var createVideoDecoder = ({
     },
     waitForFinish: async () => {
       await videoDecoder.flush();
+      Log.verbose(logLevel, "Flushed video decoder");
       await ioSynchronizer.waitForFinish();
+      Log.verbose(logLevel, "IO synchro finished");
       await outputQueue;
+      Log.verbose(logLevel, "Output queue finished");
       await inputQueue;
+      Log.verbose(logLevel, "Input queue finished");
     },
     close,
     flush: async () => {
@@ -764,7 +987,8 @@ var createVideoEncoder = ({
   onError,
   signal,
   config,
-  logLevel
+  logLevel,
+  outputCodec
 }) => {
   if (signal.aborted) {
     throw new Error("Not creating video encoder, already aborted");
@@ -775,17 +999,14 @@ var createVideoEncoder = ({
     error(error) {
       onError(error);
     },
-    output(chunk) {
-      if (chunk.duration === null) {
-        throw new Error("Duration is null");
-      }
-      const timestamp = chunk.timestamp + chunk.duration;
+    output(chunk, metadata) {
+      const timestamp = chunk.timestamp + (chunk.duration ?? 0);
       ioSynchronizer.onOutput(timestamp);
       outputQueue = outputQueue.then(() => {
         if (signal.aborted) {
           return;
         }
-        return onChunk(chunk);
+        return onChunk(chunk, metadata ?? null);
       }).then(() => {
         ioSynchronizer.onProcessed();
         return Promise.resolve();
@@ -805,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) => {
@@ -812,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);
@@ -849,9 +1071,8 @@ var makeVideoTrackHandler = ({
   onVideoFrame,
   onMediaStateUpdate,
   abortConversion,
-  convertMediaState,
   controller,
-  videoCodec,
+  defaultVideoCodec,
   onVideoTrack,
   logLevel,
   container
@@ -859,34 +1080,50 @@ var makeVideoTrackHandler = ({
   if (controller.signal.aborted) {
     throw new error_cause_default("Aborted");
   }
-  const videoOperation = await (onVideoTrack ?? defaultResolveVideoAction)({
+  const videoOperation = await (onVideoTrack ?? defaultOnVideoTrackHandler)({
     track,
-    videoCodec,
+    defaultVideoCodec,
     logLevel,
     container
   });
   if (videoOperation.type === "drop") {
     return null;
   }
+  if (videoOperation.type === "fail") {
+    throw new error_cause_default(`Video track with ID ${track.trackId} could resolved with {"type": "fail"}. This could mean that this video track could neither be copied to the output container or re-encoded. You have the option to drop the track instead of failing it: https://remotion.dev/docs/webcodecs/track-transformation`);
+  }
   if (videoOperation.type === "copy") {
+    Log.verbose(logLevel, `Copying video track with codec ${track.codec} and timescale ${track.timescale}`);
     const videoTrack = await state.addTrack({
       type: "video",
       color: track.color,
       width: track.codedWidth,
       height: track.codedHeight,
       codec: track.codecWithoutConfig,
-      codecPrivate: track.codecPrivate
+      codecPrivate: track.codecPrivate,
+      timescale: track.timescale
     });
     return async (sample) => {
-      await state.addSample(sample, videoTrack.trackNumber, true);
-      convertMediaState.decodedVideoFrames++;
-      onMediaStateUpdate?.({ ...convertMediaState });
+      await state.addSample({
+        chunk: sample,
+        trackNumber: videoTrack.trackNumber,
+        isVideo: true,
+        timescale: track.timescale,
+        codecPrivate: track.codecPrivate
+      });
+      onMediaStateUpdate?.((prevState) => {
+        return {
+          ...prevState,
+          decodedVideoFrames: prevState.decodedVideoFrames + 1
+        };
+      });
     };
   }
   const videoEncoderConfig = await getVideoEncoderConfig({
     codec: videoOperation.videoCodec,
     height: track.displayAspectHeight,
-    width: track.displayAspectWidth
+    width: track.displayAspectWidth,
+    fps: track.fps
   });
   const videoDecoderConfig = await getVideoDecoderConfigWithHardwareAcceleration(track);
   if (videoEncoderConfig === null) {
@@ -902,14 +1139,26 @@ var makeVideoTrackHandler = ({
     color: track.color,
     width: track.codedWidth,
     height: track.codedHeight,
-    codec: videoCodec,
-    codecPrivate: null
+    codec: videoOperation.videoCodec,
+    codecPrivate: null,
+    timescale: track.timescale
   });
+  Log.verbose(logLevel, `Created new video track with ID ${trackNumber}, codec ${videoOperation.videoCodec} and timescale ${track.timescale}`);
   const videoEncoder = createVideoEncoder({
-    onChunk: async (chunk) => {
-      await state.addSample(convertEncodedChunk(chunk), trackNumber, true);
-      convertMediaState.encodedVideoFrames++;
-      onMediaStateUpdate?.({ ...convertMediaState });
+    onChunk: async (chunk, metadata) => {
+      await state.addSample({
+        chunk: convertEncodedChunk(chunk, trackNumber),
+        trackNumber,
+        isVideo: true,
+        timescale: track.timescale,
+        codecPrivate: arrayBufferToUint8Array(metadata?.decoderConfig?.description ?? null)
+      });
+      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)`, {
@@ -918,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) => {
@@ -941,21 +1190,76 @@ var makeVideoTrackHandler = ({
     logLevel
   });
   state.addWaitForFinishPromise(async () => {
+    Log.verbose(logLevel, "Waiting for video decoder to finish");
     await videoDecoder.waitForFinish();
-    await videoEncoder.waitForFinish();
     videoDecoder.close();
+    Log.verbose(logLevel, "Video decoder finished. Waiting for encoder to finish");
+    await videoEncoder.waitForFinish();
     videoEncoder.close();
+    Log.verbose(logLevel, "Encoder finished");
   });
   return async (chunk) => {
     await videoDecoder.processSample(chunk);
   };
 };
 
+// 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,
@@ -966,18 +1270,16 @@ var convertMedia = async function({
   fields,
   logLevel = "info",
   writer,
+  progressIntervalInMs,
   ...more
 }) {
   if (userPassedAbortSignal?.aborted) {
     return Promise.reject(new error_cause_default("Aborted"));
   }
-  if (container !== "webm") {
-    return Promise.reject(new TypeError('Only `to: "webm"` is supported currently'));
+  if (container !== "webm" && container !== "mp4") {
+    return Promise.reject(new TypeError('Only `to: "webm"` and `to: "mp4"` is supported currently'));
   }
-  if (audioCodec !== "opus") {
-    return Promise.reject(new TypeError('Only `audioCodec: "opus"` is supported currently'));
-  }
-  if (videoCodec !== "vp8" && videoCodec !== "vp9") {
+  if (videoCodec && videoCodec !== "vp8" && videoCodec !== "vp9") {
     return Promise.reject(new TypeError('Only `videoCodec: "vp8"` and `videoCodec: "vp9"` are supported currently'));
   }
   const { resolve, reject, getPromiseToImmediatelyReturn } = withResolversAndWaitForReturn();
@@ -992,63 +1294,63 @@ 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 state = await MediaParserInternals2.createMedia({
+  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,
-    videoCodec,
+    defaultVideoCodec: videoCodec ?? null,
     onVideoTrack: userVideoResolver ?? null,
     logLevel,
     container
   });
   const onAudioTrack = makeAudioTrackHandler({
     abortConversion,
-    audioCodec,
+    defaultAudioCodec: audioCodec ?? null,
     controller,
-    convertMediaState,
-    onMediaStateUpdate: onMediaStateUpdate ?? null,
+    onMediaStateUpdate: throttledState.update ?? null,
     state,
     onAudioTrack: userAudioResolver ?? null,
     logLevel,
     container
   });
   parseMedia({
+    logLevel,
     src,
     onVideoTrack,
     onAudioTrack,
@@ -1068,27 +1370,44 @@ 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,
   getAvailableVideoCodecs,
+  getAvailableContainers,
   getAvailableAudioCodecs,
+  defaultOnVideoTrackHandler,
+  defaultOnAudioTrackHandler,
   createVideoEncoder,
   createVideoDecoder,
   createAudioEncoder,