@remotion/web-renderer 4.0.430 → 4.0.432

package/dist/can-render-types.d.ts

@@ -9,13 +9,13 @@ export type CanRenderIssue = {
 export type CanRenderMediaOnWebResult = {
     canRender: boolean;
     issues: CanRenderIssue[];
-    resolvedVideoCodec: WebRendererVideoCodec;
+    resolvedVideoCodec: WebRendererVideoCodec | null;
     resolvedAudioCodec: WebRendererAudioCodec | null;
     resolvedOutputTarget: WebRendererOutputTarget;
 };
 export type CanRenderMediaOnWebOptions = {
     container?: WebRendererContainer;
-    videoCodec?: WebRendererVideoCodec;
+    videoCodec?: WebRendererVideoCodec | null;
     audioCodec?: WebRendererAudioCodec | null;
     width: number;
     height: number;

package/dist/esm/index.mjs

@@ -1,3 +1,26 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
 var __dispose = Symbol.dispose || /* @__PURE__ */ Symbol.for("Symbol.dispose");
 var __asyncDispose = Symbol.asyncDispose || /* @__PURE__ */ Symbol.for("Symbol.asyncDispose");
 var __using = (stack, value, async) => {
@@ -91,14 +114,23 @@ var checkWebGLSupport = () => {
 
 // src/mediabunny-mappings.ts
 import {
+  AdtsOutputFormat,
+  MkvOutputFormat,
+  MovOutputFormat,
+  Mp3OutputFormat,
   Mp4OutputFormat,
+  OggOutputFormat,
   QUALITY_HIGH,
   QUALITY_LOW,
   QUALITY_MEDIUM,
   QUALITY_VERY_HIGH,
   QUALITY_VERY_LOW,
+  WavOutputFormat,
   WebMOutputFormat
 } from "mediabunny";
+var isAudioOnlyContainer = (container) => {
+  return container === "wav" || container === "mp3" || container === "aac" || container === "ogg";
+};
 var codecToMediabunnyCodec = (codec) => {
   switch (codec) {
     case "h264":
@@ -118,9 +150,21 @@ var codecToMediabunnyCodec = (codec) => {
 var containerToMediabunnyContainer = (container) => {
   switch (container) {
     case "mp4":
-      return new Mp4OutputFormat;
+      return new Mp4OutputFormat({ fastStart: "reserve" });
     case "webm":
       return new WebMOutputFormat;
+    case "mkv":
+      return new MkvOutputFormat;
+    case "wav":
+      return new WavOutputFormat;
+    case "mp3":
+      return new Mp3OutputFormat;
+    case "aac":
+      return new AdtsOutputFormat;
+    case "ogg":
+      return new OggOutputFormat;
+    case "mov":
+      return new MovOutputFormat({ fastStart: "reserve" });
     default:
       throw new Error(`Unsupported container: ${container}`);
   }
@@ -131,10 +175,31 @@ var getDefaultVideoCodecForContainer = (container) => {
       return "h264";
     case "webm":
       return "vp8";
+    case "mkv":
+    case "mov":
+      return "h264";
+    case "wav":
+    case "mp3":
+    case "aac":
+    case "ogg":
+      return null;
     default:
       throw new Error(`Unsupported container: ${container}`);
   }
 };
+var getDefaultContainerForCodec = (codec) => {
+  switch (codec) {
+    case "h264":
+    case "h265":
+    case "av1":
+      return "mp4";
+    case "vp8":
+    case "vp9":
+      return "webm";
+    default:
+      throw new Error(`Unsupported codec: ${codec}`);
+  }
+};
 var getQualityForWebRendererQuality = (quality) => {
   switch (quality) {
     case "very-low":
@@ -157,6 +222,18 @@ var getMimeType = (container) => {
       return "video/mp4";
     case "webm":
       return "video/webm";
+    case "mkv":
+      return "video/x-matroska";
+    case "wav":
+      return "audio/wav";
+    case "mp3":
+      return "audio/mpeg";
+    case "aac":
+      return "audio/aac";
+    case "ogg":
+      return "audio/ogg";
+    case "mov":
+      return "video/quicktime";
     default:
       throw new Error(`Unsupported container: ${container}`);
   }
@@ -167,6 +244,18 @@ var getDefaultAudioCodecForContainer = (container) => {
       return "aac";
     case "webm":
       return "opus";
+    case "mkv":
+      return "aac";
+    case "wav":
+      return "pcm-s16";
+    case "mp3":
+      return "mp3";
+    case "aac":
+      return "aac";
+    case "ogg":
+      return "opus";
+    case "mov":
+      return "aac";
     default:
       throw new Error(`Unsupported container: ${container}`);
   }
@@ -179,22 +268,63 @@ var WEB_RENDERER_VIDEO_CODECS = [
   "av1"
 ];
 var getSupportedVideoCodecsForContainer = (container) => {
+  if (isAudioOnlyContainer(container)) {
+    return [];
+  }
   const format = containerToMediabunnyContainer(container);
   const allSupported = format.getSupportedVideoCodecs();
   return WEB_RENDERER_VIDEO_CODECS.filter((codec) => allSupported.includes(codecToMediabunnyCodec(codec)));
 };
-var WEB_RENDERER_AUDIO_CODECS = ["aac", "opus"];
+var WEB_RENDERER_AUDIO_CODECS = [
+  "aac",
+  "opus",
+  "mp3",
+  "vorbis",
+  "pcm-s16"
+];
+var audioCodecToMediabunnyAudioCodec = (audioCodec) => {
+  switch (audioCodec) {
+    case "aac":
+      return "aac";
+    case "opus":
+      return "opus";
+    case "mp3":
+      return "mp3";
+    case "vorbis":
+      return "vorbis";
+    case "pcm-s16":
+      return "pcm-s16";
+    default:
+      throw new Error(`Unsupported audio codec: ${audioCodec}`);
+  }
+};
 var getSupportedAudioCodecsForContainer = (container) => {
   const format = containerToMediabunnyContainer(container);
   const allSupported = format.getSupportedAudioCodecs();
-  return WEB_RENDERER_AUDIO_CODECS.filter((codec) => allSupported.includes(codec));
-};
-var audioCodecToMediabunnyAudioCodec = (audioCodec) => {
-  return audioCodec;
+  return WEB_RENDERER_AUDIO_CODECS.filter((codec) => allSupported.includes(audioCodecToMediabunnyAudioCodec(codec)));
 };
 
 // src/resolve-audio-codec.ts
+import { canEncodeAudio as canEncodeAudio2 } from "mediabunny";
+
+// src/register-mp3-encoder.ts
 import { canEncodeAudio } from "mediabunny";
+var registrationPromise = null;
+var doRegister = async () => {
+  const nativeSupport = await canEncodeAudio("mp3");
+  if (!nativeSupport) {
+    const { registerMp3Encoder } = await import("@mediabunny/mp3-encoder");
+    registerMp3Encoder();
+  }
+};
+var ensureMp3EncoderRegistered = () => {
+  if (!registrationPromise) {
+    registrationPromise = doRegister();
+  }
+  return registrationPromise;
+};
+
+// src/resolve-audio-codec.ts
 var resolveAudioCodec = async (options) => {
   const issues = [];
   const { container, requestedCodec, userSpecifiedAudioCodec, bitrate } = options;
@@ -209,7 +339,10 @@ var resolveAudioCodec = async (options) => {
     return { codec: null, issues };
   }
   const mediabunnyAudioCodec = audioCodecToMediabunnyAudioCodec(audioCodec);
-  const canEncode = await canEncodeAudio(mediabunnyAudioCodec, { bitrate });
+  if (audioCodec === "mp3") {
+    await ensureMp3EncoderRegistered();
+  }
+  const canEncode = await canEncodeAudio2(mediabunnyAudioCodec, { bitrate });
   if (canEncode) {
     return { codec: audioCodec, issues };
   }
@@ -223,8 +356,11 @@ var resolveAudioCodec = async (options) => {
   }
   for (const fallbackCodec of supportedAudioCodecs) {
     if (fallbackCodec !== audioCodec) {
+      if (fallbackCodec === "mp3") {
+        await ensureMp3EncoderRegistered();
+      }
       const fallbackMediabunnyCodec = audioCodecToMediabunnyAudioCodec(fallbackCodec);
-      const canEncodeFallback = await canEncodeAudio(fallbackMediabunnyCodec, {
+      const canEncodeFallback = await canEncodeAudio2(fallbackMediabunnyCodec, {
         bitrate
       });
       if (canEncodeFallback) {
@@ -263,46 +399,61 @@ var validateDimensions = (options) => {
 // src/can-render-media-on-web.ts
 var canRenderMediaOnWeb = async (options) => {
   const issues = [];
-  if (typeof VideoEncoder === "undefined") {
-    issues.push({
-      type: "webcodecs-unavailable",
-      message: "WebCodecs API is not available in this browser. A modern browser with WebCodecs support is required.",
-      severity: "error"
-    });
-  }
   const container = options.container ?? "mp4";
-  const videoCodec = options.videoCodec ?? getDefaultVideoCodecForContainer(container);
+  const videoCodec = options.videoCodec ?? getDefaultVideoCodecForContainer(container) ?? null;
+  const videoEnabled = !isAudioOnlyContainer(container);
   const transparent = options.transparent ?? false;
   const muted = options.muted ?? false;
   const { width, height } = options;
   const resolvedVideoBitrate = typeof options.videoBitrate === "number" ? options.videoBitrate : getQualityForWebRendererQuality(options.videoBitrate ?? "medium");
   const resolvedAudioBitrate = typeof options.audioBitrate === "number" ? options.audioBitrate : getQualityForWebRendererQuality(options.audioBitrate ?? "medium");
-  const format = containerToMediabunnyContainer(container);
-  if (!format.getSupportedCodecs().includes(codecToMediabunnyCodec(videoCodec))) {
-    issues.push({
-      type: "container-codec-mismatch",
-      message: `Codec ${videoCodec} is not supported for container ${container}`,
-      severity: "error"
-    });
-  }
-  const dimensionIssue = validateDimensions({ width, height, codec: videoCodec });
-  if (dimensionIssue) {
-    issues.push(dimensionIssue);
-  }
-  const canEncodeVideoResult = await canEncodeVideo(codecToMediabunnyCodec(videoCodec), { bitrate: resolvedVideoBitrate });
-  if (!canEncodeVideoResult) {
-    issues.push({
-      type: "video-codec-unsupported",
-      message: `Video codec "${videoCodec}" cannot be encoded by this browser`,
-      severity: "error"
-    });
-  }
-  if (transparent && !["vp8", "vp9"].includes(videoCodec)) {
-    issues.push({
-      type: "transparent-video-unsupported",
-      message: `Transparent video requires VP8 or VP9 codec with WebM container. ${videoCodec} does not support alpha channel.`,
-      severity: "error"
-    });
+  if (videoEnabled) {
+    if (typeof VideoEncoder === "undefined") {
+      issues.push({
+        type: "webcodecs-unavailable",
+        message: "WebCodecs API is not available in this browser. A modern browser with WebCodecs support is required.",
+        severity: "error"
+      });
+    }
+    if (!videoCodec) {
+      issues.push({
+        type: "container-codec-mismatch",
+        message: `A video codec is required for container ${container}`,
+        severity: "error"
+      });
+    } else {
+      const format = containerToMediabunnyContainer(container);
+      if (!format.getSupportedCodecs().includes(codecToMediabunnyCodec(videoCodec))) {
+        issues.push({
+          type: "container-codec-mismatch",
+          message: `Codec ${videoCodec} is not supported for container ${container}`,
+          severity: "error"
+        });
+      }
+      const dimensionIssue = validateDimensions({
+        width,
+        height,
+        codec: videoCodec
+      });
+      if (dimensionIssue) {
+        issues.push(dimensionIssue);
+      }
+      const canEncodeVideoResult = await canEncodeVideo(codecToMediabunnyCodec(videoCodec), { bitrate: resolvedVideoBitrate });
+      if (!canEncodeVideoResult) {
+        issues.push({
+          type: "video-codec-unsupported",
+          message: `Video codec "${videoCodec}" cannot be encoded by this browser`,
+          severity: "error"
+        });
+      }
+      if (transparent && !["vp8", "vp9"].includes(videoCodec)) {
+        issues.push({
+          type: "transparent-video-unsupported",
+          message: `Transparent video requires VP8 or VP9 codec with WebM container. ${videoCodec} does not support alpha channel.`,
+          severity: "error"
+        });
+      }
+    }
   }
   let resolvedAudioCodec = null;
   if (!muted) {
@@ -338,7 +489,7 @@ var canRenderMediaOnWeb = async (options) => {
   return {
     canRender: issues.filter((i) => i.severity === "error").length === 0,
     issues,
-    resolvedVideoCodec: videoCodec,
+    resolvedVideoCodec: videoEnabled ? videoCodec : null,
     resolvedAudioCodec,
     resolvedOutputTarget
   };
@@ -359,6 +510,9 @@ var getEncodableVideoCodecs = async (container, options) => {
 };
 var getEncodableAudioCodecs = async (container, options) => {
   const supported = getSupportedAudioCodecsForContainer(container);
+  if (supported.includes("mp3")) {
+    await ensureMp3EncoderRegistered();
+  }
   const resolvedBitrate = options?.audioBitrate ? typeof options.audioBitrate === "number" ? options.audioBitrate : getQualityForWebRendererQuality(options.audioBitrate) : undefined;
   const encodable = await mediabunnyGetEncodableAudioCodecs(supported, {
     bitrate: resolvedBitrate
@@ -629,6 +783,7 @@ var UpdateTime = ({
     }
   }));
   return /* @__PURE__ */ jsx(Internals2.RemotionRootContexts, {
+    visualModeEnabled: false,
     audioEnabled,
     videoEnabled,
     logLevel,
@@ -670,24 +825,27 @@ function createScaffold({
   if (!ReactDOM.createRoot) {
     throw new Error("@remotion/web-renderer requires React 18 or higher");
   }
+  const wrapper = document.createElement("div");
+  wrapper.style.position = "fixed";
+  wrapper.style.inset = "0";
+  wrapper.style.overflow = "hidden";
+  wrapper.style.visibility = "hidden";
+  wrapper.style.pointerEvents = "none";
+  wrapper.style.zIndex = "-9999";
   const div = document.createElement("div");
-  div.style.position = "fixed";
+  div.style.position = "absolute";
+  div.style.top = "0";
+  div.style.left = "0";
   div.style.display = "flex";
   div.style.flexDirection = "column";
   div.style.backgroundColor = "transparent";
   div.style.width = `${width}px`;
   div.style.height = `${height}px`;
-  div.style.zIndex = "-9999";
-  div.style.top = "0";
-  div.style.left = "0";
-  div.style.right = "0";
-  div.style.bottom = "0";
-  div.style.visibility = "hidden";
-  div.style.pointerEvents = "none";
   const scaffoldClassName = `remotion-scaffold-${Math.random().toString(36).substring(2, 15)}`;
   div.className = scaffoldClassName;
   const cleanupCSS = Internals3.CSSUtils.injectCSS(Internals3.CSSUtils.makeDefaultPreviewCSS(`.${scaffoldClassName}`, "white"));
-  document.body.appendChild(div);
+  wrapper.appendChild(div);
+  document.body.appendChild(wrapper);
   const errorHolder = { error: null };
   const root = ReactDOM.createRoot(div, {
     onUncaughtError: (err) => {
@@ -781,6 +939,7 @@ function createScaffold({
     [Symbol.dispose]: () => {
       root.unmount();
       div.remove();
+      wrapper.remove();
       cleanupCSS();
     },
     timeUpdater,
@@ -3815,7 +3974,8 @@ var internalRenderMediaOnWeb = async ({
       await cleanupStaleOpfsFiles();
     }
     const format = containerToMediabunnyContainer(container);
-    if (codec && !format.getSupportedCodecs().includes(codecToMediabunnyCodec(codec))) {
+    const videoEnabled = !isAudioOnlyContainer(container);
+    if (videoEnabled && codec && !format.getSupportedCodecs().includes(codecToMediabunnyCodec(codec))) {
       return Promise.reject(new Error(`Codec ${codec} is not supported for container ${container}`));
     }
     const resolvedAudioBitrate = typeof audioBitrate === "number" ? audioBitrate : getQualityForWebRendererQuality(audioBitrate);
@@ -3863,7 +4023,7 @@ var internalRenderMediaOnWeb = async ({
       mediaCacheSizeInBytes,
       schema: schema ?? null,
       audioEnabled: !muted,
-      videoEnabled: true,
+      videoEnabled,
       initialFrame: 0,
       defaultCodec: resolved.defaultCodec,
       defaultOutName: resolved.defaultOutName
@@ -3904,7 +4064,7 @@ var internalRenderMediaOnWeb = async ({
         if (signal?.aborted) {
           throw new Error("renderMediaOnWeb() was cancelled");
         }
-        const videoSampleSource = __using(__stack, makeVideoSampleSourceCleanup({
+        const videoSampleSource = __using(__stack, videoEnabled && codec ? makeVideoSampleSourceCleanup({
           codec: codecToMediabunnyCodec(codec),
           bitrate: typeof videoBitrate === "number" ? videoBitrate : getQualityForWebRendererQuality(videoBitrate),
           sizeChangeBehavior: "deny",
@@ -3912,15 +4072,23 @@ var internalRenderMediaOnWeb = async ({
           latencyMode: "quality",
           keyFrameInterval: keyframeIntervalInSeconds,
           alpha: transparent ? "keep" : "discard"
-        }), 0);
-        outputWithCleanup.output.addVideoTrack(videoSampleSource.videoSampleSource);
+        }) : null, 0);
+        const totalFrames = realFrameRange[1] - realFrameRange[0] + 1;
+        const durationInSeconds = totalFrames / resolved.fps;
+        if (videoSampleSource) {
+          outputWithCleanup.output.addVideoTrack(videoSampleSource.videoSampleSource, {
+            maximumPacketCount: Math.ceil(totalFrames * 1.33)
+          });
+        }
         const audioSampleSource = __using(__stack, createAudioSampleSource({
           muted,
           codec: finalAudioCodec ? audioCodecToMediabunnyAudioCodec(finalAudioCodec) : null,
           bitrate: resolvedAudioBitrate
         }), 0);
         if (audioSampleSource) {
-          outputWithCleanup.output.addAudioTrack(audioSampleSource.audioSampleSource);
+          outputWithCleanup.output.addAudioTrack(audioSampleSource.audioSampleSource, {
+            maximumPacketCount: Math.ceil(durationInSeconds * 100 * 1.33)
+          });
         }
         await outputWithCleanup.output.start();
         if (signal?.aborted) {
@@ -3947,44 +4115,49 @@ var internalRenderMediaOnWeb = async ({
           if (signal?.aborted) {
             throw new Error("renderMediaOnWeb() was cancelled");
           }
-          const createFrameStart = performance.now();
-          const layer = await createLayer({
-            element: div,
-            scale,
-            logLevel,
-            internalState,
-            onlyBackgroundClipText: false,
-            cutout: new DOMRect(0, 0, resolved.width, resolved.height)
-          });
-          internalState.addCreateFrameTime(performance.now() - createFrameStart);
-          if (signal?.aborted) {
-            throw new Error("renderMediaOnWeb() was cancelled");
-          }
           const timestamp = Math.round((frame - realFrameRange[0]) / resolved.fps * 1e6);
-          const videoFrame = new VideoFrame(layer.canvas, {
-            timestamp
-          });
-          progress.renderedFrames++;
-          throttledOnProgress?.({ ...progress });
-          let frameToEncode = videoFrame;
-          if (onFrame) {
-            const returnedFrame = await onFrame(videoFrame);
+          let frameToEncode = null;
+          let layerCanvas = null;
+          if (videoEnabled) {
+            const createFrameStart = performance.now();
+            const layer = await createLayer({
+              element: div,
+              scale,
+              logLevel,
+              internalState,
+              onlyBackgroundClipText: false,
+              cutout: new DOMRect(0, 0, resolved.width, resolved.height)
+            });
+            internalState.addCreateFrameTime(performance.now() - createFrameStart);
+            layerCanvas = layer.canvas;
             if (signal?.aborted) {
               throw new Error("renderMediaOnWeb() was cancelled");
             }
-            frameToEncode = validateVideoFrame({
-              originalFrame: videoFrame,
-              returnedFrame,
-              expectedWidth: Math.round(resolved.width * scale),
-              expectedHeight: Math.round(resolved.height * scale),
-              expectedTimestamp: timestamp
+            const videoFrame = new VideoFrame(layer.canvas, {
+              timestamp
             });
+            frameToEncode = videoFrame;
+            if (onFrame) {
+              const returnedFrame = await onFrame(videoFrame);
+              if (signal?.aborted) {
+                throw new Error("renderMediaOnWeb() was cancelled");
+              }
+              frameToEncode = validateVideoFrame({
+                originalFrame: videoFrame,
+                returnedFrame,
+                expectedWidth: Math.round(resolved.width * scale),
+                expectedHeight: Math.round(resolved.height * scale),
+                expectedTimestamp: timestamp
+              });
+            }
           }
+          progress.renderedFrames++;
+          throttledOnProgress?.({ ...progress });
           const audioCombineStart = performance.now();
           const assets = collectAssets.current.collectAssets();
           if (onArtifact) {
             await artifactsHandler.handle({
-              imageData: layer.canvas,
+              imageData: layerCanvas,
               frame,
               assets,
               onArtifact
@@ -3996,10 +4169,14 @@ var internalRenderMediaOnWeb = async ({
           const audio = muted ? null : onlyInlineAudio({ assets, fps: resolved.fps, timestamp });
           internalState.addAudioMixingTime(performance.now() - audioCombineStart);
           const addSampleStart = performance.now();
-          await Promise.all([
-            addVideoSampleAndCloseFrame(frameToEncode, videoSampleSource.videoSampleSource),
-            audio && audioSampleSource ? addAudioSample(audio, audioSampleSource.audioSampleSource) : Promise.resolve()
-          ]);
+          const encodingPromises = [];
+          if (frameToEncode && videoSampleSource) {
+            encodingPromises.push(addVideoSampleAndCloseFrame(frameToEncode, videoSampleSource.videoSampleSource));
+          }
+          if (audio && audioSampleSource) {
+            encodingPromises.push(addAudioSample(audio, audioSampleSource.audioSampleSource));
+          }
+          await Promise.all(encodingPromises);
           internalState.addAddSampleTime(performance.now() - addSampleStart);
           progress.encodedFrames++;
           throttledOnProgress?.({ ...progress });
@@ -4008,7 +4185,7 @@ var internalRenderMediaOnWeb = async ({
           }
         }
         onProgress?.({ ...progress });
-        videoSampleSource.videoSampleSource.close();
+        videoSampleSource?.videoSampleSource.close();
         audioSampleSource?.audioSampleSource.close();
         await outputWithCleanup.output.finalize();
         Internals8.Log.verbose({ logLevel, tag: "web-renderer" }, `Render timings: waitForReady=${internalState.getWaitForReadyTime().toFixed(2)}ms, createFrame=${internalState.getCreateFrameTime().toFixed(2)}ms, addSample=${internalState.getAddSampleTime().toFixed(2)}ms, audioMixing=${internalState.getAudioMixingTime().toFixed(2)}ms`);
@@ -4022,8 +4199,9 @@ var internalRenderMediaOnWeb = async ({
           });
           await webFsTarget.close();
           return {
-            getBlob: () => {
-              return webFsTarget.getBlob();
+            getBlob: async () => {
+              const file = await webFsTarget.getBlob();
+              return new Blob([file], { type: getMimeType(container) });
             },
             internalState
           };
@@ -4074,7 +4252,7 @@ var internalRenderMediaOnWeb = async ({
 };
 var renderMediaOnWeb = (options) => {
   const container = options.container ?? "mp4";
-  const codec = options.videoCodec ?? getDefaultVideoCodecForContainer(container);
+  const codec = options.videoCodec ?? getDefaultVideoCodecForContainer(container) ?? null;
   onlyOneRenderAtATimeQueue.ref = onlyOneRenderAtATimeQueue.ref.catch(() => Promise.resolve()).then(() => internalRenderMediaOnWeb({
     ...options,
     delayRenderTimeoutInMilliseconds: options.delayRenderTimeoutInMilliseconds ?? 30000,
@@ -4236,11 +4414,13 @@ var renderStillOnWeb = (options) => {
 export {
   renderStillOnWeb,
   renderMediaOnWeb,
+  isAudioOnlyContainer,
   getSupportedVideoCodecsForContainer,
   getSupportedAudioCodecsForContainer,
   getEncodableVideoCodecs,
   getEncodableAudioCodecs,
   getDefaultVideoCodecForContainer,
+  getDefaultContainerForCodec,
   getDefaultAudioCodecForContainer,
   canRenderMediaOnWeb
 };

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { canRenderMediaOnWeb } from './can-render-media-on-web';
 export type { CanRenderIssue, CanRenderMediaOnWebOptions, CanRenderMediaOnWebResult, } from './can-render-media-on-web';
 export type { FrameRange } from './frame-range';
 export { getEncodableAudioCodecs, getEncodableVideoCodecs, type GetEncodableAudioCodecsOptions, type GetEncodableVideoCodecsOptions, } from './get-encodable-codecs';
-export { getDefaultAudioCodecForContainer, getDefaultVideoCodecForContainer, getSupportedAudioCodecsForContainer, getSupportedVideoCodecsForContainer, } from './mediabunny-mappings';
+export { getDefaultAudioCodecForContainer, getDefaultContainerForCodec, getDefaultVideoCodecForContainer, getSupportedAudioCodecsForContainer, getSupportedVideoCodecsForContainer, isAudioOnlyContainer, } from './mediabunny-mappings';
 export type { WebRendererAudioCodec, WebRendererContainer, WebRendererQuality, WebRendererVideoCodec, } from './mediabunny-mappings';
 export type { WebRendererOutputTarget } from './output-target';
 export { renderMediaOnWeb } from './render-media-on-web';

package/dist/mediabunny-mappings.d.ts

@@ -1,15 +1,17 @@
 import type { Quality } from 'mediabunny';
 import { type OutputFormat } from 'mediabunny';
 export type WebRendererVideoCodec = 'h264' | 'h265' | 'vp8' | 'vp9' | 'av1';
-export type WebRendererContainer = 'mp4' | 'webm';
-export type WebRendererAudioCodec = 'aac' | 'opus';
+export type WebRendererContainer = 'mp4' | 'webm' | 'mkv' | 'mov' | 'wav' | 'mp3' | 'aac' | 'ogg';
+export type WebRendererAudioCodec = 'aac' | 'opus' | 'mp3' | 'vorbis' | 'pcm-s16';
 export type WebRendererQuality = 'very-low' | 'low' | 'medium' | 'high' | 'very-high';
+export declare const isAudioOnlyContainer: (container: WebRendererContainer) => boolean;
 export declare const codecToMediabunnyCodec: (codec: WebRendererVideoCodec) => "av1" | "avc" | "hevc" | "vp8" | "vp9";
 export declare const containerToMediabunnyContainer: (container: WebRendererContainer) => OutputFormat;
-export declare const getDefaultVideoCodecForContainer: (container: WebRendererContainer) => WebRendererVideoCodec;
+export declare const getDefaultVideoCodecForContainer: (container: WebRendererContainer) => WebRendererVideoCodec | null;
+export declare const getDefaultContainerForCodec: (codec: WebRendererVideoCodec) => WebRendererContainer;
 export declare const getQualityForWebRendererQuality: (quality: WebRendererQuality) => Quality;
 export declare const getMimeType: (container: WebRendererContainer) => string;
 export declare const getDefaultAudioCodecForContainer: (container: WebRendererContainer) => WebRendererAudioCodec;
 export declare const getSupportedVideoCodecsForContainer: (container: WebRendererContainer) => WebRendererVideoCodec[];
-export declare const getSupportedAudioCodecsForContainer: (container: WebRendererContainer) => WebRendererAudioCodec[];
 export declare const audioCodecToMediabunnyAudioCodec: (audioCodec: WebRendererAudioCodec) => "aac" | "ac3" | "alaw" | "eac3" | "flac" | "mp3" | "opus" | "pcm-f32" | "pcm-f32be" | "pcm-f64" | "pcm-f64be" | "pcm-s16" | "pcm-s16be" | "pcm-s24" | "pcm-s24be" | "pcm-s32" | "pcm-s32be" | "pcm-s8" | "pcm-u8" | "ulaw" | "vorbis";
+export declare const getSupportedAudioCodecsForContainer: (container: WebRendererContainer) => WebRendererAudioCodec[];

package/dist/register-mp3-encoder.d.ts

@@ -0,0 +1 @@
+export declare const ensureMp3EncoderRegistered: () => Promise<void>;

package/dist/render-media-on-web.d.ts

@@ -36,7 +36,7 @@ type OptionalRenderMediaOnWebOptions<Schema extends $ZodObject> = {
     logLevel: LogLevel;
     schema: Schema | undefined;
     mediaCacheSizeInBytes: number | null;
-    videoCodec: WebRendererVideoCodec;
+    videoCodec: WebRendererVideoCodec | null;
     audioCodec: WebRendererAudioCodec | null;
     audioBitrate: number | WebRendererQuality;
     container: WebRendererContainer;