@remotion/web-renderer 4.0.421 → 4.0.423

package/dist/esm/index.mjs

@@ -360,6 +360,7 @@ var getEncodableAudioCodecs = async (container, options) => {
 // src/render-media-on-web.tsx
 import { BufferTarget, StreamTarget } from "mediabunny";
 import { Internals as Internals8 } from "remotion";
+import { VERSION } from "remotion/version";
 
 // src/add-sample.ts
 import { AudioSample, VideoSample } from "mediabunny";
@@ -790,10 +791,14 @@ var getRealFrameRange = (durationInFrames, 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}`);
+  const resolved = [
+    frameRange[0],
+    frameRange[1] === null ? durationInFrames - 1 : frameRange[1]
+  ];
+  if (resolved[0] < 0 || resolved[1] >= durationInFrames || resolved[0] > resolved[1]) {
+    throw new Error(`The "durationInFrames" of the composition was evaluated to be ${durationInFrames}, but frame range ${resolved.join("-")} is not inbetween 0-${durationInFrames - 1}`);
   }
-  return frameRange;
+  return resolved;
 };
 
 // src/internal-state.ts
@@ -3801,6 +3806,9 @@ var internalRenderMediaOnWeb = async ({
       format,
       target
     }), 0);
+    outputWithCleanup.output.setMetadataTags({
+      comment: `Made with Remotion ${VERSION}`
+    });
     const throttledProgress = __using(__stack2, createThrottledProgressCallback(onProgress), 0);
     const throttledOnProgress = throttledProgress?.throttled ?? null;
     try {

package/dist/frame-range.d.ts

@@ -1,2 +1,2 @@
-export type FrameRange = number | [number, number];
+export type FrameRange = number | [number, number] | [number, null];
 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/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/get-biggest-bounding-client-rect.js

@@ -0,0 +1,43 @@
+import { parseBoxShadow } from './drawing/draw-box-shadow';
+import { parseOutlineOffset, parseOutlineWidth } from './drawing/draw-outline';
+import { skipToNextNonDescendant } from './walk-tree';
+export const getBiggestBoundingClientRect = (element) => {
+    const treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT);
+    let mostLeft = Infinity;
+    let mostTop = Infinity;
+    let mostRight = -Infinity;
+    let mostBottom = -Infinity;
+    while (true) {
+        const computedStyle = getComputedStyle(treeWalker.currentNode);
+        const outlineWidth = parseOutlineWidth(computedStyle.outlineWidth);
+        const outlineOffset = parseOutlineOffset(computedStyle.outlineOffset);
+        const rect = treeWalker.currentNode.getBoundingClientRect();
+        // Calculate box shadow extensions
+        const shadows = parseBoxShadow(computedStyle.boxShadow);
+        let shadowLeft = 0;
+        let shadowRight = 0;
+        let shadowTop = 0;
+        let shadowBottom = 0;
+        for (const shadow of shadows) {
+            if (!shadow.inset) {
+                shadowLeft = Math.max(shadowLeft, Math.abs(Math.min(shadow.offsetX, 0)) + shadow.blurRadius);
+                shadowRight = Math.max(shadowRight, Math.max(shadow.offsetX, 0) + shadow.blurRadius);
+                shadowTop = Math.max(shadowTop, Math.abs(Math.min(shadow.offsetY, 0)) + shadow.blurRadius);
+                shadowBottom = Math.max(shadowBottom, Math.max(shadow.offsetY, 0) + shadow.blurRadius);
+            }
+        }
+        mostLeft = Math.min(mostLeft, rect.left - outlineOffset - outlineWidth - shadowLeft);
+        mostTop = Math.min(mostTop, rect.top - outlineOffset - outlineWidth - shadowTop);
+        mostRight = Math.max(mostRight, rect.right + outlineOffset + outlineWidth + shadowRight);
+        mostBottom = Math.max(mostBottom, rect.bottom + outlineOffset + outlineWidth + shadowBottom);
+        if (computedStyle.overflow === 'hidden') {
+            if (!skipToNextNonDescendant(treeWalker)) {
+                break;
+            }
+        }
+        if (!treeWalker.nextNode()) {
+            break;
+        }
+    }
+    return new DOMRect(mostLeft, mostTop, mostRight - mostLeft, mostBottom - mostTop);
+};

package/dist/index.js

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

package/dist/internal-state.js

@@ -0,0 +1,36 @@
+export const makeInternalState = () => {
+    let drawnPrecomposedPixels = 0;
+    let precomposedTextures = 0;
+    let waitForReadyTime = 0;
+    let addSampleTime = 0;
+    let createFrameTime = 0;
+    const helperCanvasState = {
+        current: null,
+    };
+    return {
+        getDrawn3dPixels: () => drawnPrecomposedPixels,
+        getPrecomposedTiles: () => precomposedTextures,
+        addPrecompose: ({ canvasWidth, canvasHeight, }) => {
+            drawnPrecomposedPixels += canvasWidth * canvasHeight;
+            precomposedTextures++;
+        },
+        helperCanvasState,
+        cleanup: () => {
+            if (helperCanvasState.current) {
+                helperCanvasState.current.cleanup();
+            }
+        },
+        getWaitForReadyTime: () => waitForReadyTime,
+        addWaitForReadyTime: (time) => {
+            waitForReadyTime += time;
+        },
+        getAddSampleTime: () => addSampleTime,
+        addAddSampleTime: (time) => {
+            addSampleTime += time;
+        },
+        getCreateFrameTime: () => createFrameTime,
+        addCreateFrameTime: (time) => {
+            createFrameTime += time;
+        },
+    };
+};

package/dist/mediabunny-mappings.d.ts

@@ -12,4 +12,4 @@ export declare const getMimeType: (container: WebRendererContainer) => string;
 export declare const getDefaultAudioCodecForContainer: (container: WebRendererContainer) => WebRendererAudioCodec;
 export declare const getSupportedVideoCodecsForContainer: (container: WebRendererContainer) => WebRendererVideoCodec[];
 export declare const getSupportedAudioCodecsForContainer: (container: WebRendererContainer) => WebRendererAudioCodec[];
-export declare const audioCodecToMediabunnyAudioCodec: (audioCodec: WebRendererAudioCodec) => "aac" | "alaw" | "flac" | "mp3" | "opus" | "pcm-f32" | "pcm-f32be" | "pcm-f64" | "pcm-f64be" | "pcm-s16" | "pcm-s16be" | "pcm-s24" | "pcm-s24be" | "pcm-s32" | "pcm-s32be" | "pcm-s8" | "pcm-u8" | "ulaw" | "vorbis";
+export declare const audioCodecToMediabunnyAudioCodec: (audioCodec: WebRendererAudioCodec) => "aac" | "ac3" | "alaw" | "eac3" | "flac" | "mp3" | "opus" | "pcm-f32" | "pcm-f32be" | "pcm-f64" | "pcm-f64be" | "pcm-s16" | "pcm-s16be" | "pcm-s24" | "pcm-s24be" | "pcm-s32" | "pcm-s32be" | "pcm-s8" | "pcm-u8" | "ulaw" | "vorbis";

package/dist/mediabunny-mappings.js

@@ -0,0 +1,63 @@
+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}`);
+    }
+};
+export const getMimeType = (container) => {
+    switch (container) {
+        case 'mp4':
+            return 'video/mp4';
+        case 'webm':
+            return 'video/webm';
+        default:
+            throw new Error(`Unsupported container: ${container}`);
+    }
+};

package/dist/output-target.js

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

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

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

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

@@ -0,0 +1,304 @@
+import { AudioSampleSource, BufferTarget, Output, StreamTarget, VideoSampleSource, } from 'mediabunny';
+import { Internals } from 'remotion';
+import { addAudioSample, addVideoSampleAndCloseFrame } from './add-sample';
+import { handleArtifacts } from './artifact';
+import { onlyInlineAudio } from './audio';
+import { canUseWebFsWriter } from './can-use-webfs-target';
+import { createScaffold } from './create-scaffold';
+import { getRealFrameRange } from './frame-range';
+import { getDefaultAudioEncodingConfig } from './get-audio-encoding-config';
+import { makeInternalState } from './internal-state';
+import { codecToMediabunnyCodec, containerToMediabunnyContainer, getDefaultVideoCodecForContainer, getMimeType, getQualityForWebRendererQuality, } from './mediabunny-mappings';
+import { onlyOneRenderAtATimeQueue } from './render-operations-queue';
+import { sendUsageEvent } from './send-telemetry-event';
+import { createFrame } from './take-screenshot';
+import { createThrottledProgressCallback } from './throttle-progress';
+import { validateVideoFrame } from './validate-video-frame';
+import { waitForReady } from './wait-for-ready';
+import { cleanupStaleOpfsFiles, createWebFsTarget } from './web-fs-target';
+// TODO: More containers
+// TODO: Audio
+// TODO: Metadata
+// TODO: Validating inputs
+// TODO: Apply defaultCodec
+const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTimeoutInMilliseconds, logLevel, mediaCacheSizeInBytes, schema, videoCodec: codec, container, signal, onProgress, hardwareAcceleration, keyframeIntervalInSeconds, videoBitrate, frameRange, transparent, onArtifact, onFrame, outputTarget: userDesiredOutputTarget, licenseKey, muted, }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const outputTarget = userDesiredOutputTarget === null
+        ? (await canUseWebFsWriter())
+            ? 'web-fs'
+            : 'arraybuffer'
+        : userDesiredOutputTarget;
+    if (outputTarget === 'web-fs') {
+        await cleanupStaleOpfsFiles();
+    }
+    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: !muted,
+        videoEnabled: true,
+        initialFrame: 0,
+        defaultCodec: resolved.defaultCodec,
+        defaultOutName: resolved.defaultOutName,
+    });
+    const internalState = makeInternalState();
+    const artifactsHandler = handleArtifacts();
+    cleanupFns.push(() => {
+        cleanupScaffold();
+    });
+    const webFsTarget = outputTarget === 'web-fs' ? await createWebFsTarget() : null;
+    const target = webFsTarget
+        ? new StreamTarget(webFsTarget.stream)
+        : new BufferTarget();
+    const output = new Output({
+        format,
+        target,
+    });
+    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',
+            internalState,
+        });
+        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);
+        // TODO: Should be able to customize
+        let audioSampleSource = null;
+        if (!muted) {
+            const defaultAudioEncodingConfig = await getDefaultAudioEncodingConfig();
+            if (!defaultAudioEncodingConfig) {
+                return Promise.reject(new Error('No default audio encoding config found'));
+            }
+            audioSampleSource = new AudioSampleSource(defaultAudioEncodingConfig);
+            cleanupFns.push(() => {
+                audioSampleSource === null || audioSampleSource === void 0 ? void 0 : audioSampleSource.close();
+            });
+            output.addAudioTrack(audioSampleSource);
+        }
+        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 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,
+                signal,
+                apiName: 'renderMediaOnWeb',
+                internalState,
+            });
+            if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
+                throw new Error('renderMediaOnWeb() was cancelled');
+            }
+            const createFrameStart = performance.now();
+            const imageData = await createFrame({
+                div,
+                width: resolved.width,
+                height: resolved.height,
+                logLevel,
+                internalState,
+            });
+            internalState.addCreateFrameTime(performance.now() - createFrameStart);
+            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,
+                    assets,
+                    onArtifact,
+                });
+            }
+            if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
+                throw new Error('renderMediaOnWeb() was cancelled');
+            }
+            const audio = muted
+                ? null
+                : onlyInlineAudio({ assets, fps: resolved.fps, frame });
+            const timestamp = Math.round(((frame - 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);
+                if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
+                    throw new Error('renderMediaOnWeb() was cancelled');
+                }
+                frameToEncode = validateVideoFrame({
+                    originalFrame: videoFrame,
+                    returnedFrame,
+                    expectedWidth: resolved.width,
+                    expectedHeight: resolved.height,
+                    expectedTimestamp: timestamp,
+                });
+            }
+            const addSampleStart = performance.now();
+            await Promise.all([
+                addVideoSampleAndCloseFrame(frameToEncode, videoSampleSource),
+                audio && audioSampleSource
+                    ? addAudioSample(audio, audioSampleSource)
+                    : Promise.resolve(),
+            ]);
+            internalState.addAddSampleTime(performance.now() - addSampleStart);
+            progress.encodedFrames++;
+            throttledOnProgress === null || throttledOnProgress === void 0 ? void 0 : throttledOnProgress({ ...progress });
+            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();
+        audioSampleSource === null || audioSampleSource === void 0 ? void 0 : audioSampleSource.close();
+        await output.finalize();
+        Internals.Log.verbose({ logLevel, tag: 'web-renderer' }, `Render timings: waitForReady=${internalState.getWaitForReadyTime().toFixed(2)}ms, createFrame=${internalState.getCreateFrameTime().toFixed(2)}ms, addSample=${internalState.getAddSampleTime().toFixed(2)}ms`);
+        const mimeType = getMimeType(container);
+        if (webFsTarget) {
+            sendUsageEvent({
+                licenseKey: licenseKey !== null && licenseKey !== void 0 ? licenseKey : null,
+                succeeded: true,
+                apiName: 'renderMediaOnWeb',
+            });
+            await webFsTarget.close();
+            return {
+                getBlob: () => {
+                    return webFsTarget.getBlob();
+                },
+                internalState,
+            };
+        }
+        if (!(target instanceof BufferTarget)) {
+            throw new Error('Expected target to be a BufferTarget');
+        }
+        sendUsageEvent({
+            licenseKey: licenseKey !== null && licenseKey !== void 0 ? licenseKey : null,
+            succeeded: true,
+            apiName: 'renderMediaOnWeb',
+        });
+        return {
+            getBlob: () => {
+                if (!target.buffer) {
+                    throw new Error('The resulting buffer is empty');
+                }
+                return Promise.resolve(new Blob([target.buffer], { type: mimeType }));
+            },
+            internalState,
+        };
+    }
+    catch (err) {
+        sendUsageEvent({
+            succeeded: false,
+            licenseKey: licenseKey !== null && licenseKey !== void 0 ? licenseKey : null,
+            apiName: 'renderMediaOnWeb',
+        }).catch((err2) => {
+            Internals.Log.error({ logLevel: 'error', tag: 'web-renderer' }, 'Failed to send usage event', err2);
+        });
+        throw err;
+    }
+    finally {
+        cleanupFns.forEach((fn) => fn());
+    }
+};
+export const renderMediaOnWeb = (options) => {
+    var _a, _b;
+    const container = (_a = options.container) !== null && _a !== void 0 ? _a : 'mp4';
+    const codec = (_b = options.videoCodec) !== null && _b !== void 0 ? _b : getDefaultVideoCodecForContainer(container);
+    onlyOneRenderAtATimeQueue.ref = onlyOneRenderAtATimeQueue.ref
+        .catch(() => Promise.resolve())
+        .then(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        return internalRenderMediaOnWeb({
+            ...options,
+            delayRenderTimeoutInMilliseconds: (_a = options.delayRenderTimeoutInMilliseconds) !== null && _a !== void 0 ? _a : 30000,
+            logLevel: (_c = (_b = options.logLevel) !== null && _b !== void 0 ? _b : window.remotion_logLevel) !== null && _c !== void 0 ? _c : 'info',
+            schema: (_d = options.schema) !== null && _d !== void 0 ? _d : undefined,
+            mediaCacheSizeInBytes: (_e = options.mediaCacheSizeInBytes) !== null && _e !== void 0 ? _e : null,
+            videoCodec: codec,
+            container,
+            signal: (_f = options.signal) !== null && _f !== void 0 ? _f : null,
+            onProgress: (_g = options.onProgress) !== null && _g !== void 0 ? _g : null,
+            hardwareAcceleration: (_h = options.hardwareAcceleration) !== null && _h !== void 0 ? _h : 'no-preference',
+            keyframeIntervalInSeconds: (_j = options.keyframeIntervalInSeconds) !== null && _j !== void 0 ? _j : 5,
+            videoBitrate: (_k = options.videoBitrate) !== null && _k !== void 0 ? _k : 'medium',
+            frameRange: (_l = options.frameRange) !== null && _l !== void 0 ? _l : null,
+            transparent: (_m = options.transparent) !== null && _m !== void 0 ? _m : false,
+            onArtifact: (_o = options.onArtifact) !== null && _o !== void 0 ? _o : null,
+            onFrame: (_p = options.onFrame) !== null && _p !== void 0 ? _p : null,
+            outputTarget: (_q = options.outputTarget) !== null && _q !== void 0 ? _q : null,
+            licenseKey: (_r = options.licenseKey) !== null && _r !== void 0 ? _r : undefined,
+            muted: (_s = options.muted) !== null && _s !== void 0 ? _s : false,
+        });
+    });
+    return onlyOneRenderAtATimeQueue.ref;
+};

package/dist/render-operations-queue.js

@@ -0,0 +1,3 @@
+export const onlyOneRenderAtATimeQueue = {
+    ref: Promise.resolve(),
+};

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

@@ -0,0 +1,110 @@
+import { Internals, } from 'remotion';
+import { handleArtifacts } from './artifact';
+import { createScaffold } from './create-scaffold';
+import { makeInternalState } from './internal-state';
+import { onlyOneRenderAtATimeQueue } from './render-operations-queue';
+import { sendUsageEvent } from './send-telemetry-event';
+import { takeScreenshot } from './take-screenshot';
+import { waitForReady } from './wait-for-ready';
+async function internalRenderStillOnWeb({ frame, delayRenderTimeoutInMilliseconds, logLevel, inputProps, schema, imageFormat, mediaCacheSizeInBytes, composition, signal, onArtifact, licenseKey, }) {
+    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,
+    });
+    if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
+        return Promise.reject(new Error('renderStillOnWeb() was cancelled'));
+    }
+    const internalState = makeInternalState();
+    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 artifactsHandler = handleArtifacts();
+    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',
+            internalState: null,
+        });
+        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,
+            logLevel,
+            internalState,
+        });
+        const assets = collectAssets.current.collectAssets();
+        if (onArtifact) {
+            await artifactsHandler.handle({ imageData, frame, assets, onArtifact });
+        }
+        sendUsageEvent({
+            licenseKey: licenseKey !== null && licenseKey !== void 0 ? licenseKey : null,
+            succeeded: true,
+            apiName: 'renderStillOnWeb',
+        });
+        return { blob: imageData, internalState };
+    }
+    catch (err) {
+        sendUsageEvent({
+            succeeded: false,
+            licenseKey: licenseKey !== null && licenseKey !== void 0 ? licenseKey : null,
+            apiName: 'renderStillOnWeb',
+        }).catch((err2) => {
+            Internals.Log.error({ logLevel: 'error', tag: 'web-renderer' }, 'Failed to send usage event', err2);
+        });
+        throw err;
+    }
+    finally {
+        internalState.cleanup();
+        cleanupScaffold();
+    }
+}
+export const renderStillOnWeb = (options) => {
+    onlyOneRenderAtATimeQueue.ref = onlyOneRenderAtATimeQueue.ref
+        .catch(() => Promise.resolve())
+        .then(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        return internalRenderStillOnWeb({
+            ...options,
+            delayRenderTimeoutInMilliseconds: (_a = options.delayRenderTimeoutInMilliseconds) !== null && _a !== void 0 ? _a : 30000,
+            logLevel: (_c = (_b = options.logLevel) !== null && _b !== void 0 ? _b : window.remotion_logLevel) !== null && _c !== void 0 ? _c : 'info',
+            schema: (_d = options.schema) !== null && _d !== void 0 ? _d : undefined,
+            mediaCacheSizeInBytes: (_e = options.mediaCacheSizeInBytes) !== null && _e !== void 0 ? _e : null,
+            signal: (_f = options.signal) !== null && _f !== void 0 ? _f : null,
+            onArtifact: (_g = options.onArtifact) !== null && _g !== void 0 ? _g : null,
+            licenseKey: (_h = options.licenseKey) !== null && _h !== void 0 ? _h : undefined,
+        });
+    });
+    return onlyOneRenderAtATimeQueue.ref;
+};