@remotion/renderer 4.0.0-oops.3 → 4.0.0-prefetch.7

package/dist/render-media.js

@@ -8,29 +8,50 @@ const fs_1 = __importDefault(require("fs"));
 const os_1 = __importDefault(require("os"));
 const path_1 = __importDefault(require("path"));
 const remotion_1 = require("remotion");
+const download_map_1 = require("./assets/download-map");
 const can_use_parallel_encoding_1 = require("./can-use-parallel-encoding");
+const codec_supports_media_1 = require("./codec-supports-media");
+const crf_1 = require("./crf");
+const delete_directory_1 = require("./delete-directory");
 const ensure_frames_in_order_1 = require("./ensure-frames-in-order");
 const ensure_output_directory_1 = require("./ensure-output-directory");
 const get_duration_from_frame_range_1 = require("./get-duration-from-frame-range");
 const get_extension_from_codec_1 = require("./get-extension-from-codec");
 const get_extension_of_filename_1 = require("./get-extension-of-filename");
 const get_frame_to_render_1 = require("./get-frame-to-render");
+const is_audio_codec_1 = require("./is-audio-codec");
 const legacy_webpack_config_1 = require("./legacy-webpack-config");
+const make_cancel_signal_1 = require("./make-cancel-signal");
+const overwrite_1 = require("./overwrite");
+const perf_1 = require("./perf");
 const prespawn_ffmpeg_1 = require("./prespawn-ffmpeg");
+const prestitcher_memory_usage_1 = require("./prestitcher-memory-usage");
+const quality_1 = require("./quality");
 const render_frames_1 = require("./render-frames");
 const stitch_frames_to_video_1 = require("./stitch-frames-to-video");
-const tmp_dir_1 = require("./tmp-dir");
 const validate_even_dimensions_with_codec_1 = require("./validate-even-dimensions-with-codec");
 const validate_output_filename_1 = require("./validate-output-filename");
 const validate_scale_1 = require("./validate-scale");
-const renderMedia = async ({ parallelism, proResProfile, crf, composition, imageFormat, ffmpegExecutable, inputProps, pixelFormat, codec, envVariables, quality, frameRange, puppeteerInstance, outputLocation, onProgress, overwrite, onDownload, dumpBrowserLogs, onBrowserLog, onStart, timeoutInMilliseconds, chromiumOptions, scale, ...options }) => {
-    var _a;
-    remotion_1.Internals.validateQuality(quality);
+/**
+ *
+ * @description Render a video from a composition
+ * @link https://www.remotion.dev/docs/renderer/render-media
+ */
+const renderMedia = ({ parallelism, proResProfile, crf, composition, ffmpegExecutable, ffprobeExecutable, inputProps, pixelFormat, codec, envVariables, frameRange, puppeteerInstance, outputLocation, onProgress, overwrite, onDownload, dumpBrowserLogs, onBrowserLog, onStart, timeoutInMilliseconds, chromiumOptions, scale, browserExecutable, port, cancelSignal, muted, enforceAudioTrack, ...options }) => {
+    var _a, _b, _c, _d;
+    (0, quality_1.validateQuality)(options.quality);
     if (typeof crf !== 'undefined' && crf !== null) {
-        remotion_1.Internals.validateSelectedCrfAndCodecCombination(crf, codec);
+        (0, crf_1.validateSelectedCrfAndCodecCombination)(crf, codec);
     }
-    (0, validate_output_filename_1.validateOutputFilename)(codec, (0, get_extension_of_filename_1.getExtensionOfFilename)(outputLocation));
+    if (outputLocation) {
+        (0, validate_output_filename_1.validateOutputFilename)(codec, (0, get_extension_of_filename_1.getExtensionOfFilename)(outputLocation));
+    }
+    const absoluteOutputLocation = outputLocation
+        ? path_1.default.resolve(process.cwd(), outputLocation)
+        : null;
     (0, validate_scale_1.validateScale)(scale);
+    const everyNthFrame = (_a = options.everyNthFrame) !== null && _a !== void 0 ? _a : 1;
+    const numberOfGifLoops = (_b = options.numberOfGifLoops) !== null && _b !== void 0 ? _b : null;
     const serveUrl = (0, legacy_webpack_config_1.getServeUrlWithFallback)(options);
     let stitchStage = 'encoding';
     let stitcherFfmpeg;
@@ -39,37 +60,66 @@ const renderMedia = async ({ parallelism, proResProfile, crf, composition, image
     let renderedFrames = 0;
     let renderedDoneIn = null;
     let encodedDoneIn = null;
+    let cancelled = false;
     const renderStart = Date.now();
-    const tmpdir = (0, tmp_dir_1.tmpDir)('pre-encode');
-    const parallelEncoding = (0, can_use_parallel_encoding_1.canUseParallelEncoding)(codec);
-    const actualImageFormat = imageFormat !== null && imageFormat !== void 0 ? imageFormat : 'jpeg';
+    const downloadMap = (_c = options.downloadMap) !== null && _c !== void 0 ? _c : (0, download_map_1.makeDownloadMap)();
+    const { estimatedUsage, freeMemory, hasEnoughMemory } = (0, prestitcher_memory_usage_1.shouldUseParallelEncoding)({
+        height: composition.height,
+        width: composition.width,
+    });
+    const parallelEncoding = hasEnoughMemory && (0, can_use_parallel_encoding_1.canUseParallelEncoding)(codec);
+    if (options.verbose) {
+        console.log('[PRESTITCHER] Free memory:', freeMemory, 'Estimated usage parallel encoding', estimatedUsage);
+        console.log('[PRESTICHER]: Codec supports parallel rendering:', (0, can_use_parallel_encoding_1.canUseParallelEncoding)(codec));
+        if (parallelEncoding) {
+            console.log('[PRESTICHER] Parallel encoding is enabled.');
+        }
+        else {
+            console.log('[PRESTITCHER] Parallel encoding is disabled.');
+        }
+    }
+    const imageFormat = (0, is_audio_codec_1.isAudioCodec)(codec)
+        ? 'none'
+        : (_d = options.imageFormat) !== null && _d !== void 0 ? _d : 'jpeg';
+    const quality = imageFormat === 'jpeg' ? options.quality : undefined;
     const preEncodedFileLocation = parallelEncoding
-        ? path_1.default.join(tmpdir, 'pre-encode.' + (0, get_extension_from_codec_1.getFileExtensionFromCodec)(codec, 'chunk'))
+        ? path_1.default.join(downloadMap.preEncode, 'pre-encode.' + (0, get_extension_from_codec_1.getFileExtensionFromCodec)(codec, 'chunk'))
         : null;
     const outputDir = parallelEncoding
         ? null
-        : await fs_1.default.promises.mkdtemp(path_1.default.join(os_1.default.tmpdir(), 'react-motion-render'));
+        : fs_1.default.mkdtempSync(path_1.default.join(os_1.default.tmpdir(), 'react-motion-render'));
     (0, validate_even_dimensions_with_codec_1.validateEvenDimensionsWithCodec)({
         codec,
         height: composition.height,
         scale: scale !== null && scale !== void 0 ? scale : 1,
         width: composition.width,
     });
-    try {
-        const callUpdate = () => {
-            onProgress === null || onProgress === void 0 ? void 0 : onProgress({
-                encodedDoneIn,
-                encodedFrames,
-                renderedDoneIn,
-                renderedFrames,
-                stitchStage,
-            });
-        };
+    const callUpdate = () => {
+        onProgress === null || onProgress === void 0 ? void 0 : onProgress({
+            encodedDoneIn,
+            encodedFrames,
+            renderedDoneIn,
+            renderedFrames,
+            stitchStage,
+        });
+    };
+    const realFrameRange = (0, get_frame_to_render_1.getRealFrameRange)(composition.durationInFrames, frameRange !== null && frameRange !== void 0 ? frameRange : null);
+    const cancelRenderFrames = (0, make_cancel_signal_1.makeCancelSignal)();
+    const cancelPrestitcher = (0, make_cancel_signal_1.makeCancelSignal)();
+    const cancelStitcher = (0, make_cancel_signal_1.makeCancelSignal)();
+    cancelSignal === null || cancelSignal === void 0 ? void 0 : cancelSignal(() => {
+        cancelRenderFrames.cancel();
+    });
+    const { waitForRightTimeOfFrameToBeInserted, setFrameToStitch, waitForFinish } = (0, ensure_frames_in_order_1.ensureFramesInOrder)(realFrameRange);
+    const fps = composition.fps / (everyNthFrame !== null && everyNthFrame !== void 0 ? everyNthFrame : 1);
+    remotion_1.Internals.validateFps(fps, 'in "renderMedia()"', codec === 'gif');
+    const createPrestitcherIfNecessary = async () => {
+        var _a;
         if (preEncodedFileLocation) {
             preStitcher = await (0, prespawn_ffmpeg_1.prespawnFfmpeg)({
                 width: composition.width * (scale !== null && scale !== void 0 ? scale : 1),
                 height: composition.height * (scale !== null && scale !== void 0 ? scale : 1),
-                fps: composition.fps,
+                fps,
                 outputLocation: preEncodedFileLocation,
                 pixelFormat,
                 codec,
@@ -79,15 +129,32 @@ const renderMedia = async ({ parallelism, proResProfile, crf, composition, image
                     encodedFrames = frame;
                     callUpdate();
                 },
-                verbose: remotion_1.Internals.Logging.isEqualOrBelowLogLevel(remotion_1.Internals.Logging.getLogLevel(), 'verbose'),
+                verbose: (_a = options.verbose) !== null && _a !== void 0 ? _a : false,
                 ffmpegExecutable,
-                imageFormat: actualImageFormat,
+                imageFormat,
+                signal: cancelPrestitcher.cancelSignal,
             });
             stitcherFfmpeg = preStitcher.task;
         }
-        const realFrameRange = (0, get_frame_to_render_1.getRealFrameRange)(composition.durationInFrames, frameRange !== null && frameRange !== void 0 ? frameRange : null);
-        const { waitForRightTimeOfFrameToBeInserted, setFrameToStitch, waitForFinish, } = (0, ensure_frames_in_order_1.ensureFramesInOrder)(realFrameRange);
-        const { assetsInfo } = await (0, render_frames_1.renderFrames)({
+    };
+    const waitForPrestitcherIfNecessary = async () => {
+        var _a;
+        if (stitcherFfmpeg) {
+            await waitForFinish();
+            (_a = stitcherFfmpeg === null || stitcherFfmpeg === void 0 ? void 0 : stitcherFfmpeg.stdin) === null || _a === void 0 ? void 0 : _a.end();
+            try {
+                await stitcherFfmpeg;
+            }
+            catch (err) {
+                throw new Error(preStitcher === null || preStitcher === void 0 ? void 0 : preStitcher.getLogs());
+            }
+        }
+    };
+    const mediaSupport = (0, codec_supports_media_1.codecSupportsMedia)(codec);
+    const disableAudio = !mediaSupport.audio || muted;
+    const happyPath = createPrestitcherIfNecessary()
+        .then(() => {
+        const renderFramesProc = (0, render_frames_1.renderFrames)({
             config: composition,
             onFrameUpdate: (frame) => {
                 renderedFrames = frame;
@@ -102,16 +169,22 @@ const renderMedia = async ({ parallelism, proResProfile, crf, composition, image
             },
             inputProps,
             envVariables,
-            imageFormat: actualImageFormat,
+            imageFormat,
             quality,
             frameRange: frameRange !== null && frameRange !== void 0 ? frameRange : null,
             puppeteerInstance,
+            everyNthFrame,
             onFrameBuffer: parallelEncoding
                 ? async (buffer, frame) => {
                     var _a;
                     await waitForRightTimeOfFrameToBeInserted(frame);
+                    if (cancelled) {
+                        return;
+                    }
+                    const id = (0, perf_1.startPerfMeasure)('piping');
                     (_a = stitcherFfmpeg === null || stitcherFfmpeg === void 0 ? void 0 : stitcherFfmpeg.stdin) === null || _a === void 0 ? void 0 : _a.write(buffer);
-                    setFrameToStitch(frame + 1);
+                    (0, perf_1.stopPerfMeasure)(id);
+                    setFrameToStitch(Math.min(realFrameRange[1] + 1, frame + everyNthFrame));
                 }
                 : undefined,
             serveUrl,
@@ -121,55 +194,106 @@ const renderMedia = async ({ parallelism, proResProfile, crf, composition, image
             timeoutInMilliseconds,
             chromiumOptions,
             scale,
+            ffmpegExecutable,
+            ffprobeExecutable,
+            browserExecutable,
+            port,
+            cancelSignal: cancelRenderFrames.cancelSignal,
+            downloadMap,
+            muted: disableAudio,
         });
-        if (stitcherFfmpeg) {
-            await waitForFinish();
-            (_a = stitcherFfmpeg === null || stitcherFfmpeg === void 0 ? void 0 : stitcherFfmpeg.stdin) === null || _a === void 0 ? void 0 : _a.end();
-            try {
-                await stitcherFfmpeg;
-            }
-            catch (err) {
-                throw new Error(preStitcher === null || preStitcher === void 0 ? void 0 : preStitcher.getLogs());
-            }
-        }
+        return renderFramesProc;
+    })
+        .then((renderFramesReturn) => {
+        return Promise.all([renderFramesReturn, waitForPrestitcherIfNecessary()]);
+    })
+        .then(([{ assetsInfo }]) => {
         renderedDoneIn = Date.now() - renderStart;
         callUpdate();
-        (0, ensure_output_directory_1.ensureOutputDirectory)(outputLocation);
+        if (absoluteOutputLocation) {
+            (0, ensure_output_directory_1.ensureOutputDirectory)(absoluteOutputLocation);
+        }
         const stitchStart = Date.now();
-        await (0, stitch_frames_to_video_1.stitchFramesToVideo)({
-            width: composition.width * (scale !== null && scale !== void 0 ? scale : 1),
-            height: composition.height * (scale !== null && scale !== void 0 ? scale : 1),
-            fps: composition.fps,
-            outputLocation,
-            internalOptions: {
-                preEncodedFileLocation,
-                imageFormat: actualImageFormat,
-            },
-            force: overwrite !== null && overwrite !== void 0 ? overwrite : remotion_1.Internals.DEFAULT_OVERWRITE,
-            pixelFormat,
-            codec,
-            proResProfile,
-            crf,
-            assetsInfo,
-            ffmpegExecutable,
-            onProgress: (frame) => {
-                stitchStage = 'muxing';
-                encodedFrames = frame;
-                callUpdate();
-            },
-            onDownload,
-            verbose: remotion_1.Internals.Logging.isEqualOrBelowLogLevel(remotion_1.Internals.Logging.getLogLevel(), 'verbose'),
-            dir: outputDir !== null && outputDir !== void 0 ? outputDir : undefined,
-        });
-        encodedFrames = (0, get_duration_from_frame_range_1.getDurationFromFrameRange)(frameRange !== null && frameRange !== void 0 ? frameRange : null, composition.durationInFrames);
+        return Promise.all([
+            (0, stitch_frames_to_video_1.stitchFramesToVideo)({
+                width: composition.width * (scale !== null && scale !== void 0 ? scale : 1),
+                height: composition.height * (scale !== null && scale !== void 0 ? scale : 1),
+                fps,
+                outputLocation: absoluteOutputLocation,
+                internalOptions: {
+                    preEncodedFileLocation,
+                    imageFormat,
+                },
+                force: overwrite !== null && overwrite !== void 0 ? overwrite : overwrite_1.DEFAULT_OVERWRITE,
+                pixelFormat,
+                codec,
+                proResProfile,
+                crf,
+                assetsInfo,
+                ffmpegExecutable,
+                ffprobeExecutable,
+                onProgress: (frame) => {
+                    stitchStage = 'muxing';
+                    encodedFrames = frame;
+                    callUpdate();
+                },
+                onDownload,
+                numberOfGifLoops,
+                verbose: options.verbose,
+                dir: outputDir !== null && outputDir !== void 0 ? outputDir : undefined,
+                cancelSignal: cancelStitcher.cancelSignal,
+                muted: disableAudio,
+                enforceAudioTrack,
+            }),
+            stitchStart,
+        ]);
+    })
+        .then(([buffer, stitchStart]) => {
+        encodedFrames = (0, get_duration_from_frame_range_1.getFramesToRender)(realFrameRange, everyNthFrame).length;
         encodedDoneIn = Date.now() - stitchStart;
         callUpdate();
-    }
-    finally {
+        return buffer;
+    })
+        .catch((err) => {
+        /**
+         * When an error is thrown in renderFrames(...) (e.g., when delayRender() is used incorrectly), fs.unlinkSync(...) throws an error that the file is locked because ffmpeg is still running, and renderMedia returns it.
+         * Therefore we first kill the FFMPEG process before deleting the file
+         */
+        cancelled = true;
+        cancelRenderFrames.cancel();
+        cancelStitcher.cancel();
+        cancelPrestitcher.cancel();
+        if (stitcherFfmpeg !== undefined && stitcherFfmpeg.exitCode === null) {
+            const promise = new Promise((resolve) => {
+                setTimeout(() => {
+                    resolve();
+                }, 2000);
+                stitcherFfmpeg.on('close', resolve);
+            });
+            stitcherFfmpeg.kill();
+            return promise.then(() => {
+                throw err;
+            });
+        }
+        throw err;
+    })
+        .finally(() => {
         if (preEncodedFileLocation !== null &&
             fs_1.default.existsSync(preEncodedFileLocation)) {
-            fs_1.default.unlinkSync(preEncodedFileLocation);
+            (0, delete_directory_1.deleteDirectory)(path_1.default.dirname(preEncodedFileLocation));
         }
-    }
+        // Clean download map if it was not passed in
+        if (!(options === null || options === void 0 ? void 0 : options.downloadMap)) {
+            (0, download_map_1.cleanDownloadMap)(downloadMap);
+        }
+    });
+    return Promise.race([
+        happyPath,
+        new Promise((_resolve, reject) => {
+            cancelSignal === null || cancelSignal === void 0 ? void 0 : cancelSignal(() => {
+                reject(new Error('renderMedia() got cancelled'));
+            });
+        }),
+    ]);
 };
 exports.renderMedia = renderMedia;

package/dist/render-still.d.ts

@@ -1,9 +1,15 @@
-import { Browser as PuppeteerBrowser } from 'puppeteer-core';
-import { BrowserExecutable, StillImageFormat, TCompMetadata } from 'remotion';
-import { ServeUrlOrWebpackBundle } from './legacy-webpack-config';
-import { ChromiumOptions } from './open-browser';
+import type { SmallTCompMetadata } from 'remotion';
+import type { RenderMediaOnDownload } from './assets/download-and-map-assets-to-file';
+import type { DownloadMap } from './assets/download-map';
+import type { BrowserExecutable } from './browser-executable';
+import type { Browser as PuppeteerBrowser } from './browser/Browser';
+import type { FfmpegExecutable } from './ffmpeg-executable';
+import type { StillImageFormat } from './image-format';
+import type { ServeUrlOrWebpackBundle } from './legacy-webpack-config';
+import type { CancelSignal } from './make-cancel-signal';
+import type { ChromiumOptions } from './open-browser';
 declare type InnerStillOptions = {
-    composition: TCompMetadata;
+    composition: SmallTCompMetadata;
     output: string;
     frame?: number;
     inputProps?: unknown;
@@ -17,10 +23,22 @@ declare type InnerStillOptions = {
     timeoutInMilliseconds?: number;
     chromiumOptions?: ChromiumOptions;
     scale?: number;
+    onDownload?: RenderMediaOnDownload;
+    cancelSignal?: CancelSignal;
+    ffmpegExecutable?: FfmpegExecutable;
+    ffprobeExecutable?: FfmpegExecutable;
+    /**
+     * @deprecated Only for Remotion internal usage
+     */
+    downloadMap?: DownloadMap;
+};
+declare type RenderStillOptions = InnerStillOptions & ServeUrlOrWebpackBundle & {
+    port?: number | null;
 };
-declare type RenderStillOptions = InnerStillOptions & ServeUrlOrWebpackBundle;
 /**
- * @description Render a still frame from a composition and returns an image path
+ *
+ * @description Render a still frame from a composition
+ * @link https://www.remotion.dev/docs/renderer/render-still
  */
 export declare const renderStill: (options: RenderStillOptions) => Promise<void>;
 export {};

package/dist/render-still.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -26,24 +30,29 @@ exports.renderStill = void 0;
 const fs_1 = __importStar(require("fs"));
 const path_1 = __importDefault(require("path"));
 const remotion_1 = require("remotion");
+const download_map_1 = require("./assets/download-map");
+const browser_1 = require("./browser");
 const ensure_output_directory_1 = require("./ensure-output-directory");
 const handle_javascript_exception_1 = require("./error-handling/handle-javascript-exception");
+const image_format_1 = require("./image-format");
 const legacy_webpack_config_1 = require("./legacy-webpack-config");
 const open_browser_1 = require("./open-browser");
 const prepare_server_1 = require("./prepare-server");
 const provide_screenshot_1 = require("./provide-screenshot");
 const puppeteer_evaluate_1 = require("./puppeteer-evaluate");
+const quality_1 = require("./quality");
 const seek_to_frame_1 = require("./seek-to-frame");
 const set_props_and_env_1 = require("./set-props-and-env");
+const validate_frame_1 = require("./validate-frame");
 const validate_puppeteer_timeout_1 = require("./validate-puppeteer-timeout");
 const validate_scale_1 = require("./validate-scale");
-const innerRenderStill = async ({ composition, quality, imageFormat = 'png', serveUrl, puppeteerInstance, dumpBrowserLogs = false, onError, inputProps, envVariables, output, frame = 0, overwrite = true, browserExecutable, timeoutInMilliseconds, chromiumOptions, scale, }) => {
+const innerRenderStill = async ({ composition, quality, imageFormat = 'png', serveUrl, puppeteerInstance, dumpBrowserLogs = false, onError, inputProps, envVariables, output, frame = 0, overwrite = true, browserExecutable, timeoutInMilliseconds, chromiumOptions, scale, proxyPort, cancelSignal, }) => {
     remotion_1.Internals.validateDimension(composition.height, 'height', 'in the `config` object passed to `renderStill()`');
     remotion_1.Internals.validateDimension(composition.width, 'width', 'in the `config` object passed to `renderStill()`');
-    remotion_1.Internals.validateFps(composition.fps, 'in the `config` object of `renderStill()`');
+    remotion_1.Internals.validateFps(composition.fps, 'in the `config` object of `renderStill()`', false);
     remotion_1.Internals.validateDurationInFrames(composition.durationInFrames, 'in the `config` object passed to `renderStill()`');
-    remotion_1.Internals.validateNonNullImageFormat(imageFormat);
-    remotion_1.Internals.validateFrame(frame, composition.durationInFrames);
+    (0, image_format_1.validateNonNullImageFormat)(imageFormat);
+    (0, validate_frame_1.validateFrame)(frame, composition.durationInFrames);
     (0, validate_puppeteer_timeout_1.validatePuppeteerTimeout)(timeoutInMilliseconds);
     (0, validate_scale_1.validateScale)(scale);
     if (typeof output !== 'string') {
@@ -53,7 +62,7 @@ const innerRenderStill = async ({ composition, quality, imageFormat = 'png', ser
     if (quality !== undefined && imageFormat !== 'jpeg') {
         throw new Error("You can only pass the `quality` option if `imageFormat` is 'jpeg'.");
     }
-    remotion_1.Internals.validateQuality(quality);
+    (0, quality_1.validateQuality)(quality);
     if (fs_1.default.existsSync(output)) {
         if (!overwrite) {
             throw new Error(`Cannot render still - "overwrite" option was set to false, but the output destination ${output} already exists.`);
@@ -64,17 +73,27 @@ const innerRenderStill = async ({ composition, quality, imageFormat = 'png', ser
         }
     }
     (0, ensure_output_directory_1.ensureOutputDirectory)(output);
-    const browserInstance = puppeteerInstance !== null && puppeteerInstance !== void 0 ? puppeteerInstance : (await (0, open_browser_1.openBrowser)(remotion_1.Internals.DEFAULT_BROWSER, {
+    const browserInstance = puppeteerInstance !== null && puppeteerInstance !== void 0 ? puppeteerInstance : (await (0, open_browser_1.openBrowser)(browser_1.DEFAULT_BROWSER, {
         browserExecutable,
         shouldDumpIo: dumpBrowserLogs,
         chromiumOptions,
+        forceDeviceScaleFactor: scale !== null && scale !== void 0 ? scale : 1,
     }));
     const page = await browserInstance.newPage();
-    page.setViewport({
+    await page.setViewport({
         width: composition.width,
         height: composition.height,
         deviceScaleFactor: scale !== null && scale !== void 0 ? scale : 1,
     });
+    const errorCallback = (err) => {
+        onError(err);
+        cleanup();
+    };
+    const cleanUpJSException = (0, handle_javascript_exception_1.handleJavascriptException)({
+        page,
+        onError: errorCallback,
+        frame: null,
+    });
     const cleanup = async () => {
         cleanUpJSException();
         if (puppeteerInstance) {
@@ -86,14 +105,8 @@ const innerRenderStill = async ({ composition, quality, imageFormat = 'png', ser
             });
         }
     };
-    const errorCallback = (err) => {
-        onError(err);
+    cancelSignal === null || cancelSignal === void 0 ? void 0 : cancelSignal(() => {
         cleanup();
-    };
-    const cleanUpJSException = (0, handle_javascript_exception_1.handleJavascriptException)({
-        page,
-        onError: errorCallback,
-        frame: null,
     });
     await (0, set_props_and_env_1.setPropsAndEnv)({
         inputProps,
@@ -102,15 +115,32 @@ const innerRenderStill = async ({ composition, quality, imageFormat = 'png', ser
         serveUrl,
         initialFrame: frame,
         timeoutInMilliseconds,
+        proxyPort,
+        retriesRemaining: 2,
+        audioEnabled: false,
+        videoEnabled: true,
     });
     await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
-        pageFunction: (id) => {
+        // eslint-disable-next-line max-params
+        pageFunction: (id, defaultProps, durationInFrames, fps, height, width) => {
             window.setBundleMode({
                 type: 'composition',
                 compositionName: id,
+                compositionDefaultProps: defaultProps,
+                compositionDurationInFrames: durationInFrames,
+                compositionFps: fps,
+                compositionHeight: height,
+                compositionWidth: width,
             });
         },
-        args: [composition.id],
+        args: [
+            composition.id,
+            composition.defaultProps,
+            composition.durationInFrames,
+            composition.fps,
+            composition.height,
+            composition.width,
+        ],
         frame: null,
         page,
     });
@@ -127,20 +157,55 @@ const innerRenderStill = async ({ composition, quality, imageFormat = 'png', ser
     await cleanup();
 };
 /**
- * @description Render a still frame from a composition and returns an image path
+ *
+ * @description Render a still frame from a composition
+ * @link https://www.remotion.dev/docs/renderer/render-still
  */
-const renderStill = async (options) => {
+const renderStill = (options) => {
+    var _a, _b;
     const selectedServeUrl = (0, legacy_webpack_config_1.getServeUrlWithFallback)(options);
-    const { closeServer, serveUrl } = await (0, prepare_server_1.prepareServer)(selectedServeUrl);
-    return new Promise((resolve, reject) => {
-        innerRenderStill({
-            ...options,
-            serveUrl,
-            onError: (err) => reject(err),
+    const downloadMap = (_a = options.downloadMap) !== null && _a !== void 0 ? _a : (0, download_map_1.makeDownloadMap)();
+    const onDownload = (_b = options.onDownload) !== null && _b !== void 0 ? _b : (() => () => undefined);
+    const happyPath = new Promise((resolve, reject) => {
+        var _a, _b, _c;
+        const onError = (err) => reject(err);
+        let close = null;
+        (0, prepare_server_1.prepareServer)({
+            webpackConfigOrServeUrl: selectedServeUrl,
+            onDownload,
+            onError,
+            ffmpegExecutable: (_a = options.ffmpegExecutable) !== null && _a !== void 0 ? _a : null,
+            ffprobeExecutable: (_b = options.ffprobeExecutable) !== null && _b !== void 0 ? _b : null,
+            port: (_c = options.port) !== null && _c !== void 0 ? _c : null,
+            downloadMap,
+        })
+            .then(({ serveUrl, closeServer, offthreadPort }) => {
+            close = closeServer;
+            return innerRenderStill({
+                ...options,
+                serveUrl,
+                onError: (err) => reject(err),
+                proxyPort: offthreadPort,
+            });
         })
             .then((res) => resolve(res))
             .catch((err) => reject(err))
-            .finally(() => closeServer());
+            .finally(() => {
+            // Clean download map if it was not passed in
+            if (!(options === null || options === void 0 ? void 0 : options.downloadMap)) {
+                (0, download_map_1.cleanDownloadMap)(downloadMap);
+            }
+            return close === null || close === void 0 ? void 0 : close();
+        });
     });
+    return Promise.race([
+        happyPath,
+        new Promise((_resolve, reject) => {
+            var _a;
+            (_a = options.cancelSignal) === null || _a === void 0 ? void 0 : _a.call(options, () => {
+                reject(new Error('renderStill() got cancelled'));
+            });
+        }),
+    ]);
 };
 exports.renderStill = renderStill;

package/dist/screenshot-dom-element.d.ts

@@ -1,12 +1,10 @@
-/// <reference types="node" />
-import puppeteer from 'puppeteer-core';
-import { ImageFormat } from 'remotion';
+import type { Page } from './browser/BrowserPage';
+import type { ImageFormat } from './image-format';
 export declare const screenshotDOMElement: ({ page, imageFormat, quality, opts, }: {
-    page: puppeteer.Page;
+    page: Page;
     imageFormat: ImageFormat;
     quality: number | undefined;
-    opts?: {
-        path?: string | undefined;
-        selector?: string | undefined;
-    } | undefined;
+    opts: {
+        path: string | null;
+    };
 }) => Promise<Buffer>;

package/dist/screenshot-dom-element.js

@@ -3,11 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.screenshotDOMElement = void 0;
 const puppeteer_evaluate_1 = require("./puppeteer-evaluate");
 const puppeteer_screenshot_1 = require("./puppeteer-screenshot");
-const screenshotDOMElement = async ({ page, imageFormat, quality, opts = {}, }) => {
-    const path = 'path' in opts ? opts.path : undefined;
-    const { selector } = opts;
-    if (!selector)
-        throw Error('Please provide a selector.');
+const screenshotDOMElement = async ({ page, imageFormat, quality, opts, }) => {
+    const { path } = opts;
     if (imageFormat === 'png') {
         await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
             pageFunction: () => {
@@ -33,7 +30,7 @@ const screenshotDOMElement = async ({ page, imageFormat, quality, opts = {}, })
     }
     return (0, puppeteer_screenshot_1.screenshot)(page, {
         omitBackground: imageFormat === 'png',
-        path,
+        path: path !== null && path !== void 0 ? path : undefined,
         type: imageFormat,
         quality,
     });

package/dist/screenshot-task.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="node" />
-import { Page, ScreenshotOptions } from 'puppeteer-core';
-import { StillImageFormat } from 'remotion';
+import type { Page } from './browser/BrowserPage';
+import type { ScreenshotOptions } from './browser/ScreenshotOptions';
+import type { StillImageFormat } from './image-format';
 export declare const _screenshotTask: (page: Page, format: StillImageFormat, options: ScreenshotOptions) => Promise<Buffer | string>;