@remotion/web-renderer 4.0.401 → 4.0.403

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

@@ -0,0 +1,3 @@
+import type { CanRenderMediaOnWebOptions, CanRenderMediaOnWebResult } from './can-render-types';
+export type { CanRenderIssue, CanRenderMediaOnWebOptions, CanRenderMediaOnWebResult, } from './can-render-types';
+export declare const canRenderMediaOnWeb: (options: CanRenderMediaOnWebOptions) => Promise<CanRenderMediaOnWebResult>;

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

@@ -0,0 +1,27 @@
+import type { WebRendererAudioCodec, WebRendererContainer, WebRendererQuality, WebRendererVideoCodec } from './mediabunny-mappings';
+import type { WebRendererOutputTarget } from './output-target';
+export type CanRenderIssueType = 'video-codec-unsupported' | 'audio-codec-unsupported' | 'webgl-unsupported' | 'webcodecs-unavailable' | 'container-codec-mismatch' | 'transparent-video-unsupported' | 'invalid-dimensions' | 'output-target-unsupported';
+export type CanRenderIssue = {
+    type: CanRenderIssueType;
+    message: string;
+    severity: 'error' | 'warning';
+};
+export type CanRenderMediaOnWebResult = {
+    canRender: boolean;
+    issues: CanRenderIssue[];
+    resolvedVideoCodec: WebRendererVideoCodec;
+    resolvedAudioCodec: WebRendererAudioCodec | null;
+    resolvedOutputTarget: WebRendererOutputTarget;
+};
+export type CanRenderMediaOnWebOptions = {
+    container?: WebRendererContainer;
+    videoCodec?: WebRendererVideoCodec;
+    audioCodec?: WebRendererAudioCodec | null;
+    width: number;
+    height: number;
+    transparent?: boolean;
+    muted?: boolean;
+    videoBitrate?: number | WebRendererQuality;
+    audioBitrate?: number | WebRendererQuality;
+    outputTarget?: WebRendererOutputTarget | null;
+};

package/dist/check-webgl-support.d.ts

@@ -0,0 +1,2 @@
+import type { CanRenderIssue } from './can-render-types';
+export declare const checkWebGLSupport: () => CanRenderIssue | null;

package/dist/create-audio-sample-source.d.ts

@@ -0,0 +1,9 @@
+import { AudioSampleSource, type Quality } from 'mediabunny';
+export declare const createAudioSampleSource: ({ muted, codec, bitrate, }: {
+    muted: boolean;
+    codec: "aac" | "alaw" | "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" | null;
+    bitrate: number | Quality;
+}) => {
+    audioSampleSource: AudioSampleSource;
+    [Symbol.dispose]: () => void;
+} | null;

package/dist/esm/index.mjs

@@ -36,6 +36,327 @@ var __callDispose = (stack, error, hasError) => {
   return next();
 };
 
+// src/can-render-media-on-web.ts
+import { canEncodeVideo } from "mediabunny";
+
+// src/can-use-webfs-target.ts
+var canUseWebFsWriter = async () => {
+  if (!("storage" in navigator)) {
+    return false;
+  }
+  if (!("getDirectory" in navigator.storage)) {
+    return false;
+  }
+  try {
+    const directoryHandle = await navigator.storage.getDirectory();
+    const fileHandle = await directoryHandle.getFileHandle("remotion-probe-web-fs-support", {
+      create: true
+    });
+    const canUse = fileHandle.createWritable !== undefined;
+    return canUse;
+  } catch {
+    return false;
+  }
+};
+
+// src/check-webgl-support.ts
+var checkWebGLSupport = () => {
+  try {
+    const canvas = new OffscreenCanvas(1, 1);
+    const gl = canvas.getContext("webgl2") || canvas.getContext("webgl");
+    if (!gl) {
+      return {
+        type: "webgl-unsupported",
+        message: "WebGL is not supported. 3D CSS transforms will fail.",
+        severity: "error"
+      };
+    }
+    return null;
+  } catch {
+    return {
+      type: "webgl-unsupported",
+      message: "WebGL is not supported. 3D CSS transforms will fail.",
+      severity: "error"
+    };
+  }
+};
+
+// src/mediabunny-mappings.ts
+import {
+  Mp4OutputFormat,
+  QUALITY_HIGH,
+  QUALITY_LOW,
+  QUALITY_MEDIUM,
+  QUALITY_VERY_HIGH,
+  QUALITY_VERY_LOW,
+  WebMOutputFormat
+} from "mediabunny";
+var codecToMediabunnyCodec = (codec) => {
+  switch (codec) {
+    case "h264":
+      return "avc";
+    case "h265":
+      return "hevc";
+    case "vp8":
+      return "vp8";
+    case "vp9":
+      return "vp9";
+    case "av1":
+      return "av1";
+    default:
+      throw new Error(`Unsupported codec: ${codec}`);
+  }
+};
+var containerToMediabunnyContainer = (container) => {
+  switch (container) {
+    case "mp4":
+      return new Mp4OutputFormat;
+    case "webm":
+      return new WebMOutputFormat;
+    default:
+      throw new Error(`Unsupported container: ${container}`);
+  }
+};
+var getDefaultVideoCodecForContainer = (container) => {
+  switch (container) {
+    case "mp4":
+      return "h264";
+    case "webm":
+      return "vp8";
+    default:
+      throw new Error(`Unsupported container: ${container}`);
+  }
+};
+var getQualityForWebRendererQuality = (quality) => {
+  switch (quality) {
+    case "very-low":
+      return QUALITY_VERY_LOW;
+    case "low":
+      return QUALITY_LOW;
+    case "medium":
+      return QUALITY_MEDIUM;
+    case "high":
+      return QUALITY_HIGH;
+    case "very-high":
+      return QUALITY_VERY_HIGH;
+    default:
+      throw new Error(`Unsupported quality: ${quality}`);
+  }
+};
+var getMimeType = (container) => {
+  switch (container) {
+    case "mp4":
+      return "video/mp4";
+    case "webm":
+      return "video/webm";
+    default:
+      throw new Error(`Unsupported container: ${container}`);
+  }
+};
+var getDefaultAudioCodecForContainer = (container) => {
+  switch (container) {
+    case "mp4":
+      return "aac";
+    case "webm":
+      return "opus";
+    default:
+      throw new Error(`Unsupported container: ${container}`);
+  }
+};
+var WEB_RENDERER_VIDEO_CODECS = [
+  "h264",
+  "h265",
+  "vp8",
+  "vp9",
+  "av1"
+];
+var getSupportedVideoCodecsForContainer = (container) => {
+  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 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;
+};
+
+// src/resolve-audio-codec.ts
+import { canEncodeAudio } from "mediabunny";
+var resolveAudioCodec = async (options) => {
+  const issues = [];
+  const { container, requestedCodec, userSpecifiedAudioCodec, bitrate } = options;
+  const audioCodec = requestedCodec ?? getDefaultAudioCodecForContainer(container);
+  const supportedAudioCodecs = getSupportedAudioCodecsForContainer(container);
+  if (!supportedAudioCodecs.includes(audioCodec)) {
+    issues.push({
+      type: "audio-codec-unsupported",
+      message: `Audio codec "${audioCodec}" is not supported for container "${container}". Supported: ${supportedAudioCodecs.join(", ")}`,
+      severity: "error"
+    });
+    return { codec: null, issues };
+  }
+  const mediabunnyAudioCodec = audioCodecToMediabunnyAudioCodec(audioCodec);
+  const canEncode = await canEncodeAudio(mediabunnyAudioCodec, { bitrate });
+  if (canEncode) {
+    return { codec: audioCodec, issues };
+  }
+  if (userSpecifiedAudioCodec) {
+    issues.push({
+      type: "audio-codec-unsupported",
+      message: `Audio codec "${audioCodec}" cannot be encoded by this browser. This is common for AAC on Firefox. Try using "opus" instead.`,
+      severity: "error"
+    });
+    return { codec: null, issues };
+  }
+  for (const fallbackCodec of supportedAudioCodecs) {
+    if (fallbackCodec !== audioCodec) {
+      const fallbackMediabunnyCodec = audioCodecToMediabunnyAudioCodec(fallbackCodec);
+      const canEncodeFallback = await canEncodeAudio(fallbackMediabunnyCodec, {
+        bitrate
+      });
+      if (canEncodeFallback) {
+        issues.push({
+          type: "audio-codec-unsupported",
+          message: `Falling back from audio codec "${audioCodec}" to "${fallbackCodec}" because the original codec cannot be encoded by this browser.`,
+          severity: "warning"
+        });
+        return { codec: fallbackCodec, issues };
+      }
+    }
+  }
+  issues.push({
+    type: "audio-codec-unsupported",
+    message: `No audio codec can be encoded by this browser for container "${container}".`,
+    severity: "error"
+  });
+  return { codec: null, issues };
+};
+
+// src/validate-dimensions.ts
+var validateDimensions = (options) => {
+  const { width, height, codec } = options;
+  if (codec === "h264" || codec === "h265") {
+    if (width % 2 !== 0 || height % 2 !== 0) {
+      return {
+        type: "invalid-dimensions",
+        message: `${codec.toUpperCase()} codec requires width and height to be multiples of 2. Got ${width}x${height}`,
+        severity: "error"
+      };
+    }
+  }
+  return null;
+};
+
+// 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 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"
+    });
+  }
+  let resolvedAudioCodec = null;
+  if (!muted) {
+    const audioResult = await resolveAudioCodec({
+      container,
+      requestedCodec: options.audioCodec,
+      userSpecifiedAudioCodec: options.audioCodec !== undefined && options.audioCodec !== null,
+      bitrate: resolvedAudioBitrate
+    });
+    resolvedAudioCodec = audioResult.codec;
+    issues.push(...audioResult.issues);
+  }
+  const webglIssue = checkWebGLSupport();
+  if (webglIssue) {
+    issues.push(webglIssue);
+  }
+  const canUseWebFs = await canUseWebFsWriter();
+  let resolvedOutputTarget;
+  if (options.outputTarget === "web-fs") {
+    if (!canUseWebFs) {
+      issues.push({
+        type: "output-target-unsupported",
+        message: 'The "web-fs" output target is not supported in this browser. The File System Access API is required.',
+        severity: "error"
+      });
+    }
+    resolvedOutputTarget = "web-fs";
+  } else if (options.outputTarget === "arraybuffer") {
+    resolvedOutputTarget = "arraybuffer";
+  } else {
+    resolvedOutputTarget = canUseWebFs ? "web-fs" : "arraybuffer";
+  }
+  return {
+    canRender: issues.filter((i) => i.severity === "error").length === 0,
+    issues,
+    resolvedVideoCodec: videoCodec,
+    resolvedAudioCodec,
+    resolvedOutputTarget
+  };
+};
+// src/get-encodable-codecs.ts
+import {
+  getEncodableAudioCodecs as mediabunnyGetEncodableAudioCodecs,
+  getEncodableVideoCodecs as mediabunnyGetEncodableVideoCodecs
+} from "mediabunny";
+var getEncodableVideoCodecs = async (container, options) => {
+  const supported = getSupportedVideoCodecsForContainer(container);
+  const mediabunnyCodecs = supported.map(codecToMediabunnyCodec);
+  const resolvedBitrate = options?.videoBitrate ? typeof options.videoBitrate === "number" ? options.videoBitrate : getQualityForWebRendererQuality(options.videoBitrate) : undefined;
+  const encodable = await mediabunnyGetEncodableVideoCodecs(mediabunnyCodecs, {
+    bitrate: resolvedBitrate
+  });
+  return supported.filter((c) => encodable.includes(codecToMediabunnyCodec(c)));
+};
+var getEncodableAudioCodecs = async (container, options) => {
+  const supported = getSupportedAudioCodecsForContainer(container);
+  const resolvedBitrate = options?.audioBitrate ? typeof options.audioBitrate === "number" ? options.audioBitrate : getQualityForWebRendererQuality(options.audioBitrate) : undefined;
+  const encodable = await mediabunnyGetEncodableAudioCodecs(supported, {
+    bitrate: resolvedBitrate
+  });
+  return supported.filter((c) => encodable.includes(c));
+};
 // src/render-media-on-web.tsx
 import { BufferTarget, StreamTarget } from "mediabunny";
 import { Internals as Internals7 } from "remotion";
@@ -167,24 +488,21 @@ var onlyInlineAudio = ({
   });
 };
 
-// src/can-use-webfs-target.ts
-var canUseWebFsWriter = async () => {
-  if (!("storage" in navigator)) {
-    return false;
-  }
-  if (!("getDirectory" in navigator.storage)) {
-    return false;
-  }
-  try {
-    const directoryHandle = await navigator.storage.getDirectory();
-    const fileHandle = await directoryHandle.getFileHandle("remotion-probe-web-fs-support", {
-      create: true
-    });
-    const canUse = fileHandle.createWritable !== undefined;
-    return canUse;
-  } catch {
-    return false;
+// src/create-audio-sample-source.ts
+import { AudioSampleSource } from "mediabunny";
+var createAudioSampleSource = ({
+  muted,
+  codec,
+  bitrate
+}) => {
+  if (muted || codec === null) {
+    return null;
   }
+  const audioSampleSource = new AudioSampleSource({
+    codec,
+    bitrate
+  });
+  return { audioSampleSource, [Symbol.dispose]: () => audioSampleSource.close() };
 };
 
 // src/create-scaffold.tsx
@@ -398,51 +716,6 @@ var getRealFrameRange = (durationInFrames, frameRange) => {
   return frameRange;
 };
 
-// src/get-audio-sample-source.ts
-import {
-  AudioSampleSource
-} from "mediabunny";
-
-// src/get-audio-encoding-config.ts
-import {
-  canEncodeAudio,
-  QUALITY_MEDIUM
-} from "mediabunny";
-var getDefaultAudioEncodingConfig = async () => {
-  const preferredDefaultAudioEncodingConfig = {
-    codec: "aac",
-    bitrate: QUALITY_MEDIUM
-  };
-  if (await canEncodeAudio(preferredDefaultAudioEncodingConfig.codec, preferredDefaultAudioEncodingConfig)) {
-    return preferredDefaultAudioEncodingConfig;
-  }
-  const backupDefaultAudioEncodingConfig = {
-    codec: "opus",
-    bitrate: QUALITY_MEDIUM
-  };
-  if (await canEncodeAudio(backupDefaultAudioEncodingConfig.codec, backupDefaultAudioEncodingConfig)) {
-    return backupDefaultAudioEncodingConfig;
-  }
-  return null;
-};
-
-// src/get-audio-sample-source.ts
-var addAudioSampleSource = async ({
-  muted,
-  output
-}) => {
-  if (muted) {
-    return null;
-  }
-  const defaultAudioEncodingConfig = await getDefaultAudioEncodingConfig();
-  if (!defaultAudioEncodingConfig) {
-    throw new Error("No default audio encoding config found");
-  }
-  const audioSampleSource = new AudioSampleSource(defaultAudioEncodingConfig);
-  output.addAudioTrack(audioSampleSource);
-  return { audioSampleSource, [Symbol.dispose]: () => audioSampleSource.close() };
-};
-
 // src/internal-state.ts
 var makeInternalState = () => {
   let drawnPrecomposedPixels = 0;
@@ -513,79 +786,6 @@ var makeVideoSampleSourceCleanup = (encodingConfig) => {
   };
 };
 
-// src/mediabunny-mappings.ts
-import {
-  Mp4OutputFormat,
-  QUALITY_HIGH,
-  QUALITY_LOW,
-  QUALITY_MEDIUM as QUALITY_MEDIUM2,
-  QUALITY_VERY_HIGH,
-  QUALITY_VERY_LOW,
-  WebMOutputFormat
-} from "mediabunny";
-var codecToMediabunnyCodec = (codec) => {
-  switch (codec) {
-    case "h264":
-      return "avc";
-    case "h265":
-      return "hevc";
-    case "vp8":
-      return "vp8";
-    case "vp9":
-      return "vp9";
-    case "av1":
-      return "av1";
-    default:
-      throw new Error(`Unsupported codec: ${codec}`);
-  }
-};
-var containerToMediabunnyContainer = (container) => {
-  switch (container) {
-    case "mp4":
-      return new Mp4OutputFormat;
-    case "webm":
-      return new WebMOutputFormat;
-    default:
-      throw new Error(`Unsupported container: ${container}`);
-  }
-};
-var getDefaultVideoCodecForContainer = (container) => {
-  switch (container) {
-    case "mp4":
-      return "h264";
-    case "webm":
-      return "vp8";
-    default:
-      throw new Error(`Unsupported container: ${container}`);
-  }
-};
-var getQualityForWebRendererQuality = (quality) => {
-  switch (quality) {
-    case "very-low":
-      return QUALITY_VERY_LOW;
-    case "low":
-      return QUALITY_LOW;
-    case "medium":
-      return QUALITY_MEDIUM2;
-    case "high":
-      return QUALITY_HIGH;
-    case "very-high":
-      return QUALITY_VERY_HIGH;
-    default:
-      throw new Error(`Unsupported quality: ${quality}`);
-  }
-};
-var getMimeType = (container) => {
-  switch (container) {
-    case "mp4":
-      return "video/mp4";
-    case "webm":
-      return "video/webm";
-    default:
-      throw new Error(`Unsupported container: ${container}`);
-  }
-};
-
 // src/render-operations-queue.ts
 var onlyOneRenderAtATimeQueue = {
   ref: Promise.resolve()
@@ -1362,7 +1562,7 @@ var calculateTransforms = ({
   if (!elementComputedStyle) {
     throw new Error("Element computed style not found");
   }
-  const needs3DTransformViaWebGL = !totalMatrix.isIdentity;
+  const needs3DTransformViaWebGL = !totalMatrix.is2D;
   const needsMaskImage = maskImageInfo !== null;
   return {
     dimensions,
@@ -2817,13 +3017,16 @@ var processNode = async ({
         });
       }
       if (precompositing.needs3DTransformViaWebGL) {
-        drawable = handle3dTransform({
+        const t = handle3dTransform({
           matrix: totalMatrix,
           precomposeRect,
           tempCanvas: drawable,
           rectAfterTransforms,
           internalState
         });
+        if (t) {
+          drawable = t;
+        }
       }
       const previousTransform = context.getTransform();
       if (drawable) {
@@ -3429,6 +3632,8 @@ var internalRenderMediaOnWeb = async ({
   mediaCacheSizeInBytes,
   schema,
   videoCodec: codec,
+  audioCodec: unresolvedAudioCodec,
+  audioBitrate,
   container,
   signal,
   onProgress,
@@ -3453,6 +3658,23 @@ var internalRenderMediaOnWeb = async ({
     if (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);
+    let finalAudioCodec = null;
+    if (!muted) {
+      const audioResult = await resolveAudioCodec({
+        container,
+        requestedCodec: unresolvedAudioCodec,
+        userSpecifiedAudioCodec: unresolvedAudioCodec !== undefined && unresolvedAudioCodec !== null,
+        bitrate: resolvedAudioBitrate
+      });
+      for (const issue of audioResult.issues) {
+        if (issue.severity === "error") {
+          return Promise.reject(new Error(issue.message));
+        }
+        Internals7.Log.warn({ logLevel, tag: "@remotion/web-renderer" }, issue.message);
+      }
+      finalAudioCodec = audioResult.codec;
+    }
     const resolved = await Internals7.resolveVideoConfig({
       calculateMetadata: composition.calculateMetadata ?? null,
       signal: signal ?? new AbortController().signal,
@@ -3521,10 +3743,14 @@ var internalRenderMediaOnWeb = async ({
           alpha: transparent ? "keep" : "discard"
         }), 0);
         outputWithCleanup.output.addVideoTrack(videoSampleSource.videoSampleSource);
-        const audioSampleSource = __using(__stack, await addAudioSampleSource({
+        const audioSampleSource = __using(__stack, createAudioSampleSource({
           muted,
-          output: outputWithCleanup.output
+          codec: finalAudioCodec ? audioCodecToMediabunnyAudioCodec(finalAudioCodec) : null,
+          bitrate: resolvedAudioBitrate
         }), 0);
+        if (audioSampleSource) {
+          outputWithCleanup.output.addAudioTrack(audioSampleSource.audioSampleSource);
+        }
         await outputWithCleanup.output.start();
         if (signal?.aborted) {
           throw new Error("renderMediaOnWeb() was cancelled");
@@ -3677,6 +3903,8 @@ var renderMediaOnWeb = (options) => {
     schema: options.schema ?? undefined,
     mediaCacheSizeInBytes: options.mediaCacheSizeInBytes ?? null,
     videoCodec: codec,
+    audioCodec: options.audioCodec ?? null,
+    audioBitrate: options.audioBitrate ?? "medium",
     container,
     signal: options.signal ?? null,
     onProgress: options.onProgress ?? null,
@@ -3812,5 +4040,12 @@ var renderStillOnWeb = (options) => {
 };
 export {
   renderStillOnWeb,
-  renderMediaOnWeb
+  renderMediaOnWeb,
+  getSupportedVideoCodecsForContainer,
+  getSupportedAudioCodecsForContainer,
+  getEncodableVideoCodecs,
+  getEncodableAudioCodecs,
+  getDefaultVideoCodecForContainer,
+  getDefaultAudioCodecForContainer,
+  canRenderMediaOnWeb
 };

package/dist/get-encodable-codecs.d.ts

@@ -0,0 +1,9 @@
+import { type WebRendererAudioCodec, type WebRendererContainer, type WebRendererQuality, type WebRendererVideoCodec } from './mediabunny-mappings';
+export type GetEncodableVideoCodecsOptions = {
+    videoBitrate?: number | WebRendererQuality;
+};
+export type GetEncodableAudioCodecsOptions = {
+    audioBitrate?: number | WebRendererQuality;
+};
+export declare const getEncodableVideoCodecs: (container: WebRendererContainer, options?: GetEncodableVideoCodecsOptions | undefined) => Promise<WebRendererVideoCodec[]>;
+export declare const getEncodableAudioCodecs: (container: WebRendererContainer, options?: GetEncodableAudioCodecsOptions | undefined) => Promise<WebRendererAudioCodec[]>;

package/dist/index.d.ts

@@ -1,7 +1,11 @@
 import './symbol-dispose';
 export type { EmittedArtifact, WebRendererOnArtifact } from './artifact';
+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 type { WebRendererContainer, WebRendererQuality, WebRendererVideoCodec, } from './mediabunny-mappings';
+export { getEncodableAudioCodecs, getEncodableVideoCodecs, type GetEncodableAudioCodecsOptions, type GetEncodableVideoCodecsOptions, } from './get-encodable-codecs';
+export { getDefaultAudioCodecForContainer, getDefaultVideoCodecForContainer, getSupportedAudioCodecsForContainer, getSupportedVideoCodecsForContainer, } 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';
 export type { RenderMediaOnWebOptions, RenderMediaOnWebProgress, RenderMediaOnWebProgressCallback, RenderMediaOnWebResult, } from './render-media-on-web';

package/dist/mediabunny-mappings.d.ts

@@ -2,9 +2,14 @@ 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 WebRendererQuality = 'very-low' | 'low' | 'medium' | 'high' | 'very-high';
 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 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" | "alaw" | "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";

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

@@ -3,7 +3,7 @@ import type { AnyZodObject, z } from 'zod';
 import { type WebRendererOnArtifact } from './artifact';
 import { type FrameRange } from './frame-range';
 import type { InternalState } from './internal-state';
-import type { WebRendererContainer, WebRendererQuality } from './mediabunny-mappings';
+import type { WebRendererAudioCodec, WebRendererContainer, WebRendererQuality } from './mediabunny-mappings';
 import { type WebRendererVideoCodec } from './mediabunny-mappings';
 import type { WebRendererOutputTarget } from './output-target';
 import type { CompositionCalculateMetadataOrExplicit } from './props-if-has-props';
@@ -35,6 +35,8 @@ type OptionalRenderMediaOnWebOptions<Schema extends AnyZodObject> = {
     schema: Schema | undefined;
     mediaCacheSizeInBytes: number | null;
     videoCodec: WebRendererVideoCodec;
+    audioCodec: WebRendererAudioCodec | null;
+    audioBitrate: number | WebRendererQuality;
     container: WebRendererContainer;
     signal: AbortSignal | null;
     onProgress: RenderMediaOnWebProgressCallback | null;

package/dist/renoun.d.ts

@@ -0,0 +1,119 @@
+/** Image format for encoded screenshot output. */
+export type ImageFormat = 'png' | 'jpeg' | 'webp';
+/** Options for rendering a screenshot to canvas. */
+export interface RenderOptions {
+    /**
+     * Canvas background color. Set to `null` (or omit) for a transparent canvas.
+     * When provided, the string is passed directly to `fillStyle`.
+     */
+    backgroundColor?: string | null;
+    /**
+     * Optional existing canvas to render into.
+     * When omitted, a new canvas element is created.
+     */
+    canvas?: HTMLCanvasElement;
+    /**
+     * Rendering scale factor. Defaults to `window.devicePixelRatio` (or `1`).
+     */
+    scale?: number;
+    /**
+     * Crop origin X (CSS pixels) relative to the element's left edge.
+     * Defaults to the element's left edge.
+     */
+    x?: number;
+    /**
+     * Crop origin Y (CSS pixels) relative to the element's top edge.
+     * Defaults to the element's top edge.
+     */
+    y?: number;
+    /**
+     * Output width in CSS pixels. Defaults to the element's width.
+     */
+    width?: number;
+    /**
+     * Output height in CSS pixels. Defaults to the element's height.
+     */
+    height?: number;
+    /**
+     * Controls how `position: fixed` elements outside the captured subtree are
+     * handled.
+     *
+     * - `none` – ignore all fixed elements outside `element`.
+     * - `intersecting` – include fixed elements whose bounding rect intersects the capture rect.
+     * - `all` – include all fixed elements that overlap the viewport.
+     */
+    includeFixed?: 'none' | 'intersecting' | 'all';
+}
+/** Options for encoding a canvas to an image format. */
+export interface EncodeOptions {
+    /**
+     * Image format to encode. Defaults to `'png'`.
+     */
+    format?: ImageFormat;
+    /**
+     * Image quality for lossy formats (`jpeg`, `webp`). A number between `0` and `1`.
+     * Ignored for `png`. Defaults to `0.92`.
+     */
+    quality?: number;
+}
+/** Combined options for one-shot screenshot methods that render and encode. */
+export type ScreenshotOptions = RenderOptions & EncodeOptions;
+/**
+ * A promise-like object representing a screenshot capture. The underlying
+ * render happens once; subsequent calls to `.canvas()`, `.blob()`, or `.url()`
+ * reuse the same rendered canvas.
+ */
+export interface ScreenshotTask extends Promise<HTMLCanvasElement> {
+    /** Returns the rendered canvas. */
+    canvas(): Promise<HTMLCanvasElement>;
+    /** Encodes the rendered canvas to a Blob. */
+    blob(options?: EncodeOptions): Promise<Blob>;
+    /**
+     * Encodes the rendered canvas to a Blob and creates an object URL.
+     * Remember to call `URL.revokeObjectURL(url)` when done to avoid memory leaks.
+     */
+    url(options?: EncodeOptions): Promise<string>;
+}
+/**
+ * Renders a DOM element into a canvas using modern browser features.
+ *
+ * Returns a `ScreenshotTask` that is both a Promise and provides methods
+ * to encode the rendered canvas. The underlying render happens once;
+ * subsequent calls to `.canvas()`, `.blob()`, or `.url()` reuse the same result.
+ *
+ * This implementation targets evergreen browsers only and assumes a real DOM +
+ * Canvas2D environment (not Node.js).
+ *
+ * @example
+ * // Capture handle pattern - render once, encode multiple ways
+ * const shot = screenshot(element, { scale: 2 })
+ * const canvas = await shot.canvas()
+ * const pngBlob = await shot.blob({ format: 'png' })
+ * const webpUrl = await shot.url({ format: 'webp', quality: 0.9 })
+ *
+ * @example
+ * // Direct await returns the canvas
+ * const canvas = await screenshot(element)
+ *
+ * @example
+ * // One-shot convenience methods
+ * const canvas = await screenshot.canvas(element, { scale: 2 })
+ * const blob = await screenshot.blob(element, { format: 'jpeg', quality: 0.85 })
+ * const url = await screenshot.url(element, { format: 'png' })
+ */
+declare function screenshot(target: Element | string, options?: RenderOptions): ScreenshotTask;
+declare namespace screenshot {
+    var canvas: (target: string | Element, options?: RenderOptions | undefined) => Promise<HTMLCanvasElement>;
+}
+declare namespace screenshot {
+    var blob: (target: string | Element, options?: ScreenshotOptions | undefined) => Promise<Blob>;
+}
+declare namespace screenshot {
+    var url: (target: string | Element, options?: ScreenshotOptions | undefined) => Promise<string>;
+}
+export { screenshot };
+declare global {
+    interface CanvasRenderingContext2D {
+        _filterPolyfillValue?: string;
+    }
+}

package/dist/resolve-audio-codec.d.ts

@@ -0,0 +1,13 @@
+import { type Quality } from 'mediabunny';
+import type { CanRenderIssue } from './can-render-types';
+import { type WebRendererAudioCodec, type WebRendererContainer } from './mediabunny-mappings';
+export type ResolveAudioCodecResult = {
+    codec: WebRendererAudioCodec | null;
+    issues: CanRenderIssue[];
+};
+export declare const resolveAudioCodec: (options: {
+    container: WebRendererContainer;
+    requestedCodec: WebRendererAudioCodec | null | undefined;
+    userSpecifiedAudioCodec: boolean;
+    bitrate: number | Quality;
+}) => Promise<ResolveAudioCodecResult>;

package/dist/validate-dimensions.d.ts

@@ -0,0 +1,7 @@
+import type { CanRenderIssue } from './can-render-types';
+import type { WebRendererVideoCodec } from './mediabunny-mappings';
+export declare const validateDimensions: (options: {
+    width: number;
+    height: number;
+    codec: WebRendererVideoCodec;
+}) => CanRenderIssue | null;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/web-renderer"
 	},
 	"name": "@remotion/web-renderer",
-	"version": "4.0.401",
+	"version": "4.0.403",
 	"main": "dist/index.js",
 	"type": "module",
 	"sideEffects": false,
@@ -18,14 +18,14 @@
 	"author": "Remotion <jonny@remotion.dev>",
 	"license": "UNLICENSED",
 	"dependencies": {
-		"@remotion/licensing": "4.0.401",
-		"remotion": "4.0.401",
+		"@remotion/licensing": "4.0.403",
+		"remotion": "4.0.403",
 		"mediabunny": "1.27.3"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.401",
-		"@remotion/player": "4.0.401",
-		"@remotion/media": "4.0.401",
+		"@remotion/eslint-config-internal": "4.0.403",
+		"@remotion/player": "4.0.403",
+		"@remotion/media": "4.0.403",
 		"@typescript/native-preview": "7.0.0-dev.20260105.1",
 		"@vitejs/plugin-react": "4.1.0",
 		"@vitest/browser-playwright": "4.0.9",