@remotion/web-renderer 4.0.489 → 4.0.491

package/README.md

@@ -1,6 +1,6 @@
 # @remotion/web-renderer
 
-Render videos in the browser (not yet released)
+Render videos in the browser
 
 [![NPM Downloads](https://img.shields.io/npm/dm/@remotion/web-renderer.svg?style=flat&color=black&label=Downloads)](https://npmcharts.com/compare/@remotion/web-renderer?minimal=true)
 

package/dist/create-scaffold.d.ts

@@ -7,7 +7,7 @@ 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, allowHtmlInCanvas, pixelDensity }: {
+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, useHtmlInCanvas, pixelDensity }: {
     width: number;
     height: number;
     delayRenderTimeoutInMilliseconds: number;
@@ -24,7 +24,7 @@ export declare function createScaffold<Props extends Record<string, unknown>>({
     videoEnabled: boolean;
     defaultCodec: Codec | null;
     defaultOutName: string | null;
-    allowHtmlInCanvas: boolean;
+    useHtmlInCanvas: boolean;
     pixelDensity: number;
 }): {
     delayRenderScope: DelayRenderScope;

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

@@ -1,7 +1,10 @@
 import type { LinearGradientInfo } from './parse-linear-gradient';
-export declare const calculateTransforms: ({ element, rootElement, }: {
+type TransformStyle = Pick<CSSStyleDeclaration, 'display' | 'rotate' | 'scale' | 'transform' | 'transformOrigin'>;
+export type TransformStyleCache = WeakMap<Element, TransformStyle>;
+export declare const calculateTransforms: ({ element, rootElement, transformStyleCache, }: {
     element: HTMLElement | SVGElement;
     rootElement: HTMLElement | SVGElement;
+    transformStyleCache: TransformStyleCache;
 }) => {
     dimensions: DOMRect;
     totalMatrix: DOMMatrix;
@@ -20,3 +23,4 @@ export declare const calculateTransforms: ({ element, rootElement, }: {
         needsPrecompositing: boolean;
     };
 };
+export {};

package/dist/drawing/has-transform.d.ts

@@ -1,4 +1,4 @@
-export declare const hasTransformCssValue: (style: CSSStyleDeclaration) => boolean;
-export declare const hasRotateCssValue: (style: CSSStyleDeclaration) => boolean;
-export declare const hasScaleCssValue: (style: CSSStyleDeclaration) => boolean;
-export declare const hasAnyTransformCssValue: (style: CSSStyleDeclaration) => boolean;
+export declare const hasTransformCssValue: (style: Pick<CSSStyleDeclaration, "transform">) => boolean;
+export declare const hasRotateCssValue: (style: Pick<CSSStyleDeclaration, "rotate">) => boolean;
+export declare const hasScaleCssValue: (style: Pick<CSSStyleDeclaration, "scale">) => boolean;
+export declare const hasAnyTransformCssValue: (style: Pick<CSSStyleDeclaration, "rotate" | "scale" | "transform">) => boolean;

package/dist/drawing/process-node.d.ts

@@ -1,3 +1,4 @@
+import { type TransformStyleCache } from './calculate-transforms';
 import type { DrawFn } from './drawn-fn';
 export type ProcessNodeReturnValue = {
     type: 'continue';
@@ -5,7 +6,7 @@ export type ProcessNodeReturnValue = {
 } | {
     type: 'skip-children';
 };
-export declare const processNode: ({ element, context, draw, logLevel, parentRect, internalState, rootElement, scale, waitForPageResponsiveness, }: {
+export declare const processNode: ({ element, context, draw, logLevel, parentRect, internalState, rootElement, scale, waitForPageResponsiveness, transformStyleCache, }: {
     element: HTMLElement | SVGElement;
     context: OffscreenCanvasRenderingContext2D;
     draw: DrawFn;
@@ -32,4 +33,5 @@ export declare const processNode: ({ element, context, draw, logLevel, parentRec
     rootElement: HTMLElement | SVGElement;
     scale: number;
     waitForPageResponsiveness: (() => Promise<void>) | null;
+    transformStyleCache: TransformStyleCache;
 }) => Promise<ProcessNodeReturnValue>;

package/dist/drawing/text/handle-text-node.d.ts

@@ -1,5 +1,6 @@
+import type { TransformStyleCache } from '../calculate-transforms';
 import type { ProcessNodeReturnValue } from '../process-node';
-export declare const handleTextNode: ({ node, context, logLevel, parentRect, internalState, rootElement, onlyBackgroundClipText, scale, waitForPageResponsiveness, }: {
+export declare const handleTextNode: ({ node, context, logLevel, parentRect, internalState, rootElement, onlyBackgroundClipText, scale, waitForPageResponsiveness, transformStyleCache, }: {
     node: Text;
     context: OffscreenCanvasRenderingContext2D;
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
@@ -26,4 +27,5 @@ export declare const handleTextNode: ({ node, context, logLevel, parentRect, int
     onlyBackgroundClipText: boolean;
     scale: number;
     waitForPageResponsiveness: (() => Promise<void>) | null;
+    transformStyleCache: TransformStyleCache;
 }) => Promise<ProcessNodeReturnValue>;

package/dist/esm/index.mjs

@@ -824,6 +824,8 @@ import ReactDOM from "react-dom/client";
 import { Internals as Internals3 } from "remotion";
 
 // src/html-in-canvas.ts
+var nestedHtmlInCanvasSupport = null;
+var forceDisableHtmlInCanvasForTesting = false;
 var supportsNativeHtmlInCanvas = () => {
   if (typeof document === "undefined") {
     return false;
@@ -831,6 +833,121 @@ var supportsNativeHtmlInCanvas = () => {
   const ctx = document.createElement("canvas").getContext("2d");
   return typeof ctx?.drawElementImage === "function";
 };
+var runNestedHtmlInCanvasProbe = () => {
+  if (!supportsNativeHtmlInCanvas() || !document.body) {
+    return Promise.resolve(false);
+  }
+  const outer = document.createElement("canvas");
+  const inner = document.createElement("canvas");
+  const outerTarget = document.createElement("div");
+  const innerTarget = document.createElement("div");
+  const outerCtx = outer.getContext("2d");
+  const innerCtx = inner.getContext("2d");
+  if (!outerCtx || !innerCtx || typeof outer.requestPaint !== "function" || typeof inner.requestPaint !== "function") {
+    return Promise.resolve(false);
+  }
+  outer.layoutSubtree = true;
+  inner.layoutSubtree = true;
+  outer.width = 4;
+  outer.height = 4;
+  inner.width = 4;
+  inner.height = 4;
+  Object.assign(outer.style, {
+    display: "block",
+    height: "4px",
+    left: "0",
+    pointerEvents: "none",
+    position: "fixed",
+    top: "0",
+    visibility: "visible",
+    width: "4px",
+    zIndex: "2147483647"
+  });
+  Object.assign(inner.style, {
+    display: "block",
+    height: "4px",
+    width: "4px"
+  });
+  Object.assign(outerTarget.style, {
+    display: "block",
+    height: "4px",
+    width: "4px"
+  });
+  Object.assign(innerTarget.style, {
+    backgroundColor: "rgb(255, 0, 0)",
+    display: "block",
+    height: "4px",
+    width: "4px"
+  });
+  inner.appendChild(innerTarget);
+  outerTarget.appendChild(inner);
+  outer.appendChild(outerTarget);
+  document.body.appendChild(outer);
+  return new Promise((resolve) => {
+    let innerPainted = false;
+    let settled = false;
+    let timeout = null;
+    const settle = (supported) => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      if (timeout !== null) {
+        window.clearTimeout(timeout);
+      }
+      outer.remove();
+      resolve(supported);
+    };
+    timeout = window.setTimeout(() => settle(false), 1000);
+    inner.addEventListener("paint", () => {
+      try {
+        innerCtx.reset();
+        const transform = innerCtx.drawElementImage(innerTarget, 0, 0, 4, 4);
+        innerTarget.style.transform = transform.toString();
+        innerPainted = true;
+        requestAnimationFrame(() => outer.requestPaint());
+      } catch {
+        settle(false);
+      }
+    });
+    outer.addEventListener("paint", () => {
+      if (!innerPainted) {
+        return;
+      }
+      try {
+        outerCtx.reset();
+        if (typeof outer.captureElementImage !== "function") {
+          settle(false);
+          return;
+        }
+        const elementImage = outer.captureElementImage(outerTarget);
+        const transform = outerCtx.drawElementImage(elementImage, 0, 0, 4, 4);
+        elementImage.close();
+        outerTarget.style.transform = transform.toString();
+        const pixel = outerCtx.getImageData(2, 2, 1, 1).data;
+        settle(pixel[0] > 200 && pixel[1] < 20 && pixel[2] < 20 && pixel[3] > 200);
+      } catch {
+        settle(false);
+      }
+    });
+    inner.requestPaint();
+  });
+};
+var supportsNestedHtmlInCanvas = () => {
+  if (forceDisableHtmlInCanvasForTesting) {
+    return Promise.resolve(false);
+  }
+  if (!nestedHtmlInCanvasSupport) {
+    nestedHtmlInCanvasSupport = runNestedHtmlInCanvasProbe();
+  }
+  return nestedHtmlInCanvasSupport;
+};
+var countLayoutSubtreeCanvases = (element) => {
+  return Array.from(element.querySelectorAll("canvas")).filter((canvas) => canvas.layoutSubtree === true).length;
+};
+var containsLayoutSubtreeCanvas = (element) => {
+  return countLayoutSubtreeCanvases(element) > 0;
+};
 var setupHtmlInCanvas = ({
   wrapper,
   div,
@@ -872,14 +989,36 @@ var drawWithHtmlInCanvas = async ({
   htmlInCanvasContext,
   element,
   scaledWidth,
-  scaledHeight
+  scaledHeight,
+  waitForRenderReady,
+  useElementImage
 }) => {
   const { ctx, layoutCanvas } = htmlInCanvasContext;
+  if (layoutCanvas.width !== scaledWidth || layoutCanvas.height !== scaledHeight) {
+    layoutCanvas.width = scaledWidth;
+    layoutCanvas.height = scaledHeight;
+  }
   await waitForPaint(layoutCanvas);
-  layoutCanvas.width = scaledWidth;
-  layoutCanvas.height = scaledHeight;
+  const nestedPaintCycles = useElementImage ? countLayoutSubtreeCanvases(element) * 2 + 1 : 0;
+  for (let i = 0;i < nestedPaintCycles; i++) {
+    await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+    await waitForRenderReady();
+    await waitForPaint(layoutCanvas);
+  }
   ctx.reset();
-  ctx.drawElementImage(element, 0, 0, scaledWidth, scaledHeight);
+  if (useElementImage) {
+    if (typeof layoutCanvas.captureElementImage !== "function") {
+      throw new Error("canvas.captureElementImage() is unavailable");
+    }
+    const elementImage = layoutCanvas.captureElementImage(element);
+    try {
+      ctx.drawElementImage(elementImage, 0, 0, scaledWidth, scaledHeight);
+    } finally {
+      elementImage.close();
+    }
+  } else {
+    ctx.drawElementImage(element, 0, 0, scaledWidth, scaledHeight);
+  }
   const offscreen = new OffscreenCanvas(scaledWidth, scaledHeight);
   const offCtx = offscreen.getContext("2d");
   if (!offCtx) {
@@ -1020,7 +1159,7 @@ function createScaffold({
   videoEnabled,
   defaultCodec,
   defaultOutName,
-  allowHtmlInCanvas,
+  useHtmlInCanvas,
   pixelDensity
 }) {
   if (!ReactDOM.createRoot) {
@@ -1047,7 +1186,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 htmlInCanvasContext = useHtmlInCanvas ? setupHtmlInCanvas({ wrapper, div, width, height }) : null;
   const errorHolder = { error: null };
   const root = ReactDOM.createRoot(div, {
     onUncaughtError: (err, errorInfo) => {
@@ -2092,6 +2231,15 @@ var filterRequiresPrecompositing = (filter) => {
   }
   return null;
 };
+var snapshotTransformStyle = (computedStyle) => {
+  return {
+    display: computedStyle.display,
+    rotate: computedStyle.rotate,
+    scale: computedStyle.scale,
+    transform: computedStyle.transform,
+    transformOrigin: computedStyle.transformOrigin
+  };
+};
 var isReplacedElement = (element) => {
   return element instanceof HTMLImageElement || element instanceof HTMLVideoElement || element instanceof HTMLCanvasElement || element instanceof HTMLIFrameElement || element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement || element instanceof HTMLObjectElement || element instanceof HTMLEmbedElement;
 };
@@ -2142,7 +2290,8 @@ var getGlobalTransformOrigin = ({ transform }) => {
 };
 var calculateTransforms = ({
   element,
-  rootElement
+  rootElement,
+  transformStyleCache
 }) => {
   let parent = element;
   const transforms = [];
@@ -2152,10 +2301,19 @@ var calculateTransforms = ({
   let maskImageInfo = null;
   let filterForPrecompositing = null;
   while (parent) {
+    const cachedTransformStyle = transformStyleCache.get(parent);
+    const shouldReadComputedStyle = parent === element || cachedTransformStyle === undefined;
     const originalTransition = parent.style.transition;
     parent.style.transition = "none";
-    const computedStyle = getComputedStyle(parent);
+    const computedStyle = shouldReadComputedStyle ? getComputedStyle(parent) : null;
+    const transformStyle = computedStyle === null ? cachedTransformStyle : snapshotTransformStyle(computedStyle);
+    if (computedStyle !== null) {
+      transformStyleCache.set(parent, transformStyle);
+    }
     if (parent === element) {
+      if (computedStyle === null) {
+        throw new Error("Element computed style not found");
+      }
       elementComputedStyle = computedStyle;
       opacity = parseFloat(computedStyle.opacity);
       const maskImageValue = getMaskImageValue(computedStyle);
@@ -2178,9 +2336,9 @@ var calculateTransforms = ({
         }
       });
     }
-    const hasApplicableTransformCssValue = canApplyCssTransforms({ computedStyle, element: parent }) && hasAnyTransformCssValue(computedStyle);
+    const hasApplicableTransformCssValue = canApplyCssTransforms({ computedStyle: transformStyle, element: parent }) && hasAnyTransformCssValue(transformStyle);
     if (hasApplicableTransformCssValue || parent === element) {
-      const toParse = hasApplicableTransformCssValue && hasTransformCssValue(computedStyle) ? computedStyle.transform : undefined;
+      const toParse = hasApplicableTransformCssValue && hasTransformCssValue(transformStyle) ? transformStyle.transform : undefined;
       const matrix = new DOMMatrix(toParse);
       const resetTransforms = makeTransformResetter(parent);
       const { scale, rotate } = parent.style;
@@ -2195,7 +2353,7 @@ var calculateTransforms = ({
       const cleanup = resetTransforms(hasApplicableTransformCssValue);
       transforms.push({
         element: parent,
-        transformOrigin: computedStyle.transformOrigin,
+        transformOrigin: transformStyle.transformOrigin,
         boundingClientRect: null,
         matrices: additionalMatrices
       });
@@ -2805,7 +2963,8 @@ var drawBackground = async ({
         internalState,
         scale,
         onlyBackgroundClipText: true,
-        waitForPageResponsiveness: null
+        waitForPageResponsiveness: null,
+        waitForRenderReady: () => Promise.resolve()
       });
       onlyBackgroundClipText.setTransform(new DOMMatrix().scale(scale, scale));
       element.style.backgroundClip = originalBackgroundClip;
@@ -4000,13 +4159,15 @@ var processNode = async ({
   internalState,
   rootElement,
   scale,
-  waitForPageResponsiveness
+  waitForPageResponsiveness,
+  transformStyleCache
 }) => {
   let __stack = [];
   try {
     const transforms = __using(__stack, calculateTransforms({
       element,
-      rootElement
+      rootElement,
+      transformStyleCache
     }), 0);
     const { opacity, computedStyle, totalMatrix, dimensions, precompositing } = transforms;
     if (opacity === 0) {
@@ -4065,7 +4226,8 @@ var processNode = async ({
         internalState,
         scale,
         onlyBackgroundClipText: false,
-        waitForPageResponsiveness
+        waitForPageResponsiveness,
+        waitForRenderReady: () => Promise.resolve()
       });
       if (waitForPageResponsiveness !== null) {
         await waitForPageResponsiveness();
@@ -4173,29 +4335,25 @@ var applyTextTransform = (text, transform) => {
 };
 
 // src/drawing/text/find-line-breaks.text.ts
+var wordSegmenter = new Intl.Segmenter("en", { granularity: "word" });
 var findWords = (span) => {
   const originalText = span.textContent;
-  const segmenter = new Intl.Segmenter("en", { granularity: "word" });
-  const segments = segmenter.segment(span.textContent);
-  const words = Array.from(segments).map((s) => s.segment);
+  const segments = Array.from(wordSegmenter.segment(originalText));
   const tokens = [];
-  for (let i = 0;i < words.length; i++) {
-    const wordsBefore = words.slice(0, i);
-    const wordsAfter = words.slice(i + 1);
-    const word = words[i];
-    const wordsBeforeText = wordsBefore.join("");
-    const wordsAfterText = wordsAfter.join("");
+  for (const { index, segment } of segments) {
+    const wordsBeforeText = originalText.slice(0, index);
+    const wordsAfterText = originalText.slice(index + segment.length);
     const beforeNode = document.createTextNode(wordsBeforeText);
     const afterNode = document.createTextNode(wordsAfterText);
     const interstitialNode = document.createElement("span");
-    interstitialNode.textContent = word;
+    interstitialNode.textContent = segment;
     span.textContent = "";
     span.appendChild(beforeNode);
     span.appendChild(interstitialNode);
     span.appendChild(afterNode);
     const rect = interstitialNode.getBoundingClientRect();
     span.textContent = originalText;
-    tokens.push({ text: word, rect });
+    tokens.push({ text: segment, rect });
   }
   return tokens;
 };
@@ -4492,10 +4650,10 @@ var drawText = ({
     const ctm = contextToDraw.getTransform();
     const blurScale = Math.hypot(ctm.a, ctm.b);
     const { strokeFirst } = parsePaintOrder(paintOrder);
+    const measurements = contextToDraw.measureText(originalText);
+    const { fontBoundingBoxDescent, fontBoundingBoxAscent } = measurements;
+    const fontHeight = fontBoundingBoxAscent + fontBoundingBoxDescent;
     for (const token of tokens) {
-      const measurements = contextToDraw.measureText(originalText);
-      const { fontBoundingBoxDescent, fontBoundingBoxAscent } = measurements;
-      const fontHeight = fontBoundingBoxAscent + fontBoundingBoxDescent;
       const leading = token.rect.height - fontHeight;
       const halfLeading = leading / 2;
       const x = (isRTL ? token.rect.right : token.rect.left) - parentRect.x;
@@ -4552,7 +4710,8 @@ var handleTextNode = async ({
   rootElement,
   onlyBackgroundClipText,
   scale,
-  waitForPageResponsiveness
+  waitForPageResponsiveness,
+  transformStyleCache
 }) => {
   const span = document.createElement("span");
   const parent = node.parentNode;
@@ -4570,7 +4729,8 @@ var handleTextNode = async ({
     internalState,
     rootElement,
     scale,
-    waitForPageResponsiveness
+    waitForPageResponsiveness,
+    transformStyleCache
   });
   parent.insertBefore(node, span);
   parent.removeChild(span);
@@ -4587,7 +4747,8 @@ var walkOverNode = ({
   rootElement,
   onlyBackgroundClipText,
   scale,
-  waitForPageResponsiveness
+  waitForPageResponsiveness,
+  transformStyleCache
 }) => {
   if (node instanceof HTMLElement || node instanceof SVGElement) {
     return processNode({
@@ -4599,7 +4760,8 @@ var walkOverNode = ({
       internalState,
       rootElement,
       scale,
-      waitForPageResponsiveness
+      waitForPageResponsiveness,
+      transformStyleCache
     });
   }
   if (node instanceof Text) {
@@ -4612,7 +4774,8 @@ var walkOverNode = ({
       rootElement,
       onlyBackgroundClipText,
       scale,
-      waitForPageResponsiveness
+      waitForPageResponsiveness,
+      transformStyleCache
     });
   }
   throw new Error("Unknown node type");
@@ -4645,6 +4808,7 @@ var compose = async ({
   let __stack = [];
   try {
     const treeWalker = document.createTreeWalker(element, onlyBackgroundClipText ? NodeFilter.SHOW_TEXT : NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, getFilterFunction);
+    const transformStyleCache = new WeakMap;
     if (onlyBackgroundClipText) {
       treeWalker.nextNode();
       if (!treeWalker.currentNode) {
@@ -4664,7 +4828,8 @@ var compose = async ({
         rootElement: element,
         onlyBackgroundClipText,
         scale,
-        waitForPageResponsiveness
+        waitForPageResponsiveness,
+        transformStyleCache
       });
       if (val.type === "skip-children") {
         if (!skipToNextNonDescendant(treeWalker)) {
@@ -4699,17 +4864,21 @@ var createLayer = async ({
   cutout,
   htmlInCanvasContext,
   onHtmlInCanvasLayerOutcome,
-  waitForPageResponsiveness
+  waitForPageResponsiveness,
+  waitForRenderReady
 }) => {
   const scaledWidth = Math.ceil(cutout.width * scale);
   const scaledHeight = Math.ceil(cutout.height * scale);
   if (!onlyBackgroundClipText && element instanceof HTMLElement && htmlInCanvasContext && onHtmlInCanvasLayerOutcome) {
+    const hasNestedHtmlInCanvas = containsLayoutSubtreeCanvas(element);
     try {
       const offCtx = await drawWithHtmlInCanvas({
         htmlInCanvasContext,
         element,
         scaledWidth,
-        scaledHeight
+        scaledHeight,
+        waitForRenderReady,
+        useElementImage: hasNestedHtmlInCanvas
       });
       onHtmlInCanvasLayerOutcome({ native: true });
       return offCtx;
@@ -4970,7 +5139,6 @@ var internalRenderMediaOnWeb = async ({
   muted,
   scale,
   isProduction,
-  allowHtmlInCanvas,
   sampleRate
 }) => {
   let __stack2 = [];
@@ -4984,7 +5152,7 @@ var internalRenderMediaOnWeb = async ({
       }
       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");
+        Internals9.Log.warn({ logLevel, tag: "@remotion/web-renderer" }, "Using Chromium experimental HTML-in-canvas (drawElementImage) for video frames. See https://remotion.dev/docs/client-side-rendering/html-in-canvas");
       } else if (outcome.shouldWarn) {
         Internals9.Log.warn({ logLevel, tag: "@remotion/web-renderer" }, `Not using HTML-in-canvas: ${outcome.reason}`);
       }
@@ -5038,6 +5206,7 @@ var internalRenderMediaOnWeb = async ({
     if (signal?.aborted) {
       return Promise.reject(new Error("renderMediaOnWeb() was cancelled"));
     }
+    const useHtmlInCanvas = await supportsNestedHtmlInCanvas();
     const scaffold = __using(__stack2, createScaffold({
       width: resolved.width,
       height: resolved.height,
@@ -5055,7 +5224,7 @@ var internalRenderMediaOnWeb = async ({
       initialFrame: 0,
       defaultCodec: resolved.defaultCodec,
       defaultOutName: resolved.defaultOutName,
-      allowHtmlInCanvas,
+      useHtmlInCanvas,
       pixelDensity: scale
     }), 0);
     const {
@@ -5066,27 +5235,6 @@ var internalRenderMediaOnWeb = async ({
       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 pageResponsivenessController = createPageResponsivenessController({
       intervalInMilliseconds: pageResponsivenessIntervalInMilliseconds,
@@ -5105,6 +5253,17 @@ var internalRenderMediaOnWeb = async ({
       fps: resolved.fps,
       logLevel
     }), 0);
+    const waitForRenderReady = async () => {
+      await waitForReady({
+        timeoutInMilliseconds: delayRenderTimeoutInMilliseconds,
+        scope: delayRenderScope,
+        signal,
+        apiName: "renderMediaOnWeb",
+        internalState,
+        keepalive
+      });
+      checkForError(errorHolder);
+    };
     const artifactsHandler = handleArtifacts();
     const webFsTarget = outputTarget === "web-fs" ? await createWebFsTarget() : null;
     const target = webFsTarget ? new StreamTarget(webFsTarget.stream) : new BufferTarget;
@@ -5123,15 +5282,7 @@ var internalRenderMediaOnWeb = async ({
         if (signal?.aborted) {
           throw new Error("renderMediaOnWeb() was cancelled");
         }
-        await waitForReady({
-          timeoutInMilliseconds: delayRenderTimeoutInMilliseconds,
-          scope: delayRenderScope,
-          signal,
-          apiName: "renderMediaOnWeb",
-          internalState,
-          keepalive
-        });
-        checkForError(errorHolder);
+        await waitForRenderReady();
         if (signal?.aborted) {
           throw new Error("renderMediaOnWeb() was cancelled");
         }
@@ -5189,15 +5340,7 @@ var internalRenderMediaOnWeb = async ({
             throw new Error("renderMediaOnWeb() was cancelled");
           }
           timeUpdater.current?.update(frame);
-          await waitForReady({
-            timeoutInMilliseconds: delayRenderTimeoutInMilliseconds,
-            scope: delayRenderScope,
-            signal,
-            apiName: "renderMediaOnWeb",
-            keepalive,
-            internalState
-          });
-          checkForError(errorHolder);
+          await waitForRenderReady();
           if (signal?.aborted) {
             throw new Error("renderMediaOnWeb() was cancelled");
           }
@@ -5215,7 +5358,8 @@ var internalRenderMediaOnWeb = async ({
               cutout: new DOMRect(0, 0, resolved.width, resolved.height),
               htmlInCanvasContext,
               onHtmlInCanvasLayerOutcome: htmlInCanvasContext ? onHtmlInCanvasLayerOutcome : undefined,
-              waitForPageResponsiveness
+              waitForPageResponsiveness,
+              waitForRenderReady
             });
             internalState.addCreateFrameTime(performance.now() - createFrameStart);
             layerCanvas = layer.canvas;
@@ -5384,7 +5528,6 @@ var renderMediaOnWeb = (options) => {
     muted: options.muted ?? false,
     scale: options.scale ?? 1,
     isProduction: options.isProduction ?? true,
-    allowHtmlInCanvas: options.allowHtmlInCanvas ?? false,
     sampleRate: options.sampleRate ?? 48000
   }));
   return onlyOneRenderAtATimeQueue.ref;
@@ -5443,15 +5586,14 @@ async function internalRenderStillOnWeb({
   onArtifact,
   licenseKey,
   scale,
-  isProduction,
-  allowHtmlInCanvas
+  isProduction
 }) {
   let __stack = [];
   try {
     validateScale(scale);
     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");
+        Internals10.Log.warn({ logLevel, tag: "@remotion/web-renderer" }, "Using Chromium experimental HTML-in-canvas (drawElementImage) for this frame. See https://remotion.dev/docs/client-side-rendering/html-in-canvas");
       } else if (outcome.shouldWarn) {
         Internals10.Log.warn({ logLevel, tag: "@remotion/web-renderer" }, `Not using HTML-in-canvas: ${outcome.reason}`);
       }
@@ -5470,6 +5612,7 @@ async function internalRenderStillOnWeb({
     if (signal?.aborted) {
       return Promise.reject(new Error("renderStillOnWeb() was cancelled"));
     }
+    const useHtmlInCanvas = await supportsNestedHtmlInCanvas();
     const internalState = __using(__stack, makeInternalState(), 0);
     const scaffold = __using(__stack, createScaffold({
       width: resolved.width,
@@ -5488,7 +5631,7 @@ async function internalRenderStillOnWeb({
       initialFrame: frame,
       defaultCodec: resolved.defaultCodec,
       defaultOutName: resolved.defaultOutName,
-      allowHtmlInCanvas,
+      useHtmlInCanvas,
       pixelDensity: scale
     }), 0);
     const {
@@ -5498,32 +5641,8 @@ async function internalRenderStillOnWeb({
       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) {
-        throw new Error("renderStillOnWeb() was cancelled");
-      }
+    const waitForRenderReady = async () => {
       await waitForReady({
         timeoutInMilliseconds: delayRenderTimeoutInMilliseconds,
         scope: delayRenderScope,
@@ -5533,6 +5652,12 @@ async function internalRenderStillOnWeb({
         keepalive: null
       });
       checkForError(errorHolder);
+    };
+    try {
+      if (signal?.aborted) {
+        throw new Error("renderStillOnWeb() was cancelled");
+      }
+      await waitForRenderReady();
       if (signal?.aborted) {
         throw new Error("renderStillOnWeb() was cancelled");
       }
@@ -5545,7 +5670,8 @@ async function internalRenderStillOnWeb({
         cutout: new DOMRect(0, 0, resolved.width, resolved.height),
         htmlInCanvasContext,
         onHtmlInCanvasLayerOutcome: htmlInCanvasContext ? onHtmlInCanvasLayerOutcome : undefined,
-        waitForPageResponsiveness: null
+        waitForPageResponsiveness: null,
+        waitForRenderReady
       });
       const { canvas } = capturedFrame;
       const assets = collectAssets.current.collectAssets();
@@ -5596,8 +5722,7 @@ var renderStillOnWeb = (options) => {
     onArtifact: options.onArtifact ?? null,
     licenseKey: options.licenseKey ?? null,
     scale: options.scale ?? 1,
-    isProduction: options.isProduction ?? true,
-    allowHtmlInCanvas: options.allowHtmlInCanvas ?? false
+    isProduction: options.isProduction ?? true
   }));
   return onlyOneRenderAtATimeQueue.ref;
 };

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

@@ -1,11 +1,15 @@
 type Canvas2DWithDrawElement = CanvasRenderingContext2D & {
-    drawElementImage: (element: Element, dx: number, dy: number, dwidth: number, dheight: number) => DOMMatrix;
+    drawElementImage: (element: Element | ElementImage, dx: number, dy: number, dwidth: number, dheight: number) => DOMMatrix;
 };
 type HTMLCanvasWithLayoutSubtree = HTMLCanvasElement & {
+    captureElementImage?: (element: Element) => ElementImage;
     layoutSubtree?: boolean;
     requestPaint?: () => void;
 };
+export declare const setForceDisableHtmlInCanvasForTesting: (forceDisable: boolean) => void;
 export declare const supportsNativeHtmlInCanvas: () => boolean;
+export declare const supportsNestedHtmlInCanvas: () => Promise<boolean>;
+export declare const containsLayoutSubtreeCanvas: (element: HTMLElement) => boolean;
 export type HtmlInCanvasContext = {
     layoutCanvas: HTMLCanvasWithLayoutSubtree;
     ctx: Canvas2DWithDrawElement;
@@ -29,11 +33,13 @@ export declare const setupHtmlInCanvas: ({ wrapper, div, width, height, }: {
  * 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, }: {
+export declare const drawWithHtmlInCanvas: ({ htmlInCanvasContext, element, scaledWidth, scaledHeight, waitForRenderReady, useElementImage, }: {
     htmlInCanvasContext: HtmlInCanvasContext;
     element: HTMLElement;
     scaledWidth: number;
     scaledHeight: number;
+    waitForRenderReady: () => Promise<void>;
+    useElementImage: boolean;
 }) => Promise<OffscreenCanvasRenderingContext2D>;
 export declare const teardownHtmlInCanvas: ({ htmlInCanvasContext, wrapper, div, }: {
     htmlInCanvasContext: HtmlInCanvasContext;

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

@@ -67,7 +67,6 @@ 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>;

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

@@ -20,7 +20,6 @@ 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<{

package/dist/take-screenshot.d.ts

@@ -6,7 +6,7 @@ export type HtmlInCanvasLayerOutcome = {
     reason: string;
     shouldWarn: boolean;
 };
-export declare const createLayer: ({ element, scale, logLevel, internalState, onlyBackgroundClipText, cutout, htmlInCanvasContext, onHtmlInCanvasLayerOutcome, waitForPageResponsiveness, }: {
+export declare const createLayer: ({ element, scale, logLevel, internalState, onlyBackgroundClipText, cutout, htmlInCanvasContext, onHtmlInCanvasLayerOutcome, waitForPageResponsiveness, waitForRenderReady, }: {
     element: HTMLElement | SVGElement;
     scale: number;
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
@@ -33,4 +33,5 @@ export declare const createLayer: ({ element, scale, logLevel, internalState, on
     htmlInCanvasContext?: HtmlInCanvasContext | null | undefined;
     onHtmlInCanvasLayerOutcome?: ((outcome: HtmlInCanvasLayerOutcome) => void) | undefined;
     waitForPageResponsiveness: (() => Promise<void>) | null;
+    waitForRenderReady: () => Promise<void>;
 }) => Promise<OffscreenCanvasRenderingContext2D>;

package/dist/walk-over-node.d.ts

@@ -1,5 +1,6 @@
+import type { TransformStyleCache } from './drawing/calculate-transforms';
 import type { ProcessNodeReturnValue } from './drawing/process-node';
-export declare const walkOverNode: ({ node, context, logLevel, parentRect, internalState, rootElement, onlyBackgroundClipText, scale, waitForPageResponsiveness, }: {
+export declare const walkOverNode: ({ node, context, logLevel, parentRect, internalState, rootElement, onlyBackgroundClipText, scale, waitForPageResponsiveness, transformStyleCache, }: {
     node: Node;
     context: OffscreenCanvasRenderingContext2D;
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
@@ -26,4 +27,5 @@ export declare const walkOverNode: ({ node, context, logLevel, parentRect, inter
     onlyBackgroundClipText: boolean;
     scale: number;
     waitForPageResponsiveness: (() => Promise<void>) | null;
+    transformStyleCache: TransformStyleCache;
 }) => Promise<ProcessNodeReturnValue>;

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.489",
+	"version": "4.0.491",
 	"main": "dist/index.js",
 	"type": "module",
 	"scripts": {
@@ -22,19 +22,20 @@
 		"@mediabunny/mp3-encoder": "1.50.8",
 		"@mediabunny/aac-encoder": "1.50.8",
 		"@mediabunny/flac-encoder": "1.50.8",
-		"@remotion/licensing": "4.0.489",
-		"remotion": "4.0.489",
+		"@remotion/licensing": "4.0.491",
+		"remotion": "4.0.491",
 		"mediabunny": "1.50.8"
 	},
 	"devDependencies": {
+		"@remotion/effects": "4.0.491",
 		"@react-three/fiber": "9.2.0",
-		"@remotion/eslint-config-internal": "4.0.489",
-		"@remotion/paths": "4.0.489",
-		"@remotion/player": "4.0.489",
-		"@remotion/media": "4.0.489",
-		"@remotion/shapes": "4.0.489",
-		"@remotion/three": "4.0.489",
-		"@remotion/transitions": "4.0.489",
+		"@remotion/eslint-config-internal": "4.0.491",
+		"@remotion/paths": "4.0.491",
+		"@remotion/player": "4.0.491",
+		"@remotion/media": "4.0.491",
+		"@remotion/shapes": "4.0.491",
+		"@remotion/three": "4.0.491",
+		"@remotion/transitions": "4.0.491",
 		"@types/three": "0.170.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1",
 		"@vitejs/plugin-react": "4.3.4",
@@ -68,6 +69,6 @@
 		"renderer",
 		"web"
 	],
-	"description": "Render videos in the browser (not yet released)",
+	"description": "Render videos in the browser",
 	"homepage": "https://www.remotion.dev/docs/web-renderer/"
 }