@remotion/web-renderer 4.0.383 → 4.0.385

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/get-audio-encoding-config.d.ts

@@ -0,0 +1,2 @@
+import { type AudioEncodingConfig } from 'mediabunny';
+export declare const getDefaultAudioEncodingConfig: () => Promise<AudioEncodingConfig | null>;

package/dist/get-audio-encoding-config.js

@@ -0,0 +1,18 @@
+import { canEncodeAudio, QUALITY_MEDIUM, } from 'mediabunny';
+export const getDefaultAudioEncodingConfig = async () => {
+    const preferredDefaultAudioEncodingConfig = {
+        codec: 'aac',
+        bitrate: QUALITY_MEDIUM,
+    };
+    if (await canEncodeAudio(preferredDefaultAudioEncodingConfig.codec, preferredDefaultAudioEncodingConfig)) {
+        return preferredDefaultAudioEncodingConfig;
+    }
+    const backupDefaultAudioEncodingConfig = {
+        codec: 'opus',
+        bitrate: QUALITY_MEDIUM,
+    };
+    if (await canEncodeAudio(backupDefaultAudioEncodingConfig.codec, backupDefaultAudioEncodingConfig)) {
+        return backupDefaultAudioEncodingConfig;
+    }
+    return null;
+};

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

@@ -1,8 +1,11 @@
-import { BufferTarget, Output, VideoSample, VideoSampleSource } from 'mediabunny';
+import { AudioSampleSource, BufferTarget, Output, VideoSampleSource, } from 'mediabunny';
 import { Internals } from 'remotion';
+import { addAudioSample, addVideoSampleAndCloseFrame } from './add-sample';
 import { handleArtifacts } from './artifact';
+import { onlyInlineAudio } from './audio';
 import { createScaffold } from './create-scaffold';
 import { getRealFrameRange } from './frame-range';
+import { getDefaultAudioEncodingConfig } from './get-audio-encoding-config';
 import { codecToMediabunnyCodec, containerToMediabunnyContainer, getDefaultVideoCodecForContainer, getQualityForWebRendererQuality, } from './mediabunny-mappings';
 import { createFrame } from './take-screenshot';
 import { createThrottledProgressCallback } from './throttle-progress';
@@ -55,10 +58,7 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
         defaultCodec: resolved.defaultCodec,
         defaultOutName: resolved.defaultOutName,
     });
-    const artifactsHandler = handleArtifacts({
-        ref: collectAssets,
-        onArtifact,
-    });
+    const artifactsHandler = handleArtifacts();
     cleanupFns.push(() => {
         cleanupScaffold();
     });
@@ -100,6 +100,16 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
             videoSampleSource.close();
         });
         output.addVideoTrack(videoSampleSource);
+        // TODO: Should be able to customize
+        const defaultAudioEncodingConfig = await getDefaultAudioEncodingConfig();
+        if (!defaultAudioEncodingConfig) {
+            return Promise.reject(new Error('No default audio encoding config found'));
+        }
+        const audioSampleSource = new AudioSampleSource(defaultAudioEncodingConfig);
+        cleanupFns.push(() => {
+            audioSampleSource.close();
+        });
+        output.addAudioTrack(audioSampleSource);
         await output.start();
         if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
             throw new Error('renderMediaOnWeb() was cancelled');
@@ -109,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,
@@ -125,11 +138,23 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
                 width: resolved.width,
                 height: resolved.height,
             });
-            await artifactsHandler.handle({ imageData, frame: i });
             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 assets = collectAssets.current.collectAssets();
+            if (onArtifact) {
+                await artifactsHandler.handle({
+                    imageData,
+                    frame,
+                    assets,
+                    onArtifact,
+                });
+            }
+            if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
+                throw new Error('renderMediaOnWeb() was cancelled');
+            }
+            const audio = onlyInlineAudio({ assets, fps: resolved.fps, frame });
+            const timestamp = Math.round(((frame - realFrameRange[0]) / resolved.fps) * 1000000);
             const videoFrame = new VideoFrame(imageData, {
                 timestamp,
             });
@@ -139,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,
@@ -147,10 +175,12 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
                     expectedTimestamp: timestamp,
                 });
             }
-            await videoSampleSource.add(new VideoSample(frameToEncode));
+            await Promise.all([
+                addVideoSampleAndCloseFrame(frameToEncode, videoSampleSource),
+                audio ? addAudioSample(audio, audioSampleSource) : Promise.resolve(),
+            ]);
             progress.encodedFrames++;
             throttledOnProgress === null || throttledOnProgress === void 0 ? void 0 : throttledOnProgress({ ...progress });
-            frameToEncode.close();
             if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
                 throw new Error('renderMediaOnWeb() was cancelled');
             }
@@ -158,6 +188,7 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
         // Call progress one final time to ensure final state is reported
         onProgress === null || onProgress === void 0 ? void 0 : onProgress({ ...progress });
         videoSampleSource.close();
+        audioSampleSource.close();
         await output.finalize();
         return output.target.buffer;
     }

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

@@ -37,10 +37,7 @@ async function internalRenderStillOnWeb({ frame, delayRenderTimeoutInMillisecond
         defaultCodec: resolved.defaultCodec,
         defaultOutName: resolved.defaultOutName,
     });
-    const artifactsHandler = handleArtifacts({
-        ref: collectAssets,
-        onArtifact,
-    });
+    const artifactsHandler = handleArtifacts();
     try {
         if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
             throw new Error('renderStillOnWeb() was cancelled');
@@ -60,7 +57,10 @@ async function internalRenderStillOnWeb({ frame, delayRenderTimeoutInMillisecond
             height: resolved.height,
             imageFormat,
         });
-        await artifactsHandler.handle({ imageData, frame });
+        const assets = collectAssets.current.collectAssets();
+        if (onArtifact) {
+            await artifactsHandler.handle({ imageData, frame, assets, onArtifact });
+        }
         return imageData;
     }
     finally {

package/dist/take-screenshot.js

@@ -1,13 +1,12 @@
 import { compose } from './compose';
-import { findCapturableElements } from './find-capturable-elements';
 export const createFrame = async ({ div, 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;
 };
 export const takeScreenshot = async ({ div, width, height, imageFormat, }) => {
     const frame = await createFrame({ div, width, height });

package/dist/transform.d.ts

@@ -0,0 +1,4 @@
+export declare const setTransform: ({ ctx, transform, }: {
+    ctx: OffscreenCanvasRenderingContext2D;
+    transform: DOMMatrix;
+}) => () => void;

package/dist/transform.js

@@ -0,0 +1,6 @@
+export const setTransform = ({ ctx, transform, }) => {
+    ctx.setTransform(transform);
+    return () => {
+        ctx.setTransform(new DOMMatrix());
+    };
+};

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.383",
+	"version": "4.0.385",
 	"main": "dist/index.js",
 	"sideEffects": false,
 	"scripts": {
@@ -16,13 +16,13 @@
 	"author": "Remotion <jonny@remotion.dev>",
 	"license": "UNLICENSED",
 	"dependencies": {
-		"remotion": "4.0.383",
-		"mediabunny": "1.25.3"
+		"remotion": "4.0.385",
+		"mediabunny": "1.25.8"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.383",
-		"@remotion/player": "4.0.383",
-		"@remotion/media": "4.0.383",
+		"@remotion/eslint-config-internal": "4.0.385",
+		"@remotion/player": "4.0.385",
+		"@remotion/media": "4.0.385",
 		"@vitejs/plugin-react": "4.1.0",
 		"@vitest/browser-playwright": "4.0.9",
 		"playwright": "1.55.1",