@remotion/web-renderer 4.0.431 → 4.0.433

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,24 @@ var checkWebGLSupport = () => {
 
 // src/mediabunny-mappings.ts
 import {
+  AdtsOutputFormat,
+  FlacOutputFormat,
+  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" || container === "flac";
+};
 var codecToMediabunnyCodec = (codec) => {
   switch (codec) {
     case "h264":
@@ -118,9 +151,23 @@ 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 "flac":
+      return new FlacOutputFormat;
+    case "mov":
+      return new MovOutputFormat({ fastStart: "reserve" });
     default:
       throw new Error(`Unsupported container: ${container}`);
   }
@@ -131,10 +178,32 @@ var getDefaultVideoCodecForContainer = (container) => {
       return "h264";
     case "webm":
       return "vp8";
+    case "mkv":
+    case "mov":
+      return "h264";
+    case "wav":
+    case "mp3":
+    case "aac":
+    case "ogg":
+    case "flac":
+      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 +226,20 @@ 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 "flac":
+      return "audio/flac";
+    case "mov":
+      return "video/quicktime";
     default:
       throw new Error(`Unsupported container: ${container}`);
   }
@@ -167,6 +250,20 @@ 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 "flac":
+      return "flac";
+    case "mov":
+      return "aac";
     default:
       throw new Error(`Unsupported container: ${container}`);
   }
@@ -179,22 +276,100 @@ 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",
+  "flac"
+];
+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";
+    case "flac":
+      return "flac";
+    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 canEncodeAudio4 } from "mediabunny";
+
+// src/register-aac-encoder.ts
 import { canEncodeAudio } from "mediabunny";
+var registrationPromise = null;
+var doRegister = async () => {
+  const nativeSupport = await canEncodeAudio("aac");
+  if (!nativeSupport) {
+    const { registerAacEncoder } = await import("@mediabunny/aac-encoder");
+    registerAacEncoder();
+  }
+};
+var ensureAacEncoderRegistered = () => {
+  if (!registrationPromise) {
+    registrationPromise = doRegister();
+  }
+  return registrationPromise;
+};
+
+// src/register-flac-encoder.ts
+import { canEncodeAudio as canEncodeAudio2 } from "mediabunny";
+var registrationPromise2 = null;
+var doRegister2 = async () => {
+  const nativeSupport = await canEncodeAudio2("flac");
+  if (!nativeSupport) {
+    const { registerFlacEncoder } = await import("@mediabunny/flac-encoder");
+    registerFlacEncoder();
+  }
+};
+var ensureFlacEncoderRegistered = () => {
+  if (!registrationPromise2) {
+    registrationPromise2 = doRegister2();
+  }
+  return registrationPromise2;
+};
+
+// src/register-mp3-encoder.ts
+import { canEncodeAudio as canEncodeAudio3 } from "mediabunny";
+var registrationPromise3 = null;
+var doRegister3 = async () => {
+  const nativeSupport = await canEncodeAudio3("mp3");
+  if (!nativeSupport) {
+    const { registerMp3Encoder } = await import("@mediabunny/mp3-encoder");
+    registerMp3Encoder();
+  }
+};
+var ensureMp3EncoderRegistered = () => {
+  if (!registrationPromise3) {
+    registrationPromise3 = doRegister3();
+  }
+  return registrationPromise3;
+};
+
+// src/resolve-audio-codec.ts
 var resolveAudioCodec = async (options) => {
   const issues = [];
   const { container, requestedCodec, userSpecifiedAudioCodec, bitrate } = options;
@@ -209,7 +384,16 @@ var resolveAudioCodec = async (options) => {
     return { codec: null, issues };
   }
   const mediabunnyAudioCodec = audioCodecToMediabunnyAudioCodec(audioCodec);
-  const canEncode = await canEncodeAudio(mediabunnyAudioCodec, { bitrate });
+  if (audioCodec === "mp3") {
+    await ensureMp3EncoderRegistered();
+  }
+  if (audioCodec === "aac") {
+    await ensureAacEncoderRegistered();
+  }
+  if (audioCodec === "flac") {
+    await ensureFlacEncoderRegistered();
+  }
+  const canEncode = await canEncodeAudio4(mediabunnyAudioCodec, { bitrate });
   if (canEncode) {
     return { codec: audioCodec, issues };
   }
@@ -223,8 +407,17 @@ var resolveAudioCodec = async (options) => {
   }
   for (const fallbackCodec of supportedAudioCodecs) {
     if (fallbackCodec !== audioCodec) {
+      if (fallbackCodec === "mp3") {
+        await ensureMp3EncoderRegistered();
+      }
+      if (fallbackCodec === "aac") {
+        await ensureAacEncoderRegistered();
+      }
+      if (fallbackCodec === "flac") {
+        await ensureFlacEncoderRegistered();
+      }
       const fallbackMediabunnyCodec = audioCodecToMediabunnyAudioCodec(fallbackCodec);
-      const canEncodeFallback = await canEncodeAudio(fallbackMediabunnyCodec, {
+      const canEncodeFallback = await canEncodeAudio4(fallbackMediabunnyCodec, {
         bitrate
       });
       if (canEncodeFallback) {
@@ -263,46 +456,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 +546,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 +567,15 @@ var getEncodableVideoCodecs = async (container, options) => {
 };
 var getEncodableAudioCodecs = async (container, options) => {
   const supported = getSupportedAudioCodecsForContainer(container);
+  if (supported.includes("mp3")) {
+    await ensureMp3EncoderRegistered();
+  }
+  if (supported.includes("aac")) {
+    await ensureAacEncoderRegistered();
+  }
+  if (supported.includes("flac")) {
+    await ensureFlacEncoderRegistered();
+  }
   const resolvedBitrate = options?.audioBitrate ? typeof options.audioBitrate === "number" ? options.audioBitrate : getQualityForWebRendererQuality(options.audioBitrate) : undefined;
   const encodable = await mediabunnyGetEncodableAudioCodecs(supported, {
     bitrate: resolvedBitrate
@@ -629,6 +846,7 @@ var UpdateTime = ({
     }
   }));
   return /* @__PURE__ */ jsx(Internals2.RemotionRootContexts, {
+    visualModeEnabled: false,
     audioEnabled,
     videoEnabled,
     logLevel,
@@ -637,13 +855,73 @@ var UpdateTime = ({
     frameState: {
       [compId]: frame
     },
-    nonceContextSeed: 0,
     children
   });
 };
 
 // src/create-scaffold.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
+var GENERIC_REACT_RENDER_ERROR_MESSAGES = new Set([
+  "Error thrown during rendering"
+]);
+var isMessageLikeObject = (err) => {
+  return typeof err === "object" && err !== null && "message" in err && typeof err.message === "string";
+};
+var unknownErrorToMessage = (err) => {
+  if (typeof err === "string") {
+    return err;
+  }
+  if (isMessageLikeObject(err)) {
+    return err.message;
+  }
+  try {
+    const serialized = JSON.stringify(err);
+    if (serialized) {
+      return serialized;
+    }
+  } catch {}
+  return String(err);
+};
+var setErrorCause = (error, cause) => {
+  try {
+    Object.defineProperty(error, "cause", {
+      value: cause,
+      enumerable: false,
+      configurable: true,
+      writable: true
+    });
+  } catch {}
+};
+var appendComponentStack = (error, componentStack) => {
+  if (!componentStack?.trim()) {
+    return error;
+  }
+  const normalizedComponentStack = componentStack.trim();
+  const stack = error.stack ?? `${error.name}: ${error.message}`;
+  if (stack.includes(normalizedComponentStack)) {
+    return error;
+  }
+  const errorTitle = `${error.name}: ${error.message}`;
+  const stackWithoutTitle = stack.startsWith(errorTitle) ? stack.slice(errorTitle.length).trimStart() : stack;
+  const stackBody = stackWithoutTitle.length > 0 ? `
+${stackWithoutTitle}` : "";
+  error.stack = `${errorTitle}
+For the likely root cause, see "React component stack:" after the JavaScript stack trace below.${stackBody}
+React component stack:
+${normalizedComponentStack}`;
+  return error;
+};
+var normalizeUncaughtReactError = (err, componentStack) => {
+  if (err instanceof Error) {
+    const { cause } = err;
+    const shouldUnwrapCause = cause instanceof Error && GENERIC_REACT_RENDER_ERROR_MESSAGES.has(err.message);
+    const errorToThrow = shouldUnwrapCause ? cause : err;
+    return appendComponentStack(errorToThrow, componentStack);
+  }
+  const normalized = new Error(unknownErrorToMessage(err));
+  setErrorCause(normalized, err);
+  return appendComponentStack(normalized, componentStack);
+};
 function checkForError(errorHolder) {
   if (errorHolder.error) {
     throw errorHolder.error;
@@ -670,28 +948,31 @@ 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) => {
-      errorHolder.error = err instanceof Error ? err : new Error(String(err));
+    onUncaughtError: (err, errorInfo) => {
+      errorHolder.error = normalizeUncaughtReactError(err, errorInfo?.componentStack);
     }
   });
   const delayRenderScope = {
@@ -722,7 +1003,7 @@ function createScaffold({
                 {
                   id,
                   component: Component,
-                  nonce: 0,
+                  nonce: [[0, 0]],
                   defaultProps: {},
                   folderName: null,
                   parentFolderName: null,
@@ -781,6 +1062,7 @@ function createScaffold({
     [Symbol.dispose]: () => {
       root.unmount();
       div.remove();
+      wrapper.remove();
       cleanupCSS();
     },
     timeUpdater,
@@ -3815,7 +4097,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 +4146,7 @@ var internalRenderMediaOnWeb = async ({
       mediaCacheSizeInBytes,
       schema: schema ?? null,
       audioEnabled: !muted,
-      videoEnabled: true,
+      videoEnabled,
       initialFrame: 0,
       defaultCodec: resolved.defaultCodec,
       defaultOutName: resolved.defaultOutName
@@ -3904,7 +4187,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 +4195,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 +4238,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 +4292,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 +4308,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 +4322,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 +4375,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 +4537,13 @@ var renderStillOnWeb = (options) => {
 export {
   renderStillOnWeb,
   renderMediaOnWeb,
+  isAudioOnlyContainer,
   getSupportedVideoCodecsForContainer,
   getSupportedAudioCodecsForContainer,
   getEncodableVideoCodecs,
   getEncodableAudioCodecs,
   getDefaultVideoCodecForContainer,
+  getDefaultContainerForCodec,
   getDefaultAudioCodecForContainer,
   canRenderMediaOnWeb
 };