@remotion/web-renderer 4.0.446 → 4.0.448

package/dist/audio.d.ts

@@ -1,6 +1,7 @@
 import type { TRenderAsset } from 'remotion';
-export declare const onlyInlineAudio: ({ assets, fps, timestamp, }: {
+export declare const onlyInlineAudio: ({ assets, fps, timestamp, sampleRate, }: {
     assets: TRenderAsset[];
     fps: number;
     timestamp: number;
+    sampleRate: number;
 }) => AudioData | null;

package/dist/create-scaffold.d.ts

@@ -1,12 +1,13 @@
 import { type ComponentType } from 'react';
 import type { Codec, DelayRenderScope, LogLevel, TRenderAsset } from 'remotion';
 import type { $ZodObject } from 'zod/v4/core';
+import type { HtmlInCanvasContext } from './html-in-canvas';
 import type { TimeUpdaterRef } from './update-time';
 export type ErrorHolder = {
     error: Error | null;
 };
 export declare function checkForError(errorHolder: ErrorHolder): void;
-export declare function createScaffold<Props extends Record<string, unknown>>({ width, height, delayRenderTimeoutInMilliseconds, logLevel, resolvedProps, id, mediaCacheSizeInBytes, durationInFrames, fps, initialFrame, schema, Component, audioEnabled, videoEnabled, defaultCodec, defaultOutName }: {
+export declare function createScaffold<Props extends Record<string, unknown>>({ width, height, delayRenderTimeoutInMilliseconds, logLevel, resolvedProps, id, mediaCacheSizeInBytes, durationInFrames, fps, initialFrame, schema, Component, audioEnabled, videoEnabled, defaultCodec, defaultOutName, allowHtmlInCanvas }: {
     width: number;
     height: number;
     delayRenderTimeoutInMilliseconds: number;
@@ -23,6 +24,7 @@ export declare function createScaffold<Props extends Record<string, unknown>>({
     videoEnabled: boolean;
     defaultCodec: Codec | null;
     defaultOutName: string | null;
+    allowHtmlInCanvas: boolean;
 }): {
     delayRenderScope: DelayRenderScope;
     div: HTMLDivElement;
@@ -31,5 +33,6 @@ export declare function createScaffold<Props extends Record<string, unknown>>({
         collectAssets: () => TRenderAsset[];
     } | null>;
     errorHolder: ErrorHolder;
+    htmlInCanvasContext: HtmlInCanvasContext | null;
     [Symbol.dispose]: () => void;
 };

package/dist/drawing/calculate-transforms.d.ts

@@ -16,6 +16,7 @@ export declare const calculateTransforms: ({ element, rootElement, }: {
     precompositing: {
         needs3DTransformViaWebGL: boolean;
         needsMaskImage: LinearGradientInfo | null;
+        needsFilter: string | null;
         needsPrecompositing: boolean;
     };
 };

package/dist/drawing/handle-filter.d.ts

@@ -0,0 +1 @@
+export declare const getPrecomposeRectForFilter: (element: HTMLElement | SVGElement) => DOMRect;

package/dist/esm/index.mjs

@@ -584,7 +584,7 @@ var getEncodableAudioCodecs = async (container, options) => {
 };
 // src/render-media-on-web.tsx
 import { BufferTarget, StreamTarget } from "mediabunny";
-import { Internals as Internals8 } from "remotion";
+import { Internals as Internals9 } from "remotion";
 import { VERSION } from "remotion/version";
 
 // src/add-sample.ts
@@ -670,7 +670,6 @@ var handleArtifacts = () => {
 
 // src/audio.ts
 var TARGET_NUMBER_OF_CHANNELS = 2;
-var TARGET_SAMPLE_RATE = 48000;
 function mixAudio(waves, length) {
   if (waves.length === 1 && waves[0].length === length) {
     return waves[0];
@@ -691,13 +690,14 @@ function mixAudio(waves, length) {
 var onlyInlineAudio = ({
   assets,
   fps,
-  timestamp
+  timestamp,
+  sampleRate
 }) => {
   const inlineAudio = assets.filter((asset) => asset.type === "inline-audio");
   if (inlineAudio.length === 0) {
     return null;
   }
-  const expectedLength = Math.round(TARGET_NUMBER_OF_CHANNELS * TARGET_SAMPLE_RATE / fps);
+  const expectedLength = Math.round(TARGET_NUMBER_OF_CHANNELS * sampleRate / fps);
   for (const asset of inlineAudio) {
     if (asset.toneFrequency !== 1) {
       throw new Error("Setting the toneFrequency is not supported yet in web rendering.");
@@ -709,7 +709,7 @@ var onlyInlineAudio = ({
     format: "s16",
     numberOfChannels: TARGET_NUMBER_OF_CHANNELS,
     numberOfFrames: expectedLength / TARGET_NUMBER_OF_CHANNELS,
-    sampleRate: TARGET_SAMPLE_RATE,
+    sampleRate,
     timestamp
   });
 };
@@ -823,6 +823,82 @@ import { flushSync as flushSync2 } from "react-dom";
 import ReactDOM from "react-dom/client";
 import { Internals as Internals3 } from "remotion";
 
+// src/html-in-canvas.ts
+var supportsNativeHtmlInCanvas = () => {
+  if (typeof document === "undefined") {
+    return false;
+  }
+  const ctx = document.createElement("canvas").getContext("2d");
+  return typeof ctx?.drawElementImage === "function";
+};
+var setupHtmlInCanvas = ({
+  wrapper,
+  div,
+  width,
+  height
+}) => {
+  if (!supportsNativeHtmlInCanvas()) {
+    return null;
+  }
+  const layoutCanvas = document.createElement("canvas");
+  layoutCanvas.layoutSubtree = true;
+  layoutCanvas.width = width;
+  layoutCanvas.height = height;
+  layoutCanvas.style.position = "absolute";
+  layoutCanvas.style.top = "0";
+  layoutCanvas.style.left = "0";
+  layoutCanvas.style.width = `${width}px`;
+  layoutCanvas.style.height = `${height}px`;
+  layoutCanvas.style.visibility = "visible";
+  const maybeCtx = layoutCanvas.getContext("2d");
+  if (!maybeCtx || typeof maybeCtx.drawElementImage !== "function") {
+    return null;
+  }
+  if (typeof layoutCanvas.requestPaint !== "function") {
+    return null;
+  }
+  wrapper.removeChild(div);
+  layoutCanvas.appendChild(div);
+  wrapper.appendChild(layoutCanvas);
+  return { layoutCanvas, ctx: maybeCtx };
+};
+var waitForPaint = (layoutCanvas) => {
+  return new Promise((resolve) => {
+    layoutCanvas.addEventListener("paint", () => resolve(), { once: true });
+    layoutCanvas.requestPaint();
+  });
+};
+var drawWithHtmlInCanvas = async ({
+  htmlInCanvasContext,
+  element,
+  scaledWidth,
+  scaledHeight
+}) => {
+  const { ctx, layoutCanvas } = htmlInCanvasContext;
+  await waitForPaint(layoutCanvas);
+  layoutCanvas.width = scaledWidth;
+  layoutCanvas.height = scaledHeight;
+  ctx.reset();
+  ctx.drawElementImage(element, 0, 0, scaledWidth, scaledHeight);
+  const offscreen = new OffscreenCanvas(scaledWidth, scaledHeight);
+  const offCtx = offscreen.getContext("2d");
+  if (!offCtx) {
+    throw new Error("Could not get offscreen context");
+  }
+  offCtx.drawImage(layoutCanvas, 0, 0);
+  return offCtx;
+};
+var teardownHtmlInCanvas = ({
+  htmlInCanvasContext,
+  wrapper,
+  div
+}) => {
+  const { layoutCanvas } = htmlInCanvasContext;
+  layoutCanvas.removeChild(div);
+  wrapper.removeChild(layoutCanvas);
+  wrapper.appendChild(div);
+};
+
 // src/update-time.tsx
 import { useImperativeHandle, useState } from "react";
 import { flushSync } from "react-dom";
@@ -943,7 +1019,8 @@ function createScaffold({
   audioEnabled,
   videoEnabled,
   defaultCodec,
-  defaultOutName
+  defaultOutName,
+  allowHtmlInCanvas
 }) {
   if (!ReactDOM.createRoot) {
     throw new Error("@remotion/web-renderer requires React 18 or higher");
@@ -969,6 +1046,7 @@ function createScaffold({
   const cleanupCSS = Internals3.CSSUtils.injectCSS(Internals3.CSSUtils.makeDefaultPreviewCSS(`.${scaffoldClassName}`, "white"));
   wrapper.appendChild(div);
   document.body.appendChild(wrapper);
+  const htmlInCanvasContext = allowHtmlInCanvas ? setupHtmlInCanvas({ wrapper, div, width, height }) : null;
   const errorHolder = { error: null };
   const root = ReactDOM.createRoot(div, {
     onUncaughtError: (err, errorInfo) => {
@@ -1029,7 +1107,8 @@ function createScaffold({
                 defaultOutName: defaultOutName ?? null,
                 defaultVideoImageFormat: null,
                 defaultPixelFormat: null,
-                defaultProResProfile: null
+                defaultProResProfile: null,
+                defaultSampleRate: null
               },
               folders: []
             },
@@ -1059,8 +1138,12 @@ function createScaffold({
     delayRenderScope,
     div,
     errorHolder,
+    htmlInCanvasContext,
     [Symbol.dispose]: () => {
       root.unmount();
+      if (htmlInCanvasContext) {
+        teardownHtmlInCanvas({ htmlInCanvasContext, wrapper, div });
+      }
       div.remove();
       wrapper.remove();
       cleanupCSS();
@@ -1274,6 +1357,9 @@ var sendUsageEvent = async ({
   });
 };
 
+// src/take-screenshot.ts
+import { Internals as Internals8 } from "remotion";
+
 // src/tree-walker-cleanup-after-children.ts
 var createTreeWalkerCleanupAfterChildren = (treeWalker) => {
   const cleanupAfterChildren = [];
@@ -1972,6 +2058,7 @@ var calculateTransforms = ({
   let opacity = 1;
   let elementComputedStyle = null;
   let maskImageInfo = null;
+  let filterValue = null;
   while (parent) {
     const computedStyle = getComputedStyle(parent);
     if (parent === element) {
@@ -1979,6 +2066,16 @@ var calculateTransforms = ({
       opacity = parseFloat(computedStyle.opacity);
       const maskImageValue = getMaskImageValue(computedStyle);
       maskImageInfo = maskImageValue ? parseMaskImage(maskImageValue) : null;
+      const computedFilter = computedStyle.filter;
+      if (computedFilter && computedFilter !== "none") {
+        filterValue = computedFilter;
+        const originalFilter = parent.style.filter;
+        parent.style.filter = "none";
+        const parentRefFilter = parent;
+        toReset.push(() => {
+          parentRefFilter.style.filter = originalFilter;
+        });
+      }
       const originalMaskImage = parent.style.maskImage;
       const originalWebkitMaskImage = parent.style.webkitMaskImage;
       parent.style.maskImage = "none";
@@ -2042,6 +2139,7 @@ var calculateTransforms = ({
   }
   const needs3DTransformViaWebGL = !totalMatrix.is2D;
   const needsMaskImage = maskImageInfo !== null;
+  const needsFilter = filterValue !== null;
   return {
     dimensions,
     totalMatrix,
@@ -2057,7 +2155,8 @@ var calculateTransforms = ({
     precompositing: {
       needs3DTransformViaWebGL,
       needsMaskImage: maskImageInfo,
-      needsPrecompositing: Boolean(needs3DTransformViaWebGL || needsMaskImage)
+      needsFilter: filterValue,
+      needsPrecompositing: Boolean(needs3DTransformViaWebGL || needsMaskImage || needsFilter)
     }
   };
 };
@@ -3424,6 +3523,11 @@ var handle3dTransform = ({
   return transformed;
 };
 
+// src/drawing/handle-filter.ts
+var getPrecomposeRectForFilter = (element) => {
+  return getBiggestBoundingClientRect(element);
+};
+
 // src/drawing/handle-mask.ts
 var getPrecomposeRectForMask = (element) => {
   const boundingRect = getBiggestBoundingClientRect(element);
@@ -3511,6 +3615,12 @@ var processNode = async ({
       if (precompositing.needsMaskImage) {
         precomposeRect = roundToExpandRect(getPrecomposeRectForMask(element));
       }
+      if (precompositing.needsFilter) {
+        precomposeRect = roundToExpandRect(getWiderRectAndExpand({
+          firstRect: precomposeRect,
+          secondRect: getPrecomposeRectForFilter(element)
+        }));
+      }
       if (precompositing.needs3DTransformViaWebGL) {
         const tentativePrecomposeRect = getPrecomposeRectFor3DTransform({
           element,
@@ -3573,8 +3683,13 @@ var processNode = async ({
         }
       }
       const previousTransform = context.getTransform();
+      const previousFilter = context.filter;
       context.setTransform(new DOMMatrix);
+      if (precompositing.needsFilter) {
+        context.filter = precompositing.needsFilter;
+      }
       context.drawImage(drawable, 0, drawable.height - rectAfterTransforms.height, rectAfterTransforms.width, rectAfterTransforms.height, rectAfterTransforms.left - parentRect.x, rectAfterTransforms.top - parentRect.y, rectAfterTransforms.width, rectAfterTransforms.height);
+      context.filter = previousFilter;
       context.setTransform(previousTransform);
       Internals6.Log.trace({
         logLevel,
@@ -3918,10 +4033,32 @@ var createLayer = async ({
   logLevel,
   internalState,
   onlyBackgroundClipText,
-  cutout
+  cutout,
+  htmlInCanvasContext,
+  onHtmlInCanvasLayerOutcome
 }) => {
   const scaledWidth = Math.ceil(cutout.width * scale);
   const scaledHeight = Math.ceil(cutout.height * scale);
+  if (!onlyBackgroundClipText && element instanceof HTMLElement && htmlInCanvasContext && onHtmlInCanvasLayerOutcome) {
+    try {
+      const offCtx = await drawWithHtmlInCanvas({
+        htmlInCanvasContext,
+        element,
+        scaledWidth,
+        scaledHeight
+      });
+      onHtmlInCanvasLayerOutcome({ native: true });
+      return offCtx;
+    } catch (err) {
+      const detail = err instanceof Error ? err.message : JSON.stringify(err);
+      onHtmlInCanvasLayerOutcome({
+        native: false,
+        reason: `drawElementImage failed (${detail}); falling back to the built-in DOM composer.`,
+        shouldWarn: true
+      });
+      Internals8.Log.verbose({ logLevel, tag: "@remotion/web-renderer" }, "HTML-in-canvas capture failed, falling back to software compose", err);
+    }
+  }
   const canvas = new OffscreenCanvas(scaledWidth, scaledHeight);
   const context = canvas.getContext("2d");
   if (!context) {
@@ -4166,11 +4303,25 @@ var internalRenderMediaOnWeb = async ({
   licenseKey,
   muted,
   scale,
-  isProduction
+  isProduction,
+  allowHtmlInCanvas,
+  sampleRate
 }) => {
   let __stack2 = [];
   try {
     validateScale(scale);
+    let htmlInCanvasLayerOutcomeReported = false;
+    const onHtmlInCanvasLayerOutcome = (outcome) => {
+      if (htmlInCanvasLayerOutcomeReported) {
+        return;
+      }
+      htmlInCanvasLayerOutcomeReported = true;
+      if (outcome.native) {
+        Internals9.Log.warn({ logLevel, tag: "@remotion/web-renderer" }, "Using Chromium experimental HTML-in-canvas (drawElementImage) for video frames. See https://github.com/WICG/html-in-canvas");
+      } else if (outcome.shouldWarn) {
+        Internals9.Log.warn({ logLevel, tag: "@remotion/web-renderer" }, `Not using HTML-in-canvas: ${outcome.reason}`);
+      }
+    };
     const outputTarget = userDesiredOutputTarget === null ? await canUseWebFsWriter() ? "web-fs" : "arraybuffer" : userDesiredOutputTarget;
     if (outputTarget === "web-fs") {
       await cleanupStaleOpfsFiles();
@@ -4201,11 +4352,11 @@ var internalRenderMediaOnWeb = async ({
         if (issue.severity === "error") {
           return Promise.reject(new Error(issue.message));
         }
-        Internals8.Log.warn({ logLevel, tag: "@remotion/web-renderer" }, issue.message);
+        Internals9.Log.warn({ logLevel, tag: "@remotion/web-renderer" }, issue.message);
       }
       finalAudioCodec = audioResult.codec;
     }
-    const resolved = await Internals8.resolveVideoConfig({
+    const resolved = await Internals9.resolveVideoConfig({
       calculateMetadata: composition.calculateMetadata ?? null,
       signal: signal ?? new AbortController().signal,
       defaultProps: composition.defaultProps ?? {},
@@ -4236,9 +4387,38 @@ var internalRenderMediaOnWeb = async ({
       videoEnabled,
       initialFrame: 0,
       defaultCodec: resolved.defaultCodec,
-      defaultOutName: resolved.defaultOutName
+      defaultOutName: resolved.defaultOutName,
+      allowHtmlInCanvas
     }), 0);
-    const { delayRenderScope, div, timeUpdater, collectAssets, errorHolder } = scaffold;
+    const {
+      delayRenderScope,
+      div,
+      timeUpdater,
+      collectAssets,
+      errorHolder,
+      htmlInCanvasContext
+    } = scaffold;
+    if (allowHtmlInCanvas && !htmlInCanvasContext) {
+      if (!supportsNativeHtmlInCanvas()) {
+        onHtmlInCanvasLayerOutcome({
+          native: false,
+          reason: "This browser does not expose CanvasRenderingContext2D.prototype.drawElementImage. In Chromium, enable chrome://flags/#canvas-draw-element and use a version that ships the API.",
+          shouldWarn: false
+        });
+      } else {
+        onHtmlInCanvasLayerOutcome({
+          native: false,
+          reason: "drawElementImage is available but canvas.requestPaint() is missing. Use a Chromium version that ships requestPaint.",
+          shouldWarn: true
+        });
+      }
+    } else if (!allowHtmlInCanvas) {
+      onHtmlInCanvasLayerOutcome({
+        native: false,
+        reason: "allowHtmlInCanvas is false; using the built-in DOM composer.",
+        shouldWarn: false
+      });
+    }
     const internalState = __using(__stack2, makeInternalState(), 0);
     const keepalive = __using(__stack2, createBackgroundKeepalive({
       fps: resolved.fps,
@@ -4351,7 +4531,9 @@ var internalRenderMediaOnWeb = async ({
               logLevel,
               internalState,
               onlyBackgroundClipText: false,
-              cutout: new DOMRect(0, 0, resolved.width, resolved.height)
+              cutout: new DOMRect(0, 0, resolved.width, resolved.height),
+              htmlInCanvasContext,
+              onHtmlInCanvasLayerOutcome: htmlInCanvasContext ? onHtmlInCanvasLayerOutcome : undefined
             });
             internalState.addCreateFrameTime(performance.now() - createFrameStart);
             layerCanvas = layer.canvas;
@@ -4402,7 +4584,7 @@ var internalRenderMediaOnWeb = async ({
           if (signal?.aborted) {
             throw new Error("renderMediaOnWeb() was cancelled");
           }
-          const audio = muted ? null : onlyInlineAudio({ assets, fps: resolved.fps, timestamp });
+          const audio = muted ? null : onlyInlineAudio({ assets, fps: resolved.fps, timestamp, sampleRate });
           internalState.addAudioMixingTime(performance.now() - audioCombineStart);
           const addSampleStart = performance.now();
           const encodingPromises = [];
@@ -4427,7 +4609,7 @@ var internalRenderMediaOnWeb = async ({
         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`);
+        Internals9.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`);
         if (webFsTarget) {
           sendUsageEvent({
             licenseKey: licenseKey ?? null,
@@ -4478,7 +4660,7 @@ var internalRenderMediaOnWeb = async ({
           isStill: false,
           isProduction: isProduction ?? true
         }).catch((err2) => {
-          Internals8.Log.error({ logLevel: "error", tag: "web-renderer" }, "Failed to send usage event", err2);
+          Internals9.Log.error({ logLevel: "error", tag: "web-renderer" }, "Failed to send usage event", err2);
         });
       }
       throw err;
@@ -4515,33 +4697,80 @@ var renderMediaOnWeb = (options) => {
     licenseKey: options.licenseKey ?? null,
     muted: options.muted ?? false,
     scale: options.scale ?? 1,
-    isProduction: options.isProduction ?? true
+    isProduction: options.isProduction ?? true,
+    allowHtmlInCanvas: options.allowHtmlInCanvas ?? false,
+    sampleRate: options.sampleRate ?? 48000
   }));
   return onlyOneRenderAtATimeQueue.ref;
 };
 // src/render-still-on-web.tsx
 import {
-  Internals as Internals9
+  Internals as Internals10
 } from "remotion";
+
+// src/render-still-screenshot-task.ts
+var mimeTypeForFormat = (format) => {
+  if (format === "jpeg") {
+    return "image/jpeg";
+  }
+  if (format === "webp") {
+    return "image/webp";
+  }
+  return "image/png";
+};
+var encodeCanvasToBlob = async (canvas, options) => {
+  const format = options?.format ?? "png";
+  const type = mimeTypeForFormat(format);
+  if (format === "png") {
+    return canvas.convertToBlob({ type });
+  }
+  return canvas.convertToBlob({
+    type,
+    quality: options?.quality
+  });
+};
+var createRenderStillOnWebResult = ({
+  canvas,
+  internalState
+}) => {
+  return {
+    internalState,
+    canvas: () => Promise.resolve(canvas),
+    blob: (options) => encodeCanvasToBlob(canvas, options),
+    url: async (options) => {
+      const blob = await encodeCanvasToBlob(canvas, options);
+      return URL.createObjectURL(blob);
+    }
+  };
+};
+
+// src/render-still-on-web.tsx
 async function internalRenderStillOnWeb({
   frame,
   delayRenderTimeoutInMilliseconds,
   logLevel,
   inputProps,
   schema,
-  imageFormat,
   mediaCacheSizeInBytes,
   composition,
   signal,
   onArtifact,
   licenseKey,
   scale,
-  isProduction
+  isProduction,
+  allowHtmlInCanvas
 }) {
   let __stack = [];
   try {
     validateScale(scale);
-    const resolved = await Internals9.resolveVideoConfig({
+    const onHtmlInCanvasLayerOutcome = (outcome) => {
+      if (outcome.native) {
+        Internals10.Log.warn({ logLevel, tag: "@remotion/web-renderer" }, "Using Chromium experimental HTML-in-canvas (drawElementImage) for this frame. Pixels may differ from the built-in DOM composer. Set allowHtmlInCanvas: false to force software rasterization. See https://github.com/WICG/html-in-canvas");
+      } else if (outcome.shouldWarn) {
+        Internals10.Log.warn({ logLevel, tag: "@remotion/web-renderer" }, `Not using HTML-in-canvas: ${outcome.reason}`);
+      }
+    };
+    const resolved = await Internals10.resolveVideoConfig({
       calculateMetadata: composition.calculateMetadata ?? null,
       signal: signal ?? new AbortController().signal,
       defaultProps: composition.defaultProps ?? {},
@@ -4572,9 +4801,37 @@ async function internalRenderStillOnWeb({
       schema: schema ?? null,
       initialFrame: frame,
       defaultCodec: resolved.defaultCodec,
-      defaultOutName: resolved.defaultOutName
+      defaultOutName: resolved.defaultOutName,
+      allowHtmlInCanvas
     }), 0);
-    const { delayRenderScope, div, collectAssets, errorHolder } = scaffold;
+    const {
+      delayRenderScope,
+      div,
+      collectAssets,
+      errorHolder,
+      htmlInCanvasContext
+    } = scaffold;
+    if (allowHtmlInCanvas && !htmlInCanvasContext) {
+      if (!supportsNativeHtmlInCanvas()) {
+        onHtmlInCanvasLayerOutcome({
+          native: false,
+          reason: "This browser does not expose CanvasRenderingContext2D.prototype.drawElementImage. In Chromium, enable chrome://flags/#canvas-draw-element and use a version that ships the API.",
+          shouldWarn: false
+        });
+      } else {
+        onHtmlInCanvasLayerOutcome({
+          native: false,
+          reason: "drawElementImage is available but canvas.requestPaint() is missing. Use a Chromium version that ships requestPaint.",
+          shouldWarn: true
+        });
+      }
+    } else if (!allowHtmlInCanvas) {
+      onHtmlInCanvasLayerOutcome({
+        native: false,
+        reason: "allowHtmlInCanvas is false; using the built-in DOM composer.",
+        shouldWarn: false
+      });
+    }
     const artifactsHandler = handleArtifacts();
     try {
       if (signal?.aborted) {
@@ -4598,14 +4855,19 @@ async function internalRenderStillOnWeb({
         logLevel,
         internalState,
         onlyBackgroundClipText: false,
-        cutout: new DOMRect(0, 0, resolved.width, resolved.height)
-      });
-      const imageData = await capturedFrame.canvas.convertToBlob({
-        type: `image/${imageFormat}`
+        cutout: new DOMRect(0, 0, resolved.width, resolved.height),
+        htmlInCanvasContext,
+        onHtmlInCanvasLayerOutcome: htmlInCanvasContext ? onHtmlInCanvasLayerOutcome : undefined
       });
+      const { canvas } = capturedFrame;
       const assets = collectAssets.current.collectAssets();
       if (onArtifact) {
-        await artifactsHandler.handle({ imageData, frame, assets, onArtifact });
+        await artifactsHandler.handle({
+          imageData: canvas,
+          frame,
+          assets,
+          onArtifact
+        });
       }
       sendUsageEvent({
         licenseKey: licenseKey ?? null,
@@ -4614,7 +4876,7 @@ async function internalRenderStillOnWeb({
         isStill: true,
         isProduction
       });
-      return { blob: imageData, internalState };
+      return createRenderStillOnWebResult({ canvas, internalState });
     } catch (err) {
       if (!signal?.aborted) {
         sendUsageEvent({
@@ -4624,7 +4886,7 @@ async function internalRenderStillOnWeb({
           isStill: true,
           isProduction
         }).catch((err2) => {
-          Internals9.Log.error({ logLevel: "error", tag: "web-renderer" }, "Failed to send usage event", err2);
+          Internals10.Log.error({ logLevel: "error", tag: "web-renderer" }, "Failed to send usage event", err2);
         });
       }
       throw err;
@@ -4646,7 +4908,8 @@ var renderStillOnWeb = (options) => {
     onArtifact: options.onArtifact ?? null,
     licenseKey: options.licenseKey ?? null,
     scale: options.scale ?? 1,
-    isProduction: options.isProduction ?? true
+    isProduction: options.isProduction ?? true,
+    allowHtmlInCanvas: options.allowHtmlInCanvas ?? false
   }));
   return onlyOneRenderAtATimeQueue.ref;
 };

package/dist/html-in-canvas.d.ts

@@ -0,0 +1,43 @@
+type Canvas2DWithDrawElement = CanvasRenderingContext2D & {
+    drawElementImage: (element: Element, dx: number, dy: number, dwidth: number, dheight: number) => DOMMatrix;
+};
+type HTMLCanvasWithLayoutSubtree = HTMLCanvasElement & {
+    layoutSubtree?: boolean;
+    requestPaint?: () => void;
+};
+export declare const supportsNativeHtmlInCanvas: () => boolean;
+export type HtmlInCanvasContext = {
+    layoutCanvas: HTMLCanvasWithLayoutSubtree;
+    ctx: Canvas2DWithDrawElement;
+};
+/**
+ * Sets up a persistent layoutsubtree canvas that wraps the scaffold div.
+ * The div becomes a direct child of the canvas, which is required for drawElementImage.
+ * Must be called once before rendering begins; the canvas stays in the DOM for the
+ * lifetime of the render.
+ */
+export declare const setupHtmlInCanvas: ({ wrapper, div, width, height, }: {
+    wrapper: HTMLDivElement;
+    div: HTMLDivElement;
+    width: number;
+    height: number;
+}) => HtmlInCanvasContext | null;
+/**
+ * Triggers a fresh paint record via requestPaint(), waits for the paint event,
+ * then captures the element into an OffscreenCanvas using drawElementImage.
+ *
+ * The caller is responsible for ensuring the frame content is ready (via
+ * waitForReady) before calling this function.
+ */
+export declare const drawWithHtmlInCanvas: ({ htmlInCanvasContext, element, scaledWidth, scaledHeight, }: {
+    htmlInCanvasContext: HtmlInCanvasContext;
+    element: HTMLElement;
+    scaledWidth: number;
+    scaledHeight: number;
+}) => Promise<OffscreenCanvasRenderingContext2D>;
+export declare const teardownHtmlInCanvas: ({ htmlInCanvasContext, wrapper, div, }: {
+    htmlInCanvasContext: HtmlInCanvasContext;
+    wrapper: HTMLDivElement;
+    div: HTMLDivElement;
+}) => void;
+export {};

package/dist/index.d.ts

@@ -10,5 +10,6 @@ export type { WebRendererOutputTarget } from './output-target';
 export { renderMediaOnWeb } from './render-media-on-web';
 export type { RenderMediaOnWebOptions, RenderMediaOnWebProgress, RenderMediaOnWebProgressCallback, RenderMediaOnWebResult, WebRendererHardwareAcceleration, } from './render-media-on-web';
 export { renderStillOnWeb } from './render-still-on-web';
-export type { RenderStillOnWebImageFormat, RenderStillOnWebOptions, } from './render-still-on-web';
+export type { RenderStillOnWebEncodeOptions, RenderStillOnWebImageFormat, RenderStillOnWebOptions, RenderStillOnWebResult, } from './render-still-on-web';
+export type { HtmlInCanvasLayerOutcome } from './take-screenshot';
 export type { OnFrameCallback } from './validate-video-frame';

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

@@ -65,6 +65,8 @@ type OptionalRenderMediaOnWebOptions<Schema extends $ZodObject> = {
     isProduction: boolean;
     muted: boolean;
     scale: number;
+    allowHtmlInCanvas: boolean;
+    sampleRate: number;
 };
 export type RenderMediaOnWebOptions<Schema extends $ZodObject, Props extends Record<string, unknown>> = MandatoryRenderMediaOnWebOptions<Schema, Props> & Partial<OptionalRenderMediaOnWebOptions<Schema>> & InputPropsIfHasProps<Schema, Props>;
 export declare const renderMediaOnWeb: <Schema extends $ZodObject<Readonly<Readonly<{

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

@@ -3,10 +3,10 @@ import type { $ZodObject } from 'zod/v4/core';
 import type { WebRendererOnArtifact } from './artifact';
 import type { CompositionCalculateMetadataOrExplicit } from './props-if-has-props';
 import type { InputPropsIfHasProps } from './render-media-on-web';
-export type RenderStillOnWebImageFormat = 'png' | 'jpeg' | 'webp';
+import { type RenderStillOnWebResult } from './render-still-screenshot-task';
+export type { RenderStillOnWebEncodeOptions, RenderStillOnWebImageFormat, RenderStillOnWebResult, } from './render-still-screenshot-task';
 type MandatoryRenderStillOnWebOptions<Schema extends $ZodObject, Props extends Record<string, unknown>> = {
     frame: number;
-    imageFormat: RenderStillOnWebImageFormat;
 } & {
     composition: CompositionCalculateMetadataOrExplicit<Schema, Props>;
 };
@@ -20,29 +20,9 @@ type OptionalRenderStillOnWebOptions<Schema extends $ZodObject> = {
     licenseKey: string | null;
     scale: number;
     isProduction: boolean;
+    allowHtmlInCanvas: boolean;
 };
 export type RenderStillOnWebOptions<Schema extends $ZodObject, Props extends Record<string, unknown>> = MandatoryRenderStillOnWebOptions<Schema, Props> & Partial<OptionalRenderStillOnWebOptions<Schema>> & InputPropsIfHasProps<Schema, Props>;
 export declare const renderStillOnWeb: <Schema extends $ZodObject<Readonly<Readonly<{
     [k: string]: import("zod/v4/core").$ZodType<unknown, unknown, import("zod/v4/core").$ZodTypeInternals<unknown, unknown>>;
-}>>, import("zod/v4/core").$ZodObjectConfig>, Props extends Record<string, unknown>>(options: RenderStillOnWebOptions<Schema, Props>) => Promise<{
-    blob: Blob;
-    internalState: {
-        getDrawn3dPixels: () => number;
-        getPrecomposedTiles: () => number;
-        addPrecompose: ({ canvasWidth, canvasHeight, }: {
-            canvasWidth: number;
-            canvasHeight: number;
-        }) => void;
-        helperCanvasState: import("./internal-state").HelperCanvasState;
-        [Symbol.dispose]: () => void;
-        getWaitForReadyTime: () => number;
-        addWaitForReadyTime: (time: number) => void;
-        getAddSampleTime: () => number;
-        addAddSampleTime: (time: number) => void;
-        getCreateFrameTime: () => number;
-        addCreateFrameTime: (time: number) => void;
-        getAudioMixingTime: () => number;
-        addAudioMixingTime: (time: number) => void;
-    };
-}>;
-export {};
+}>>, import("zod/v4/core").$ZodObjectConfig>, Props extends Record<string, unknown>>(options: RenderStillOnWebOptions<Schema, Props>) => Promise<RenderStillOnWebResult>;

package/dist/render-still-screenshot-task.d.ts

@@ -0,0 +1,45 @@
+import type { InternalState } from './internal-state';
+export type RenderStillOnWebImageFormat = 'png' | 'jpeg' | 'webp';
+export type RenderStillOnWebEncodeOptions = {
+    format?: RenderStillOnWebImageFormat;
+    /**
+     * Encoder quality for `jpeg` and `webp`, between `0` and `1`.
+     * Ignored for `png`.
+     */
+    quality?: number;
+};
+/**
+ * Outcome of `renderStillOnWeb()`. The frame is already rendered; use
+ * `canvas()`, `blob()`, or `url()` to read pixels or encode (same pattern as
+ * Renoun’s `screenshot()` task).
+ */
+export type RenderStillOnWebResult = {
+    internalState: InternalState;
+    canvas(): Promise<OffscreenCanvas>;
+    blob(options?: RenderStillOnWebEncodeOptions): Promise<Blob>;
+    /**
+     * Creates an object URL from an encoded blob. Call `URL.revokeObjectURL()` when done.
+     */
+    url(options?: RenderStillOnWebEncodeOptions): Promise<string>;
+};
+export declare const createRenderStillOnWebResult: ({ canvas, internalState, }: {
+    canvas: OffscreenCanvas;
+    internalState: {
+        getDrawn3dPixels: () => number;
+        getPrecomposedTiles: () => number;
+        addPrecompose: ({ canvasWidth, canvasHeight, }: {
+            canvasWidth: number;
+            canvasHeight: number;
+        }) => void;
+        helperCanvasState: import("./internal-state").HelperCanvasState;
+        [Symbol.dispose]: () => void;
+        getWaitForReadyTime: () => number;
+        addWaitForReadyTime: (time: number) => void;
+        getAddSampleTime: () => number;
+        addAddSampleTime: (time: number) => void;
+        getCreateFrameTime: () => number;
+        addCreateFrameTime: (time: number) => void;
+        getAudioMixingTime: () => number;
+        addAudioMixingTime: (time: number) => void;
+    };
+}) => RenderStillOnWebResult;

package/dist/take-screenshot.d.ts

@@ -1,4 +1,12 @@
-export declare const createLayer: ({ element, scale, logLevel, internalState, onlyBackgroundClipText, cutout, }: {
+import type { HtmlInCanvasContext } from './html-in-canvas';
+export type HtmlInCanvasLayerOutcome = {
+    native: true;
+} | {
+    native: false;
+    reason: string;
+    shouldWarn: boolean;
+};
+export declare const createLayer: ({ element, scale, logLevel, internalState, onlyBackgroundClipText, cutout, htmlInCanvasContext, onHtmlInCanvasLayerOutcome, }: {
     element: HTMLElement | SVGElement;
     scale: number;
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
@@ -22,4 +30,6 @@ export declare const createLayer: ({ element, scale, logLevel, internalState, on
     };
     onlyBackgroundClipText: boolean;
     cutout: DOMRect;
+    htmlInCanvasContext?: HtmlInCanvasContext | null | undefined;
+    onHtmlInCanvasLayerOutcome?: ((outcome: HtmlInCanvasLayerOutcome) => void) | undefined;
 }) => Promise<OffscreenCanvasRenderingContext2D>;

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.446",
+	"version": "4.0.448",
 	"main": "dist/index.js",
 	"type": "module",
 	"scripts": {
@@ -22,16 +22,16 @@
 		"@mediabunny/mp3-encoder": "1.39.2",
 		"@mediabunny/aac-encoder": "1.39.2",
 		"@mediabunny/flac-encoder": "1.39.2",
-		"@remotion/licensing": "4.0.446",
-		"remotion": "4.0.446",
+		"@remotion/licensing": "4.0.448",
+		"remotion": "4.0.448",
 		"mediabunny": "1.39.2"
 	},
 	"devDependencies": {
 		"@react-three/fiber": "9.2.0",
-		"@remotion/eslint-config-internal": "4.0.446",
-		"@remotion/player": "4.0.446",
-		"@remotion/media": "4.0.446",
-		"@remotion/three": "4.0.446",
+		"@remotion/eslint-config-internal": "4.0.448",
+		"@remotion/player": "4.0.448",
+		"@remotion/media": "4.0.448",
+		"@remotion/three": "4.0.448",
 		"@types/three": "0.170.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1",
 		"@vitejs/plugin-react": "4.3.4",