@remotion/web-renderer 4.0.375 → 4.0.377

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

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

package/dist/find-capturable-elements.js

@@ -0,0 +1,28 @@
+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,
+            });
+        }
+        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,
+            });
+        }
+    });
+    return composables;
+};

package/dist/frame-range.d.ts

@@ -0,0 +1,2 @@
+export type FrameRange = number | [number, number];
+export declare const getRealFrameRange: (durationInFrames: number, frameRange: FrameRange | null) => [number, number];

package/dist/frame-range.js

@@ -0,0 +1,15 @@
+export const getRealFrameRange = (durationInFrames, frameRange) => {
+    if (frameRange === null) {
+        return [0, durationInFrames - 1];
+    }
+    if (typeof frameRange === 'number') {
+        if (frameRange < 0 || frameRange >= durationInFrames) {
+            throw new Error(`Frame number is out of range, must be between 0 and ${durationInFrames - 1} but got ${frameRange}`);
+        }
+        return [frameRange, frameRange];
+    }
+    if (frameRange[1] >= durationInFrames || frameRange[0] < 0) {
+        throw new Error(`The "durationInFrames" of the composition was evaluated to be ${durationInFrames}, but frame range ${frameRange.join('-')} is not inbetween 0-${durationInFrames - 1}`);
+    }
+    return frameRange;
+};

package/dist/index.d.ts

@@ -1 +1,6 @@
+export type { WebRendererCodec, WebRendererContainer, WebRendererQuality, } from './mediabunny-mappings';
+export { renderMediaOnWeb } from './render-media-on-web';
+export type { RenderMediaOnWebOptions, RenderMediaOnWebProgress, RenderMediaOnWebProgressCallback, } from './render-media-on-web';
 export { renderStillOnWeb } from './render-still-on-web';
+export type { RenderStillOnWebImageFormat as RenderStillImageFormat, RenderStillOnWebOptions, } from './render-still-on-web';
+export type { OnFrameCallback } from './validate-video-frame';

package/dist/index.js

@@ -1 +1,2 @@
+export { renderMediaOnWeb } from './render-media-on-web';
 export { renderStillOnWeb } from './render-still-on-web';

package/dist/mediabunny-mappings.d.ts

@@ -0,0 +1,9 @@
+import type { Quality } from 'mediabunny';
+import { type OutputFormat, type VideoCodec } from 'mediabunny';
+export type WebRendererCodec = 'h264' | 'h265' | 'vp8' | 'vp9' | 'av1';
+export type WebRendererContainer = 'mp4' | 'webm';
+export type WebRendererQuality = 'very-low' | 'low' | 'medium' | 'high' | 'very-high';
+export declare const codecToMediabunnyCodec: (codec: WebRendererCodec) => VideoCodec;
+export declare const containerToMediabunnyContainer: (container: WebRendererContainer) => OutputFormat;
+export declare const getDefaultVideoCodecForContainer: (container: WebRendererContainer) => WebRendererCodec;
+export declare const getQualityForWebRendererQuality: (quality: WebRendererQuality) => Quality;

package/dist/mediabunny-mappings.js

@@ -0,0 +1,53 @@
+import { Mp4OutputFormat, QUALITY_HIGH, QUALITY_LOW, QUALITY_MEDIUM, QUALITY_VERY_HIGH, QUALITY_VERY_LOW, WebMOutputFormat, } from 'mediabunny';
+export const codecToMediabunnyCodec = (codec) => {
+    switch (codec) {
+        case 'h264':
+            return 'avc';
+        case 'h265':
+            return 'hevc';
+        case 'vp8':
+            return 'vp8';
+        case 'vp9':
+            return 'vp9';
+        case 'av1':
+            return 'av1';
+        default:
+            throw new Error(`Unsupported codec: ${codec}`);
+    }
+};
+export const containerToMediabunnyContainer = (container) => {
+    switch (container) {
+        case 'mp4':
+            return new Mp4OutputFormat();
+        case 'webm':
+            return new WebMOutputFormat();
+        default:
+            throw new Error(`Unsupported container: ${container}`);
+    }
+};
+export const getDefaultVideoCodecForContainer = (container) => {
+    switch (container) {
+        case 'mp4':
+            return 'h264';
+        case 'webm':
+            return 'vp8';
+        default:
+            throw new Error(`Unsupported container: ${container}`);
+    }
+};
+export const getQualityForWebRendererQuality = (quality) => {
+    switch (quality) {
+        case 'very-low':
+            return QUALITY_VERY_LOW;
+        case 'low':
+            return QUALITY_LOW;
+        case 'medium':
+            return QUALITY_MEDIUM;
+        case 'high':
+            return QUALITY_HIGH;
+        case 'very-high':
+            return QUALITY_VERY_HIGH;
+        default:
+            throw new Error(`Unsupported quality: ${quality}`);
+    }
+};

package/dist/parse-transform-origin.d.ts

@@ -0,0 +1,4 @@
+export declare const parseTransformOrigin: (transformOrigin: string) => {
+    x: number;
+    y: number;
+} | null;

package/dist/parse-transform-origin.js

@@ -0,0 +1,7 @@
+export const parseTransformOrigin = (transformOrigin) => {
+    if (transformOrigin.trim() === '') {
+        return null;
+    }
+    const [x, y] = transformOrigin.split(' ');
+    return { x: parseFloat(x), y: parseFloat(y) };
+};

package/dist/props-if-has-props.d.ts

@@ -0,0 +1,37 @@
+import type { ComponentType } from 'react';
+import type { CalculateMetadataFunction } from 'remotion';
+import type { AnyZodObject, z } from 'zod';
+export type InferProps<Schema extends AnyZodObject, Props extends Record<string, unknown>> = AnyZodObject extends Schema ? {} extends Props ? Record<string, unknown> : Props : {} extends Props ? z.input<Schema> : // Props and schema specified
+z.input<Schema> & Props;
+export type DefaultPropsIfHasProps<Schema extends AnyZodObject, Props> = AnyZodObject extends Schema ? {} extends Props ? {
+    defaultProps?: z.input<Schema> & Props;
+} : {
+    defaultProps: Props;
+} : {} extends Props ? {
+    defaultProps: z.input<Schema>;
+} : {
+    defaultProps: z.input<Schema> & Props;
+};
+type LooseComponentType<T> = ComponentType<T> | ((props: T) => React.ReactNode);
+type OptionalDimensions<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
+    component: LooseComponentType<Props>;
+    id: string;
+    width?: number;
+    height?: number;
+    calculateMetadata: CalculateMetadataFunction<InferProps<Schema, Props>>;
+};
+type MandatoryDimensions<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
+    component: LooseComponentType<Props>;
+    id: string;
+    width: number;
+    height: number;
+    calculateMetadata?: CalculateMetadataFunction<InferProps<Schema, Props>> | null;
+};
+export type CompositionCalculateMetadataOrExplicit<Schema extends AnyZodObject, Props extends Record<string, unknown>> = ((OptionalDimensions<Schema, Props> & {
+    fps?: number;
+    durationInFrames?: number;
+}) | (MandatoryDimensions<Schema, Props> & {
+    fps: number;
+    durationInFrames: number;
+})) & DefaultPropsIfHasProps<Schema, Props>;
+export {};

package/dist/props-if-has-props.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,45 @@
+import { type LogLevel } from 'remotion';
+import type { AnyZodObject, z } from 'zod';
+import { type OnArtifact } from './artifact';
+import { type FrameRange } from './frame-range';
+import type { WebRendererContainer, WebRendererQuality } from './mediabunny-mappings';
+import { type WebRendererCodec } from './mediabunny-mappings';
+import type { CompositionCalculateMetadataOrExplicit } from './props-if-has-props';
+import { type OnFrameCallback } from './validate-video-frame';
+export type InputPropsIfHasProps<Schema extends AnyZodObject, Props> = AnyZodObject extends Schema ? {} extends Props ? {
+    inputProps?: z.input<Schema> & Props;
+} : {
+    inputProps: Props;
+} : {} extends Props ? {
+    inputProps: z.input<Schema>;
+} : {
+    inputProps: z.input<Schema> & Props;
+};
+type MandatoryRenderMediaOnWebOptions<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
+    composition: CompositionCalculateMetadataOrExplicit<Schema, Props>;
+};
+export type RenderMediaOnWebProgress = {
+    renderedFrames: number;
+    encodedFrames: number;
+};
+export type RenderMediaOnWebProgressCallback = (progress: RenderMediaOnWebProgress) => void;
+type OptionalRenderMediaOnWebOptions<Schema extends AnyZodObject> = {
+    delayRenderTimeoutInMilliseconds: number;
+    logLevel: LogLevel;
+    schema: Schema | undefined;
+    mediaCacheSizeInBytes: number | null;
+    codec: WebRendererCodec;
+    container: WebRendererContainer;
+    signal: AbortSignal | null;
+    onProgress: RenderMediaOnWebProgressCallback | null;
+    hardwareAcceleration: 'no-preference' | 'prefer-hardware' | 'prefer-software';
+    keyframeIntervalInSeconds: number;
+    videoBitrate: number | WebRendererQuality;
+    frameRange: FrameRange | null;
+    transparent: boolean;
+    onArtifact: OnArtifact | null;
+    onFrame: OnFrameCallback | null;
+};
+export type RenderMediaOnWebOptions<Schema extends AnyZodObject, Props extends Record<string, unknown>> = MandatoryRenderMediaOnWebOptions<Schema, Props> & Partial<OptionalRenderMediaOnWebOptions<Schema>> & InputPropsIfHasProps<Schema, Props>;
+export declare const renderMediaOnWeb: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(options: RenderMediaOnWebOptions<Schema, Props>) => Promise<ArrayBuffer>;
+export {};

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

@@ -0,0 +1,190 @@
+import { BufferTarget, Output, VideoSample, VideoSampleSource } from 'mediabunny';
+import { Internals } from 'remotion';
+import { handleArtifacts } from './artifact';
+import { createScaffold } from './create-scaffold';
+import { getRealFrameRange } from './frame-range';
+import { codecToMediabunnyCodec, containerToMediabunnyContainer, getDefaultVideoCodecForContainer, getQualityForWebRendererQuality, } from './mediabunny-mappings';
+import { createFrame } from './take-screenshot';
+import { createThrottledProgressCallback } from './throttle-progress';
+import { validateVideoFrame } from './validate-video-frame';
+import { waitForReady } from './wait-for-ready';
+// TODO: More containers
+// TODO: Audio
+// TODO: Metadata
+// TODO: Validating inputs
+// TODO: Web file system API
+// TODO: Apply defaultCodec
+const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTimeoutInMilliseconds, logLevel, mediaCacheSizeInBytes, schema, codec, container, signal, onProgress, hardwareAcceleration, keyframeIntervalInSeconds, videoBitrate, frameRange, transparent, onArtifact, onFrame, }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const cleanupFns = [];
+    const format = containerToMediabunnyContainer(container);
+    if (codec &&
+        !format.getSupportedCodecs().includes(codecToMediabunnyCodec(codec))) {
+        return Promise.reject(new Error(`Codec ${codec} is not supported for container ${container}`));
+    }
+    const resolved = await Internals.resolveVideoConfig({
+        calculateMetadata: (_a = composition.calculateMetadata) !== null && _a !== void 0 ? _a : null,
+        signal: signal !== null && signal !== void 0 ? signal : new AbortController().signal,
+        defaultProps: (_b = composition.defaultProps) !== null && _b !== void 0 ? _b : {},
+        inputProps: inputProps !== null && inputProps !== void 0 ? inputProps : {},
+        compositionId: composition.id,
+        compositionDurationInFrames: (_c = composition.durationInFrames) !== null && _c !== void 0 ? _c : null,
+        compositionFps: (_d = composition.fps) !== null && _d !== void 0 ? _d : null,
+        compositionHeight: (_e = composition.height) !== null && _e !== void 0 ? _e : null,
+        compositionWidth: (_f = composition.width) !== null && _f !== void 0 ? _f : null,
+    });
+    const realFrameRange = getRealFrameRange(resolved.durationInFrames, frameRange);
+    if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
+        return Promise.reject(new Error('renderMediaOnWeb() was cancelled'));
+    }
+    const { delayRenderScope, div, cleanupScaffold, timeUpdater, collectAssets } = await createScaffold({
+        width: resolved.width,
+        height: resolved.height,
+        fps: resolved.fps,
+        durationInFrames: resolved.durationInFrames,
+        Component: composition.component,
+        resolvedProps: resolved.props,
+        id: resolved.id,
+        delayRenderTimeoutInMilliseconds,
+        logLevel,
+        mediaCacheSizeInBytes,
+        schema: schema !== null && schema !== void 0 ? schema : null,
+        audioEnabled: true,
+        videoEnabled: true,
+        initialFrame: 0,
+        defaultCodec: resolved.defaultCodec,
+        defaultOutName: resolved.defaultOutName,
+    });
+    const artifactsHandler = handleArtifacts({
+        ref: collectAssets,
+        onArtifact,
+    });
+    cleanupFns.push(() => {
+        cleanupScaffold();
+    });
+    const output = new Output({
+        format,
+        target: new BufferTarget(),
+    });
+    try {
+        if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
+            throw new Error('renderMediaOnWeb() was cancelled');
+        }
+        await waitForReady({
+            timeoutInMilliseconds: delayRenderTimeoutInMilliseconds,
+            scope: delayRenderScope,
+            signal,
+            apiName: 'renderMediaOnWeb',
+        });
+        if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
+            throw new Error('renderMediaOnWeb() was cancelled');
+        }
+        cleanupFns.push(() => {
+            if (output.state === 'finalized' || output.state === 'canceled') {
+                return;
+            }
+            output.cancel();
+        });
+        const videoSampleSource = new VideoSampleSource({
+            codec: codecToMediabunnyCodec(codec),
+            bitrate: typeof videoBitrate === 'number'
+                ? videoBitrate
+                : getQualityForWebRendererQuality(videoBitrate),
+            sizeChangeBehavior: 'deny',
+            hardwareAcceleration,
+            latencyMode: 'quality',
+            keyFrameInterval: keyframeIntervalInSeconds,
+            alpha: transparent ? 'keep' : 'discard',
+        });
+        cleanupFns.push(() => {
+            videoSampleSource.close();
+        });
+        output.addVideoTrack(videoSampleSource);
+        await output.start();
+        if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
+            throw new Error('renderMediaOnWeb() was cancelled');
+        }
+        const progress = {
+            renderedFrames: 0,
+            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);
+            await waitForReady({
+                timeoutInMilliseconds: delayRenderTimeoutInMilliseconds,
+                scope: delayRenderScope,
+                signal,
+                apiName: 'renderMediaOnWeb',
+            });
+            if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
+                throw new Error('renderMediaOnWeb() was cancelled');
+            }
+            const imageData = await createFrame({
+                div,
+                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 videoFrame = new VideoFrame(imageData, {
+                timestamp,
+            });
+            progress.renderedFrames++;
+            throttledOnProgress === null || throttledOnProgress === void 0 ? void 0 : throttledOnProgress({ ...progress });
+            // Process frame through onFrame callback if provided
+            let frameToEncode = videoFrame;
+            if (onFrame) {
+                const returnedFrame = await onFrame(videoFrame);
+                frameToEncode = validateVideoFrame({
+                    originalFrame: videoFrame,
+                    returnedFrame,
+                    expectedWidth: resolved.width,
+                    expectedHeight: resolved.height,
+                    expectedTimestamp: timestamp,
+                });
+            }
+            await videoSampleSource.add(new VideoSample(frameToEncode));
+            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');
+            }
+        }
+        // Call progress one final time to ensure final state is reported
+        onProgress === null || onProgress === void 0 ? void 0 : onProgress({ ...progress });
+        videoSampleSource.close();
+        await output.finalize();
+        return output.target.buffer;
+    }
+    finally {
+        cleanupFns.forEach((fn) => fn());
+    }
+};
+export const renderMediaOnWeb = (options) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    const container = (_a = options.container) !== null && _a !== void 0 ? _a : 'mp4';
+    const codec = (_b = options.codec) !== null && _b !== void 0 ? _b : getDefaultVideoCodecForContainer(container);
+    return internalRenderMediaOnWeb({
+        ...options,
+        delayRenderTimeoutInMilliseconds: (_c = options.delayRenderTimeoutInMilliseconds) !== null && _c !== void 0 ? _c : 30000,
+        logLevel: (_d = options.logLevel) !== null && _d !== void 0 ? _d : 'info',
+        schema: (_e = options.schema) !== null && _e !== void 0 ? _e : undefined,
+        mediaCacheSizeInBytes: (_f = options.mediaCacheSizeInBytes) !== null && _f !== void 0 ? _f : null,
+        codec,
+        container,
+        signal: (_g = options.signal) !== null && _g !== void 0 ? _g : null,
+        onProgress: (_h = options.onProgress) !== null && _h !== void 0 ? _h : null,
+        hardwareAcceleration: (_j = options.hardwareAcceleration) !== null && _j !== void 0 ? _j : 'no-preference',
+        keyframeIntervalInSeconds: (_k = options.keyframeIntervalInSeconds) !== null && _k !== void 0 ? _k : 5,
+        videoBitrate: (_l = options.videoBitrate) !== null && _l !== void 0 ? _l : 'medium',
+        frameRange: (_m = options.frameRange) !== null && _m !== void 0 ? _m : null,
+        transparent: (_o = options.transparent) !== null && _o !== void 0 ? _o : false,
+        onArtifact: (_p = options.onArtifact) !== null && _p !== void 0 ? _p : null,
+        onFrame: (_q = options.onFrame) !== null && _q !== void 0 ? _q : null,
+    });
+};

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

@@ -1,18 +1,23 @@
-import { type ComponentType, type LazyExoticComponent } from 'react';
-import type { LogLevel } from 'remotion';
-type MandatoryRenderStillOnWebOptions<T extends Record<string, unknown>> = {
-    Component: LazyExoticComponent<ComponentType<T>> | ComponentType<T>;
-    width: number;
-    height: number;
-    fps: number;
-    durationInFrames: number;
+import { type LogLevel } from 'remotion';
+import type { AnyZodObject } from 'zod';
+import type { OnArtifact } from './artifact';
+import type { CompositionCalculateMetadataOrExplicit } from './props-if-has-props';
+import type { InputPropsIfHasProps } from './render-media-on-web';
+export type RenderStillOnWebImageFormat = 'png' | 'jpeg' | 'webp';
+type MandatoryRenderStillOnWebOptions<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
     frame: number;
-    inputProps: T;
+    imageFormat: RenderStillOnWebImageFormat;
+} & {
+    composition: CompositionCalculateMetadataOrExplicit<Schema, Props>;
 };
-type OptionalRenderStillOnWebOptions = {
+type OptionalRenderStillOnWebOptions<Schema extends AnyZodObject> = {
     delayRenderTimeoutInMilliseconds: number;
     logLevel: LogLevel;
+    schema: Schema | undefined;
+    mediaCacheSizeInBytes: number | null;
+    signal: AbortSignal | null;
+    onArtifact: OnArtifact | null;
 };
-type RenderStillOnWebOptions<T extends Record<string, unknown>> = MandatoryRenderStillOnWebOptions<T> & Partial<OptionalRenderStillOnWebOptions>;
-export declare const renderStillOnWeb: <T extends Record<string, unknown>>(options: RenderStillOnWebOptions<T>) => Promise<Blob>;
+export type RenderStillOnWebOptions<Schema extends AnyZodObject, Props extends Record<string, unknown>> = MandatoryRenderStillOnWebOptions<Schema, Props> & Partial<OptionalRenderStillOnWebOptions<Schema>> & InputPropsIfHasProps<Schema, Props>;
+export declare const renderStillOnWeb: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(options: RenderStillOnWebOptions<Schema, Props>) => Promise<Blob>;
 export {};

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

@@ -1,116 +1,81 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { flushSync } from 'react-dom';
-import ReactDOM from 'react-dom/client';
-import { Internals } from 'remotion';
-import { compose } from './compose';
-import { findCanvasElements } from './find-canvas-elements';
-import { findSvgElements } from './find-svg-elements';
+import { Internals, } from 'remotion';
+import { handleArtifacts } from './artifact';
+import { createScaffold } from './create-scaffold';
+import { takeScreenshot } from './take-screenshot';
 import { waitForReady } from './wait-for-ready';
-import { withResolvers } from './with-resolvers';
-const COMP_ID = 'markup';
-async function internalRenderStillOnWeb({ Component, width, height, fps, durationInFrames, frame, delayRenderTimeoutInMilliseconds, logLevel, inputProps, }) {
-    const div = document.createElement('div');
-    // Match same behavior as renderEntry.tsx
-    div.style.display = 'flex';
-    div.style.backgroundColor = 'transparent';
-    div.style.position = 'fixed';
-    div.style.width = `${width}px`;
-    div.style.height = `${height}px`;
-    div.style.zIndex = '-9999';
-    document.body.appendChild(div);
-    if (!ReactDOM.createRoot) {
-        throw new Error('@remotion/web-renderer requires React 18 or higher');
-    }
-    // TODO: Env variables
-    // TODO: Input Props
-    // TODO: Default props
-    // TODO: getInputProps()
-    // TODO: calculateMetadata()
-    // TODO: getRemotionEnvironment()
-    // TODO: delayRender()
-    // TODO: Video config
-    const { promise, resolve, reject } = withResolvers();
-    // TODO: This might not work in React 18
-    const root = ReactDOM.createRoot(div, {
-        onUncaughtError: (err) => {
-            reject(err);
-        },
-    });
-    const delayRenderScope = {
-        remotion_renderReady: true,
-        remotion_delayRenderTimeouts: {},
-        remotion_puppeteerTimeout: delayRenderTimeoutInMilliseconds,
-        remotion_attempt: 0,
-    };
-    flushSync(() => {
-        root.render(_jsx(Internals.RemotionEnvironmentContext, { value: {
-                isStudio: false,
-                isRendering: true,
-                isPlayer: false,
-                isReadOnlyStudio: false,
-                isClientSideRendering: true,
-            }, children: _jsx(Internals.DelayRenderContextType.Provider, { value: delayRenderScope, children: _jsx(Internals.CompositionManager.Provider, { value: {
-                        compositions: [
-                            {
-                                id: COMP_ID,
-                                // @ts-expect-error
-                                component: Component,
-                                nonce: 0,
-                                // TODO: Do we need to allow to set this?
-                                defaultProps: undefined,
-                                folderName: null,
-                                parentFolderName: null,
-                                schema: null,
-                                calculateMetadata: null,
-                                durationInFrames,
-                                fps,
-                                height,
-                                width,
-                            },
-                        ],
-                        canvasContent: {
-                            type: 'composition',
-                            compositionId: COMP_ID,
-                        },
-                        currentCompositionMetadata: {
-                            props: inputProps,
-                            durationInFrames,
-                            fps,
-                            height,
-                            width,
-                            defaultCodec: null,
-                            defaultOutName: null,
-                            defaultVideoImageFormat: null,
-                            defaultPixelFormat: null,
-                            defaultProResProfile: null,
-                        },
-                        folders: [],
-                    }, children: _jsx(Internals.RemotionRoot, { audioEnabled: false, videoEnabled: true, logLevel: logLevel, numberOfAudioTags: 0, audioLatencyHint: "interactive", frameState: {
-                            [COMP_ID]: frame,
-                        }, children: _jsx(Internals.CanUseRemotionHooks, { value: true, children: _jsx(Component, { ...inputProps }) }) }) }) }) }));
+async function internalRenderStillOnWeb({ frame, delayRenderTimeoutInMilliseconds, logLevel, inputProps, schema, imageFormat, mediaCacheSizeInBytes, composition, signal, onArtifact, }) {
+    var _a, _b, _c, _d, _e, _f;
+    const resolved = await Internals.resolveVideoConfig({
+        calculateMetadata: (_a = composition.calculateMetadata) !== null && _a !== void 0 ? _a : null,
+        signal: signal !== null && signal !== void 0 ? signal : new AbortController().signal,
+        defaultProps: (_b = composition.defaultProps) !== null && _b !== void 0 ? _b : {},
+        inputProps: inputProps !== null && inputProps !== void 0 ? inputProps : {},
+        compositionId: composition.id,
+        compositionDurationInFrames: (_c = composition.durationInFrames) !== null && _c !== void 0 ? _c : null,
+        compositionFps: (_d = composition.fps) !== null && _d !== void 0 ? _d : null,
+        compositionHeight: (_e = composition.height) !== null && _e !== void 0 ? _e : null,
+        compositionWidth: (_f = composition.width) !== null && _f !== void 0 ? _f : null,
     });
-    resolve();
-    await promise;
-    await waitForReady(delayRenderTimeoutInMilliseconds, delayRenderScope);
-    const canvasElements = findCanvasElements(div);
-    const svgElements = findSvgElements(div);
-    const composed = await compose({
-        composables: [...canvasElements, ...svgElements],
-        width,
-        height,
+    if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
+        return Promise.reject(new Error('renderStillOnWeb() was cancelled'));
+    }
+    const { delayRenderScope, div, cleanupScaffold, collectAssets } = await createScaffold({
+        width: resolved.width,
+        height: resolved.height,
+        delayRenderTimeoutInMilliseconds,
+        logLevel,
+        resolvedProps: resolved.props,
+        id: resolved.id,
+        mediaCacheSizeInBytes,
+        audioEnabled: false,
+        Component: composition.component,
+        videoEnabled: true,
+        durationInFrames: resolved.durationInFrames,
+        fps: resolved.fps,
+        schema: schema !== null && schema !== void 0 ? schema : null,
+        initialFrame: frame,
+        defaultCodec: resolved.defaultCodec,
+        defaultOutName: resolved.defaultOutName,
     });
-    const imageData = await composed.convertToBlob({
-        type: 'image/png',
+    const artifactsHandler = handleArtifacts({
+        ref: collectAssets,
+        onArtifact,
     });
-    root.unmount();
-    div.remove();
-    return imageData;
+    try {
+        if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
+            throw new Error('renderStillOnWeb() was cancelled');
+        }
+        await waitForReady({
+            timeoutInMilliseconds: delayRenderTimeoutInMilliseconds,
+            scope: delayRenderScope,
+            signal,
+            apiName: 'renderStillOnWeb',
+        });
+        if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
+            throw new Error('renderStillOnWeb() was cancelled');
+        }
+        const imageData = await takeScreenshot({
+            div,
+            width: resolved.width,
+            height: resolved.height,
+            imageFormat,
+        });
+        await artifactsHandler.handle({ imageData, frame });
+        return imageData;
+    }
+    finally {
+        cleanupScaffold();
+    }
 }
 export const renderStillOnWeb = (options) => {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
     return internalRenderStillOnWeb({
         ...options,
         delayRenderTimeoutInMilliseconds: (_a = options.delayRenderTimeoutInMilliseconds) !== null && _a !== void 0 ? _a : 30000,
         logLevel: (_b = options.logLevel) !== null && _b !== void 0 ? _b : 'info',
+        schema: (_c = options.schema) !== null && _c !== void 0 ? _c : undefined,
+        mediaCacheSizeInBytes: (_d = options.mediaCacheSizeInBytes) !== null && _d !== void 0 ? _d : null,
+        signal: (_e = options.signal) !== null && _e !== void 0 ? _e : null,
+        onArtifact: (_f = options.onArtifact) !== null && _f !== void 0 ? _f : null,
     });
 };