@remotion/web-renderer 4.0.384 → 4.0.386

package/dist/esm/index.mjs

@@ -8350,37 +8350,36 @@ function mixAudio(waves, length) {
   }
   const mixed = new Int16Array(length);
   for (let i = 0;i < length; i++) {
-    const sum = waves.reduce((acc, wave2) => acc + wave2[i], 0);
+    const sum = waves.reduce((acc, wave2) => {
+      return acc + (wave2[i] ?? 0);
+    }, 0);
     mixed[i] = Math.max(-32768, Math.min(32767, sum));
   }
   return mixed;
 }
-var onlyInlineAudio = (assets) => {
+var onlyInlineAudio = ({
+  assets,
+  fps,
+  frame
+}) => {
   const inlineAudio = assets.filter((asset) => asset.type === "inline-audio");
-  let length = null;
+  if (inlineAudio.length === 0) {
+    return null;
+  }
+  const expectedLength = Math.round(TARGET_NUMBER_OF_CHANNELS * TARGET_SAMPLE_RATE / fps);
   for (const asset of inlineAudio) {
     if (asset.toneFrequency !== 1) {
       throw new Error("Setting the toneFrequency is not supported yet in web rendering.");
     }
-    if (length === null) {
-      length = asset.audio.length;
-    } else if (Math.abs(length - asset.audio.length) > TARGET_NUMBER_OF_CHANNELS) {
-      throw new Error("All inline audio must have the same length");
-    } else {
-      length = Math.min(length, asset.audio.length);
-    }
   }
-  if (length === null) {
-    return null;
-  }
-  const mixedAudio = mixAudio(inlineAudio.map((asset) => asset.audio), length);
+  const mixedAudio = mixAudio(inlineAudio.map((asset) => asset.audio), expectedLength);
   return new AudioData({
     data: mixedAudio,
     format: "s16",
     numberOfChannels: TARGET_NUMBER_OF_CHANNELS,
-    numberOfFrames: length / TARGET_NUMBER_OF_CHANNELS,
+    numberOfFrames: expectedLength / TARGET_NUMBER_OF_CHANNELS,
     sampleRate: TARGET_SAMPLE_RATE,
-    timestamp: inlineAudio[0].timestamp
+    timestamp: frame / fps * 1e6
   });
 };
 
@@ -8656,7 +8655,143 @@ var getQualityForWebRendererQuality = (quality) => {
   }
 };
 
-// src/parse-transform-origin.ts
+// src/drawing/border-radius.ts
+function parseValue({
+  value,
+  reference
+}) {
+  value = value.trim();
+  if (value.endsWith("%")) {
+    const percentage = parseFloat(value);
+    return percentage / 100 * reference;
+  }
+  if (value.endsWith("px")) {
+    return parseFloat(value);
+  }
+  return parseFloat(value);
+}
+function expandShorthand(values) {
+  if (values.length === 1) {
+    return [values[0], values[0], values[0], values[0]];
+  }
+  if (values.length === 2) {
+    return [values[0], values[1], values[0], values[1]];
+  }
+  if (values.length === 3) {
+    return [values[0], values[1], values[2], values[1]];
+  }
+  return [values[0], values[1], values[2], values[3]];
+}
+function clampBorderRadius({
+  borderRadius,
+  width,
+  height
+}) {
+  const clamped = {
+    topLeft: { ...borderRadius.topLeft },
+    topRight: { ...borderRadius.topRight },
+    bottomRight: { ...borderRadius.bottomRight },
+    bottomLeft: { ...borderRadius.bottomLeft }
+  };
+  const topSum = clamped.topLeft.horizontal + clamped.topRight.horizontal;
+  if (topSum > width) {
+    const factor = width / topSum;
+    clamped.topLeft.horizontal *= factor;
+    clamped.topRight.horizontal *= factor;
+  }
+  const rightSum = clamped.topRight.vertical + clamped.bottomRight.vertical;
+  if (rightSum > height) {
+    const factor = height / rightSum;
+    clamped.topRight.vertical *= factor;
+    clamped.bottomRight.vertical *= factor;
+  }
+  const bottomSum = clamped.bottomRight.horizontal + clamped.bottomLeft.horizontal;
+  if (bottomSum > width) {
+    const factor = width / bottomSum;
+    clamped.bottomRight.horizontal *= factor;
+    clamped.bottomLeft.horizontal *= factor;
+  }
+  const leftSum = clamped.bottomLeft.vertical + clamped.topLeft.vertical;
+  if (leftSum > height) {
+    const factor = height / leftSum;
+    clamped.bottomLeft.vertical *= factor;
+    clamped.topLeft.vertical *= factor;
+  }
+  return clamped;
+}
+function parseBorderRadius({
+  borderRadius,
+  width,
+  height
+}) {
+  const parts = borderRadius.split("/").map((part) => part.trim());
+  const horizontalPart = parts[0];
+  const verticalPart = parts[1];
+  const horizontalValues = horizontalPart.split(/\s+/).filter((v) => v);
+  const verticalValues = verticalPart ? verticalPart.split(/\s+/).filter((v) => v) : horizontalValues;
+  const [hTopLeft, hTopRight, hBottomRight, hBottomLeft] = expandShorthand(horizontalValues);
+  const [vTopLeft, vTopRight, vBottomRight, vBottomLeft] = expandShorthand(verticalValues);
+  return clampBorderRadius({
+    borderRadius: {
+      topLeft: {
+        horizontal: parseValue({ value: hTopLeft, reference: width }),
+        vertical: parseValue({ value: vTopLeft, reference: height })
+      },
+      topRight: {
+        horizontal: parseValue({ value: hTopRight, reference: width }),
+        vertical: parseValue({ value: vTopRight, reference: height })
+      },
+      bottomRight: {
+        horizontal: parseValue({ value: hBottomRight, reference: width }),
+        vertical: parseValue({ value: vBottomRight, reference: height })
+      },
+      bottomLeft: {
+        horizontal: parseValue({ value: hBottomLeft, reference: width }),
+        vertical: parseValue({ value: vBottomLeft, reference: height })
+      }
+    },
+    width,
+    height
+  });
+}
+function setBorderRadius({
+  ctx,
+  x,
+  y,
+  width,
+  height,
+  borderRadius
+}) {
+  if (borderRadius.topLeft.horizontal === 0 && borderRadius.topLeft.vertical === 0 && borderRadius.topRight.horizontal === 0 && borderRadius.topRight.vertical === 0 && borderRadius.bottomRight.horizontal === 0 && borderRadius.bottomRight.vertical === 0 && borderRadius.bottomLeft.horizontal === 0 && borderRadius.bottomLeft.vertical === 0) {
+    return () => {};
+  }
+  ctx.save();
+  ctx.beginPath();
+  ctx.moveTo(x + borderRadius.topLeft.horizontal, y);
+  ctx.lineTo(x + width - borderRadius.topRight.horizontal, y);
+  if (borderRadius.topRight.horizontal > 0 || borderRadius.topRight.vertical > 0) {
+    ctx.ellipse(x + width - borderRadius.topRight.horizontal, y + borderRadius.topRight.vertical, borderRadius.topRight.horizontal, borderRadius.topRight.vertical, 0, -Math.PI / 2, 0);
+  }
+  ctx.lineTo(x + width, y + height - borderRadius.bottomRight.vertical);
+  if (borderRadius.bottomRight.horizontal > 0 || borderRadius.bottomRight.vertical > 0) {
+    ctx.ellipse(x + width - borderRadius.bottomRight.horizontal, y + height - borderRadius.bottomRight.vertical, borderRadius.bottomRight.horizontal, borderRadius.bottomRight.vertical, 0, 0, Math.PI / 2);
+  }
+  ctx.lineTo(x + borderRadius.bottomLeft.horizontal, y + height);
+  if (borderRadius.bottomLeft.horizontal > 0 || borderRadius.bottomLeft.vertical > 0) {
+    ctx.ellipse(x + borderRadius.bottomLeft.horizontal, y + height - borderRadius.bottomLeft.vertical, borderRadius.bottomLeft.horizontal, borderRadius.bottomLeft.vertical, 0, Math.PI / 2, Math.PI);
+  }
+  ctx.lineTo(x, y + borderRadius.topLeft.vertical);
+  if (borderRadius.topLeft.horizontal > 0 || borderRadius.topLeft.vertical > 0) {
+    ctx.ellipse(x + borderRadius.topLeft.horizontal, y + borderRadius.topLeft.vertical, borderRadius.topLeft.horizontal, borderRadius.topLeft.vertical, 0, Math.PI, Math.PI * 3 / 2);
+  }
+  ctx.closePath();
+  ctx.clip();
+  return () => {
+    ctx.restore();
+  };
+}
+
+// src/drawing/parse-transform-origin.ts
 var parseTransformOrigin = (transformOrigin) => {
   if (transformOrigin.trim() === "") {
     return null;
@@ -8665,7 +8800,7 @@ var parseTransformOrigin = (transformOrigin) => {
   return { x: parseFloat(x), y: parseFloat(y) };
 };
 
-// src/calculate-transforms.ts
+// src/drawing/calculate-transforms.ts
 var getInternalTransformOrigin = (transform) => {
   const centerX = transform.boundingClientRect.width / 2;
   const centerY = transform.boundingClientRect.height / 2;
@@ -8686,8 +8821,13 @@ var calculateTransforms = (element) => {
   let parent = element;
   const transforms = [];
   const toReset = [];
+  let opacity = 1;
   while (parent) {
     const computedStyle = getComputedStyle(parent);
+    const parentOpacity = computedStyle.opacity;
+    if (parentOpacity && parentOpacity !== "") {
+      opacity *= parseFloat(parentOpacity);
+    }
     if (computedStyle.transform && computedStyle.transform !== "none" || parent === element) {
       const toParse = computedStyle.transform === "none" || computedStyle.transform === "" ? undefined : computedStyle.transform;
       const matrix = new DOMMatrix(toParse);
@@ -8728,11 +8868,122 @@ var calculateTransforms = (element) => {
         reset();
       }
     },
-    nativeTransformOrigin
+    nativeTransformOrigin,
+    opacity
+  };
+};
+
+// src/drawing/draw-border.ts
+var drawBorder = ({
+  ctx,
+  x,
+  y,
+  width,
+  height,
+  borderRadius,
+  computedStyle
+}) => {
+  const {
+    borderStyle,
+    borderColor,
+    borderWidth: computedBorderWidth
+  } = computedStyle;
+  const borderWidths = computedBorderWidth.split(/\s+/).map((w) => parseFloat(w));
+  const borderTop = borderWidths[0] || 0;
+  const borderRight = borderWidths[1] || borderTop;
+  const borderBottom = borderWidths[2] || borderTop;
+  const borderLeft = borderWidths[3] || borderRight;
+  const hasBorder = borderStyle && borderStyle !== "none" && borderStyle !== "hidden" && (borderTop > 0 || borderRight > 0 || borderBottom > 0 || borderLeft > 0);
+  if (!hasBorder) {
+    return;
+  }
+  const originalStrokeStyle = ctx.strokeStyle;
+  const originalLineWidth = ctx.lineWidth;
+  const originalLineDash = ctx.getLineDash();
+  ctx.strokeStyle = borderColor;
+  if (borderStyle === "dashed") {
+    const max = Math.max(borderTop, borderRight, borderBottom, borderLeft);
+    ctx.setLineDash([max * 2, max]);
+  } else if (borderStyle === "dotted") {
+    ctx.setLineDash([
+      Math.max(borderTop, borderRight, borderBottom, borderLeft)
+    ]);
+  } else {
+    ctx.setLineDash([]);
+  }
+  const maxBorderWidth = Math.max(borderTop, borderRight, borderBottom, borderLeft);
+  ctx.beginPath();
+  const borderX = x + maxBorderWidth / 2;
+  const borderY = y + maxBorderWidth / 2;
+  const borderWidth = width - maxBorderWidth;
+  const borderHeight = height - maxBorderWidth;
+  const adjustedBorderRadius = {
+    topLeft: {
+      horizontal: Math.max(0, borderRadius.topLeft.horizontal - maxBorderWidth / 2),
+      vertical: Math.max(0, borderRadius.topLeft.vertical - maxBorderWidth / 2)
+    },
+    topRight: {
+      horizontal: Math.max(0, borderRadius.topRight.horizontal - maxBorderWidth / 2),
+      vertical: Math.max(0, borderRadius.topRight.vertical - maxBorderWidth / 2)
+    },
+    bottomRight: {
+      horizontal: Math.max(0, borderRadius.bottomRight.horizontal - maxBorderWidth / 2),
+      vertical: Math.max(0, borderRadius.bottomRight.vertical - maxBorderWidth / 2)
+    },
+    bottomLeft: {
+      horizontal: Math.max(0, borderRadius.bottomLeft.horizontal - maxBorderWidth / 2),
+      vertical: Math.max(0, borderRadius.bottomLeft.vertical - maxBorderWidth / 2)
+    }
+  };
+  ctx.moveTo(borderX + adjustedBorderRadius.topLeft.horizontal, borderY);
+  ctx.lineTo(borderX + borderWidth - adjustedBorderRadius.topRight.horizontal, borderY);
+  if (adjustedBorderRadius.topRight.horizontal > 0 || adjustedBorderRadius.topRight.vertical > 0) {
+    ctx.ellipse(borderX + borderWidth - adjustedBorderRadius.topRight.horizontal, borderY + adjustedBorderRadius.topRight.vertical, adjustedBorderRadius.topRight.horizontal, adjustedBorderRadius.topRight.vertical, 0, -Math.PI / 2, 0);
+  }
+  ctx.lineTo(borderX + borderWidth, borderY + borderHeight - adjustedBorderRadius.bottomRight.vertical);
+  if (adjustedBorderRadius.bottomRight.horizontal > 0 || adjustedBorderRadius.bottomRight.vertical > 0) {
+    ctx.ellipse(borderX + borderWidth - adjustedBorderRadius.bottomRight.horizontal, borderY + borderHeight - adjustedBorderRadius.bottomRight.vertical, adjustedBorderRadius.bottomRight.horizontal, adjustedBorderRadius.bottomRight.vertical, 0, 0, Math.PI / 2);
+  }
+  ctx.lineTo(borderX + adjustedBorderRadius.bottomLeft.horizontal, borderY + borderHeight);
+  if (adjustedBorderRadius.bottomLeft.horizontal > 0 || adjustedBorderRadius.bottomLeft.vertical > 0) {
+    ctx.ellipse(borderX + adjustedBorderRadius.bottomLeft.horizontal, borderY + borderHeight - adjustedBorderRadius.bottomLeft.vertical, adjustedBorderRadius.bottomLeft.horizontal, adjustedBorderRadius.bottomLeft.vertical, 0, Math.PI / 2, Math.PI);
+  }
+  ctx.lineTo(borderX, borderY + adjustedBorderRadius.topLeft.vertical);
+  if (adjustedBorderRadius.topLeft.horizontal > 0 || adjustedBorderRadius.topLeft.vertical > 0) {
+    ctx.ellipse(borderX + adjustedBorderRadius.topLeft.horizontal, borderY + adjustedBorderRadius.topLeft.vertical, adjustedBorderRadius.topLeft.horizontal, adjustedBorderRadius.topLeft.vertical, 0, Math.PI, Math.PI * 3 / 2);
+  }
+  ctx.closePath();
+  ctx.lineWidth = maxBorderWidth;
+  ctx.stroke();
+  ctx.strokeStyle = originalStrokeStyle;
+  ctx.lineWidth = originalLineWidth;
+  ctx.setLineDash(originalLineDash);
+};
+
+// src/drawing/opacity.ts
+var setOpacity = ({
+  ctx,
+  opacity
+}) => {
+  const previousAlpha = ctx.globalAlpha;
+  ctx.globalAlpha = previousAlpha * opacity;
+  return () => {
+    ctx.globalAlpha = previousAlpha;
   };
 };
 
-// src/compose-svg.ts
+// src/drawing/transform.ts
+var setTransform = ({
+  ctx,
+  transform
+}) => {
+  ctx.setTransform(transform);
+  return () => {
+    ctx.setTransform(new DOMMatrix);
+  };
+};
+
+// src/drawing/turn-svg-into-drawable.ts
 var turnSvgIntoDrawable = (svg) => {
   const originalTransform = svg.style.transform;
   const originalTransformOrigin = svg.style.transformOrigin;
@@ -8766,59 +9017,83 @@ var turnSvgIntoDrawable = (svg) => {
   });
 };
 
-// src/compose-canvas.ts
-var composeCanvas = async (canvas, context) => {
-  const { totalMatrix, reset, dimensions } = calculateTransforms(canvas);
-  context.setTransform(totalMatrix);
-  const drawable = canvas instanceof SVGSVGElement ? await turnSvgIntoDrawable(canvas) : canvas;
-  context.drawImage(drawable, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
-  context.setTransform(new DOMMatrix);
+// src/drawing/draw-element-to-canvas.ts
+var drawElementToCanvas = async ({
+  element,
+  context
+}) => {
+  const { totalMatrix, reset, dimensions, opacity } = calculateTransforms(element);
+  if (opacity === 0) {
+    reset();
+    return;
+  }
+  if (dimensions.width <= 0 || dimensions.height <= 0) {
+    reset();
+    return;
+  }
+  const computedStyle = getComputedStyle(element);
+  const background = computedStyle.backgroundColor;
+  const borderRadius = parseBorderRadius({
+    borderRadius: computedStyle.borderRadius,
+    width: dimensions.width,
+    height: dimensions.height
+  });
+  const finishTransform = setTransform({
+    ctx: context,
+    transform: totalMatrix
+  });
+  const finishBorderRadius = setBorderRadius({
+    ctx: context,
+    x: dimensions.left,
+    y: dimensions.top,
+    width: dimensions.width,
+    height: dimensions.height,
+    borderRadius
+  });
+  const finishOpacity = setOpacity({
+    ctx: context,
+    opacity
+  });
+  const drawable = element instanceof SVGSVGElement ? await turnSvgIntoDrawable(element) : element instanceof HTMLImageElement ? element : element instanceof HTMLCanvasElement ? element : null;
+  if (background && background !== "transparent" && !(background.startsWith("rgba") && (background.endsWith(", 0)") || background.endsWith(",0")))) {
+    const originalFillStyle = context.fillStyle;
+    context.fillStyle = background;
+    context.fillRect(dimensions.left, dimensions.top, dimensions.width, dimensions.height);
+    context.fillStyle = originalFillStyle;
+  }
+  if (drawable) {
+    context.drawImage(drawable, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
+  }
+  drawBorder({
+    ctx: context,
+    x: dimensions.left,
+    y: dimensions.top,
+    width: dimensions.width,
+    height: dimensions.height,
+    borderRadius,
+    computedStyle
+  });
+  finishOpacity();
+  finishBorderRadius();
+  finishTransform();
   reset();
 };
 
 // src/compose.ts
-var compose = async ({
-  composables,
-  width,
-  height
-}) => {
-  const canvas = new OffscreenCanvas(width, height);
-  const context = canvas.getContext("2d");
-  if (!context) {
-    throw new Error("Could not get context");
-  }
-  for (const composable of composables) {
-    await composeCanvas(composable.element, context);
-  }
-  return canvas;
-};
-
-// src/find-capturable-elements.ts
-var findCapturableElements = (element) => {
-  const canvasAndSvgElements = element.querySelectorAll("svg,canvas,img");
-  const composables = [];
-  Array.from(canvasAndSvgElements).forEach((capturableElement) => {
-    if (capturableElement.tagName.toLocaleLowerCase() === "canvas") {
-      const canvas = capturableElement;
-      composables.push({
-        type: "canvas",
-        element: canvas
-      });
-    } else if (capturableElement.tagName.toLocaleLowerCase() === "svg") {
-      const svg = capturableElement;
-      composables.push({
-        type: "svg",
-        element: svg
-      });
-    } else if (capturableElement.tagName.toLocaleLowerCase() === "img") {
-      const img = capturableElement;
-      composables.push({
-        type: "img",
-        element: img
-      });
+var compose = async (element, context) => {
+  const treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, (node) => {
+    if (node instanceof Element) {
+      const computedStyle = getComputedStyle(node);
+      return computedStyle.display === "none" ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT;
     }
+    return NodeFilter.FILTER_ACCEPT;
   });
-  return composables;
+  while (treeWalker.nextNode()) {
+    const node = treeWalker.currentNode;
+    if (node instanceof HTMLElement || node instanceof SVGElement) {
+      await drawElementToCanvas({ element: node, context });
+    }
+  }
 };
 
 // src/take-screenshot.ts
@@ -8827,13 +9102,13 @@ var createFrame = async ({
   width,
   height
 }) => {
-  const composables = findCapturableElements(div);
-  const composed = await compose({
-    composables,
-    width,
-    height
-  });
-  return composed;
+  const canvas = new OffscreenCanvas(width, height);
+  const context = canvas.getContext("2d");
+  if (!context) {
+    throw new Error("Could not get context");
+  }
+  await compose(div, context);
+  return canvas;
 };
 var takeScreenshot = async ({
   div,
@@ -9068,8 +9343,11 @@ var internalRenderMediaOnWeb = async ({
       encodedFrames: 0
     };
     const throttledOnProgress = createThrottledProgressCallback(onProgress);
-    for (let i = realFrameRange[0];i <= realFrameRange[1]; i++) {
-      timeUpdater.current?.update(i);
+    for (let frame = realFrameRange[0];frame <= realFrameRange[1]; frame++) {
+      if (signal?.aborted) {
+        throw new Error("renderMediaOnWeb() was cancelled");
+      }
+      timeUpdater.current?.update(frame);
       await waitForReady({
         timeoutInMilliseconds: delayRenderTimeoutInMilliseconds,
         scope: delayRenderScope,
@@ -9084,20 +9362,23 @@ var internalRenderMediaOnWeb = async ({
         width: resolved.width,
         height: resolved.height
       });
+      if (signal?.aborted) {
+        throw new Error("renderMediaOnWeb() was cancelled");
+      }
       const assets = collectAssets.current.collectAssets();
       if (onArtifact) {
         await artifactsHandler.handle({
           imageData,
-          frame: i,
+          frame,
           assets,
           onArtifact
         });
       }
-      const audio = onlyInlineAudio(assets);
       if (signal?.aborted) {
         throw new Error("renderMediaOnWeb() was cancelled");
       }
-      const timestamp = Math.round((i - realFrameRange[0]) / resolved.fps * 1e6);
+      const audio = onlyInlineAudio({ assets, fps: resolved.fps, frame });
+      const timestamp = Math.round((frame - realFrameRange[0]) / resolved.fps * 1e6);
       const videoFrame = new VideoFrame(imageData, {
         timestamp
       });
@@ -9106,6 +9387,9 @@ var internalRenderMediaOnWeb = async ({
       let frameToEncode = videoFrame;
       if (onFrame) {
         const returnedFrame = await onFrame(videoFrame);
+        if (signal?.aborted) {
+          throw new Error("renderMediaOnWeb() was cancelled");
+        }
         frameToEncode = validateVideoFrame({
           originalFrame: videoFrame,
           returnedFrame,

package/dist/find-capturable-elements.d.ts

@@ -1,2 +1,2 @@
 import type { Composable } from './composable';
-export declare const findCapturableElements: (element: HTMLDivElement) => Composable[];
+export declare const findCapturableElements: (element: HTMLDivElement, context: OffscreenCanvasRenderingContext2D) => Promise<Composable[]>;

package/dist/find-capturable-elements.js

@@ -1,28 +1,26 @@
-export const findCapturableElements = (element) => {
-    const canvasAndSvgElements = element.querySelectorAll('svg,canvas,img');
-    const composables = [];
-    Array.from(canvasAndSvgElements).forEach((capturableElement) => {
-        if (capturableElement.tagName.toLocaleLowerCase() === 'canvas') {
-            const canvas = capturableElement;
-            composables.push({
-                type: 'canvas',
-                element: canvas,
-            });
+import { drawElementToCanvas } from './drawing/draw-element-to-canvas';
+export const findCapturableElements = async (element, context) => {
+    const treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, (node) => {
+        if (node instanceof Element) {
+            const computedStyle = getComputedStyle(node);
+            return computedStyle.display === 'none'
+                ? NodeFilter.FILTER_REJECT
+                : NodeFilter.FILTER_ACCEPT;
         }
-        else if (capturableElement.tagName.toLocaleLowerCase() === 'svg') {
-            const svg = capturableElement;
-            composables.push({
-                type: 'svg',
-                element: svg,
-            });
-        }
-        else if (capturableElement.tagName.toLocaleLowerCase() === 'img') {
-            const img = capturableElement;
+        return NodeFilter.FILTER_ACCEPT;
+    });
+    const composables = [];
+    while (treeWalker.nextNode()) {
+        const node = treeWalker.currentNode;
+        if (node instanceof HTMLCanvasElement ||
+            node instanceof SVGSVGElement ||
+            node instanceof HTMLImageElement) {
+            await drawElementToCanvas(node, context);
             composables.push({
-                type: 'img',
-                element: img,
+                type: 'element',
+                element: node,
             });
         }
-    });
+    }
     return composables;
 };

package/dist/opacity.d.ts

@@ -0,0 +1,4 @@
+export declare const setOpacity: ({ ctx, opacity, }: {
+    ctx: OffscreenCanvasRenderingContext2D;
+    opacity: number;
+}) => () => void;

package/dist/opacity.js

@@ -0,0 +1,7 @@
+export const setOpacity = ({ ctx, opacity, }) => {
+    const previousAlpha = ctx.globalAlpha;
+    ctx.globalAlpha = opacity;
+    return () => {
+        ctx.globalAlpha = previousAlpha;
+    };
+};

package/dist/render-media-on-web.js

@@ -119,8 +119,11 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
             encodedFrames: 0,
         };
         const throttledOnProgress = createThrottledProgressCallback(onProgress);
-        for (let i = realFrameRange[0]; i <= realFrameRange[1]; i++) {
-            (_g = timeUpdater.current) === null || _g === void 0 ? void 0 : _g.update(i);
+        for (let frame = realFrameRange[0]; frame <= realFrameRange[1]; frame++) {
+            if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
+                throw new Error('renderMediaOnWeb() was cancelled');
+            }
+            (_g = timeUpdater.current) === null || _g === void 0 ? void 0 : _g.update(frame);
             await waitForReady({
                 timeoutInMilliseconds: delayRenderTimeoutInMilliseconds,
                 scope: delayRenderScope,
@@ -135,20 +138,23 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
                 width: resolved.width,
                 height: resolved.height,
             });
+            if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
+                throw new Error('renderMediaOnWeb() was cancelled');
+            }
             const assets = collectAssets.current.collectAssets();
             if (onArtifact) {
                 await artifactsHandler.handle({
                     imageData,
-                    frame: i,
+                    frame,
                     assets,
                     onArtifact,
                 });
             }
-            const audio = onlyInlineAudio(assets);
             if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
                 throw new Error('renderMediaOnWeb() was cancelled');
             }
-            const timestamp = Math.round(((i - realFrameRange[0]) / resolved.fps) * 1000000);
+            const audio = onlyInlineAudio({ assets, fps: resolved.fps, frame });
+            const timestamp = Math.round(((frame - realFrameRange[0]) / resolved.fps) * 1000000);
             const videoFrame = new VideoFrame(imageData, {
                 timestamp,
             });
@@ -158,6 +164,9 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
             let frameToEncode = videoFrame;
             if (onFrame) {
                 const returnedFrame = await onFrame(videoFrame);
+                if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
+                    throw new Error('renderMediaOnWeb() was cancelled');
+                }
                 frameToEncode = validateVideoFrame({
                     originalFrame: videoFrame,
                     returnedFrame,