@remotion/renderer 4.0.0-offthread.34 → 4.0.0-offthread.6

package/dist/render-frames.d.ts

@@ -4,6 +4,7 @@ import { BrowserExecutable, FfmpegExecutable, FrameRange, ImageFormat, SmallTCom
 import { RenderMediaOnDownload } from './assets/download-and-map-assets-to-file';
 import { BrowserLog } from './browser-log';
 import { ServeUrlOrWebpackBundle } from './legacy-webpack-config';
+import { CancelSignal } from './make-cancel-signal';
 import { ChromiumOptions } from './open-browser';
 import { OnStartData, RenderFramesOutput } from './types';
 declare type ConfigOrComposition = {
@@ -34,6 +35,8 @@ declare type RenderFramesOptions = {
     chromiumOptions?: ChromiumOptions;
     scale?: number;
     ffmpegExecutable?: FfmpegExecutable;
+    port?: number | null;
+    cancelSignal?: CancelSignal;
 } & ConfigOrComposition & ServeUrlOrWebpackBundle;
 export declare const renderFrames: (options: RenderFramesOptions) => Promise<RenderFramesOutput>;
 export {};

package/dist/render-frames.js

@@ -33,9 +33,14 @@ const getComposition = (others) => {
     }
     return undefined;
 };
-const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, inputProps, quality, imageFormat = image_format_1.DEFAULT_IMAGE_FORMAT, frameRange, puppeteerInstance, onError, envVariables, onBrowserLog, onFrameBuffer, onDownload, pagesArray, serveUrl, composition, timeoutInMilliseconds, scale, actualParallelism, downloadDir, proxyPort, }) => {
+const getPool = async (pages) => {
+    const puppeteerPages = await Promise.all(pages);
+    const pool = new pool_1.Pool(puppeteerPages);
+    return pool;
+};
+const innerRenderFrames = ({ onFrameUpdate, outputDir, onStart, inputProps, quality, imageFormat = image_format_1.DEFAULT_IMAGE_FORMAT, frameRange, puppeteerInstance, onError, envVariables, onBrowserLog, onFrameBuffer, onDownload, pagesArray, serveUrl, composition, timeoutInMilliseconds, scale, actualParallelism, downloadDir, proxyPort, cancelSignal, }) => {
     if (!puppeteerInstance) {
-        throw new Error('weird');
+        throw new Error('no puppeteer instance passed to innerRenderFrames - internal error');
     }
     if (outputDir) {
         if (!fs_1.default.existsSync(outputDir)) {
@@ -49,7 +54,7 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, inputProps
     const pages = new Array(actualParallelism).fill(true).map(async () => {
         const page = await puppeteerInstance.newPage();
         pagesArray.push(page);
-        page.setViewport({
+        await page.setViewport({
             width: composition.width,
             height: composition.height,
             deviceScaleFactor: scale !== null && scale !== void 0 ? scale : 1,
@@ -77,6 +82,7 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, inputProps
             initialFrame,
             timeoutInMilliseconds,
             proxyPort,
+            retriesRemaining: 2,
         });
         await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
             pageFunction: (id) => {
@@ -92,23 +98,30 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, inputProps
         page.off('console', logCallback);
         return page;
     });
-    const puppeteerPages = await Promise.all(pages);
-    const pool = new pool_1.Pool(puppeteerPages);
     const [firstFrameIndex, lastFrameIndex] = realFrameRange;
     // Substract one because 100 frames will be 00-99
     // --> 2 digits
     const filePadLength = String(lastFrameIndex).length;
     let framesRendered = 0;
+    const poolPromise = getPool(pages);
     onStart({
         frameCount,
     });
     const assets = new Array(frameCount).fill(undefined);
-    await Promise.all(new Array(frameCount)
+    let stopped = false;
+    cancelSignal === null || cancelSignal === void 0 ? void 0 : cancelSignal(() => {
+        stopped = true;
+    });
+    const progress = Promise.all(new Array(frameCount)
         .fill(Boolean)
-        .map((x, i) => i)
+        .map((_x, i) => i)
         .map(async (index) => {
         const frame = realFrameRange[0] + index;
+        const pool = await poolPromise;
         const freePage = await pool.acquire();
+        if (stopped) {
+            throw new Error('Render was stopped');
+        }
         const paddedIndex = String(frame).padStart(filePadLength, '0');
         const errorCallbackOnFrame = (err) => {
             onError(err);
@@ -175,18 +188,28 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, inputProps
         freePage.off('error', errorCallbackOnFrame);
         return compressedAssets;
     }));
-    const returnValue = {
-        assetsInfo: {
-            assets,
-            downloadDir,
-            firstFrameIndex,
-            imageSequenceName: `element-%0${filePadLength}d.${imageFormat}`,
-        },
-        frameCount,
-    };
-    return returnValue;
+    const happyPath = progress.then(() => {
+        const returnValue = {
+            assetsInfo: {
+                assets,
+                downloadDir,
+                firstFrameIndex,
+                imageSequenceName: `element-%0${filePadLength}d.${imageFormat}`,
+            },
+            frameCount,
+        };
+        return returnValue;
+    });
+    return Promise.race([
+        happyPath,
+        new Promise((_resolve, reject) => {
+            cancelSignal === null || cancelSignal === void 0 ? void 0 : cancelSignal(() => {
+                reject(new Error('renderFrames() got cancelled'));
+            });
+        }),
+    ]);
 };
-const renderFrames = async (options) => {
+const renderFrames = (options) => {
     var _a, _b, _c, _d;
     const composition = getComposition(options);
     if (!composition) {
@@ -202,33 +225,43 @@ const renderFrames = async (options) => {
     const selectedServeUrl = (0, legacy_webpack_config_1.getServeUrlWithFallback)(options);
     remotion_1.Internals.validateQuality(options.quality);
     (0, validate_scale_1.validateScale)(options.scale);
-    const browserInstance = (_a = options.puppeteerInstance) !== null && _a !== void 0 ? _a : (await (0, open_browser_1.openBrowser)(remotion_1.Internals.DEFAULT_BROWSER, {
+    const browserInstance = (_a = options.puppeteerInstance) !== null && _a !== void 0 ? _a : (0, open_browser_1.openBrowser)(remotion_1.Internals.DEFAULT_BROWSER, {
         shouldDumpIo: options.dumpBrowserLogs,
         browserExecutable: options.browserExecutable,
         chromiumOptions: options.chromiumOptions,
         forceDeviceScaleFactor: (_b = options.scale) !== null && _b !== void 0 ? _b : 1,
-    }));
+    });
     const downloadDir = (0, make_assets_download_dir_1.makeAssetsDownloadTmpDir)();
     const onDownload = (_c = options.onDownload) !== null && _c !== void 0 ? _c : (() => () => undefined);
     const actualParallelism = (0, get_concurrency_1.getActualConcurrency)((_d = options.parallelism) !== null && _d !== void 0 ? _d : null);
-    const { stopCycling } = (0, cycle_browser_tabs_1.cycleBrowserTabs)(browserInstance, actualParallelism);
     const openedPages = [];
     return new Promise((resolve, reject) => {
-        var _a;
-        let cleanup = null;
+        var _a, _b;
+        const cleanup = [];
         const onError = (err) => reject(err);
-        (0, prepare_server_1.prepareServer)({
-            webpackConfigOrServeUrl: selectedServeUrl,
-            downloadDir,
-            onDownload,
-            onError,
-            ffmpegExecutable: (_a = options.ffmpegExecutable) !== null && _a !== void 0 ? _a : null,
-        })
-            .then(({ serveUrl, closeServer, offthreadPort }) => {
-            cleanup = closeServer;
-            return innerRenderFrames({
+        Promise.all([
+            (0, prepare_server_1.prepareServer)({
+                webpackConfigOrServeUrl: selectedServeUrl,
+                downloadDir,
+                onDownload,
+                onError,
+                ffmpegExecutable: (_a = options.ffmpegExecutable) !== null && _a !== void 0 ? _a : null,
+                port: (_b = options.port) !== null && _b !== void 0 ? _b : null,
+            }),
+            browserInstance,
+        ])
+            .then(([{ serveUrl, closeServer, offthreadPort }, puppeteerInstance]) => {
+            var _a;
+            const { stopCycling } = (0, cycle_browser_tabs_1.cycleBrowserTabs)(puppeteerInstance, actualParallelism);
+            cleanup.push(stopCycling);
+            (_a = options.cancelSignal) === null || _a === void 0 ? void 0 : _a.call(options, () => {
+                stopCycling();
+                closeServer();
+            });
+            cleanup.push(closeServer);
+            const renderFramesProm = innerRenderFrames({
                 ...options,
-                puppeteerInstance: browserInstance,
+                puppeteerInstance,
                 onError,
                 pagesArray: openedPages,
                 serveUrl,
@@ -238,6 +271,7 @@ const renderFrames = async (options) => {
                 downloadDir,
                 proxyPort: offthreadPort,
             });
+            return renderFramesProm;
         })
             .then((res) => resolve(res))
             .catch((err) => reject(err))
@@ -251,12 +285,17 @@ const renderFrames = async (options) => {
                 });
             }
             else {
-                browserInstance.close().catch((err) => {
+                Promise.resolve(browserInstance)
+                    .then((puppeteerInstance) => {
+                    return puppeteerInstance.close();
+                })
+                    .catch((err) => {
                     console.log('Unable to close browser', err);
                 });
             }
-            stopCycling();
-            cleanup === null || cleanup === void 0 ? void 0 : cleanup();
+            cleanup.forEach((c) => {
+                c();
+            });
         });
     });
 };

package/dist/render-media.d.ts

@@ -1,8 +1,9 @@
 import type { Browser as PuppeteerBrowser } from 'puppeteer-core';
-import { Codec, FfmpegExecutable, FrameRange, PixelFormat, ProResProfile, SmallTCompMetadata } from 'remotion';
+import { BrowserExecutable, Codec, FfmpegExecutable, FrameRange, PixelFormat, ProResProfile, SmallTCompMetadata } from 'remotion';
 import { RenderMediaOnDownload } from './assets/download-and-map-assets-to-file';
 import { BrowserLog } from './browser-log';
 import { ServeUrlOrWebpackBundle } from './legacy-webpack-config';
+import { CancelSignal } from './make-cancel-signal';
 import { ChromiumOptions } from './open-browser';
 import { OnStartData } from './types';
 export declare type StitchingState = 'encoding' | 'muxing';
@@ -37,5 +38,8 @@ export declare type RenderMediaOptions = {
     timeoutInMilliseconds?: number;
     chromiumOptions?: ChromiumOptions;
     scale?: number;
+    port?: number | null;
+    cancelSignal?: CancelSignal;
+    browserExecutable?: BrowserExecutable;
 } & ServeUrlOrWebpackBundle;
-export declare const renderMedia: ({ parallelism, proResProfile, crf, composition, imageFormat, ffmpegExecutable, inputProps, pixelFormat, codec, envVariables, quality, frameRange, puppeteerInstance, outputLocation, onProgress, overwrite, onDownload, dumpBrowserLogs, onBrowserLog, onStart, timeoutInMilliseconds, chromiumOptions, scale, ...options }: RenderMediaOptions) => Promise<void>;
+export declare const renderMedia: ({ parallelism, proResProfile, crf, composition, imageFormat, ffmpegExecutable, inputProps, pixelFormat, codec, envVariables, quality, frameRange, puppeteerInstance, outputLocation, onProgress, overwrite, onDownload, dumpBrowserLogs, onBrowserLog, onStart, timeoutInMilliseconds, chromiumOptions, scale, browserExecutable, port, cancelSignal, ...options }: RenderMediaOptions) => Promise<void>;

package/dist/render-media.js

@@ -16,6 +16,7 @@ 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 legacy_webpack_config_1 = require("./legacy-webpack-config");
+const make_cancel_signal_1 = require("./make-cancel-signal");
 const prespawn_ffmpeg_1 = require("./prespawn-ffmpeg");
 const render_frames_1 = require("./render-frames");
 const stitch_frames_to_video_1 = require("./stitch-frames-to-video");
@@ -23,8 +24,7 @@ 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;
+const renderMedia = ({ parallelism, proResProfile, crf, composition, imageFormat, ffmpegExecutable, inputProps, pixelFormat, codec, envVariables, quality, frameRange, puppeteerInstance, outputLocation, onProgress, overwrite, onDownload, dumpBrowserLogs, onBrowserLog, onStart, timeoutInMilliseconds, chromiumOptions, scale, browserExecutable, port, cancelSignal, ...options }) => {
     remotion_1.Internals.validateQuality(quality);
     if (typeof crf !== 'undefined' && crf !== null) {
         remotion_1.Internals.validateSelectedCrfAndCodecCombination(crf, codec);
@@ -39,6 +39,7 @@ 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);
@@ -48,23 +49,31 @@ const renderMedia = async ({ parallelism, proResProfile, crf, composition, image
         : 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 createPrestitcherIfNecessary = async () => {
         if (preEncodedFileLocation) {
             preStitcher = await (0, prespawn_ffmpeg_1.prespawnFfmpeg)({
                 width: composition.width * (scale !== null && scale !== void 0 ? scale : 1),
@@ -82,12 +91,27 @@ const renderMedia = async ({ parallelism, proResProfile, crf, composition, image
                 verbose: remotion_1.Internals.Logging.isEqualOrBelowLogLevel(remotion_1.Internals.Logging.getLogLevel(), 'verbose'),
                 ffmpegExecutable,
                 imageFormat: actualImageFormat,
+                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 happyPath = createPrestitcherIfNecessary()
+        .then(() => {
+        const renderFramesProc = (0, render_frames_1.renderFrames)({
             config: composition,
             onFrameUpdate: (frame) => {
                 renderedFrames = frame;
@@ -110,6 +134,9 @@ const renderMedia = async ({ parallelism, proResProfile, crf, composition, image
                 ? async (buffer, frame) => {
                     var _a;
                     await waitForRightTimeOfFrameToBeInserted(frame);
+                    if (cancelled) {
+                        return;
+                    }
                     (_a = stitcherFfmpeg === null || stitcherFfmpeg === void 0 ? void 0 : stitcherFfmpeg.stdin) === null || _a === void 0 ? void 0 : _a.write(buffer);
                     setFrameToStitch(frame + 1);
                 }
@@ -121,57 +148,92 @@ const renderMedia = async ({ parallelism, proResProfile, crf, composition, image
             timeoutInMilliseconds,
             chromiumOptions,
             scale,
-            // TODO: Document new property for FFMPEG executable
             ffmpegExecutable,
+            browserExecutable,
+            port,
+            cancelSignal: cancelRenderFrames.cancelSignal,
         });
-        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);
         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,
-        });
+        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: 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,
+                cancelSignal: cancelStitcher.cancelSignal,
+            }),
+            stitchStart,
+        ]);
+    })
+        .then(([, stitchStart]) => {
         encodedFrames = (0, get_duration_from_frame_range_1.getDurationFromFrameRange)(frameRange !== null && frameRange !== void 0 ? frameRange : null, composition.durationInFrames);
         encodedDoneIn = Date.now() - stitchStart;
         callUpdate();
-    }
-    finally {
+    })
+        .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);
         }
-    }
+    });
+    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,10 +1,11 @@
 import { Browser as PuppeteerBrowser } from 'puppeteer-core';
-import { BrowserExecutable, FfmpegExecutable, StillImageFormat, TCompMetadata } from 'remotion';
+import { BrowserExecutable, FfmpegExecutable, SmallTCompMetadata, StillImageFormat } from 'remotion';
 import { RenderMediaOnDownload } from './assets/download-and-map-assets-to-file';
 import { ServeUrlOrWebpackBundle } from './legacy-webpack-config';
+import { CancelSignal } from './make-cancel-signal';
 import { ChromiumOptions } from './open-browser';
 declare type InnerStillOptions = {
-    composition: TCompMetadata;
+    composition: SmallTCompMetadata;
     output: string;
     frame?: number;
     inputProps?: unknown;
@@ -19,9 +20,12 @@ declare type InnerStillOptions = {
     chromiumOptions?: ChromiumOptions;
     scale?: number;
     onDownload?: RenderMediaOnDownload;
+    cancelSignal?: CancelSignal;
     ffmpegExecutable?: FfmpegExecutable;
 };
-declare type RenderStillOptions = InnerStillOptions & ServeUrlOrWebpackBundle;
+declare type RenderStillOptions = InnerStillOptions & ServeUrlOrWebpackBundle & {
+    port?: number | null;
+};
 /**
  * @description Render a still frame from a composition and returns an image path
  */

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];
@@ -38,7 +42,7 @@ const seek_to_frame_1 = require("./seek-to-frame");
 const set_props_and_env_1 = require("./set-props-and-env");
 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, proxyPort, }) => {
+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()`');
@@ -72,11 +76,20 @@ const innerRenderStill = async ({ composition, quality, imageFormat = 'png', ser
         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) {
@@ -88,14 +101,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,
@@ -105,6 +112,7 @@ const innerRenderStill = async ({ composition, quality, imageFormat = 'png', ser
         initialFrame: frame,
         timeoutInMilliseconds,
         proxyPort,
+        retriesRemaining: 2,
     });
     await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
         pageFunction: (id) => {
@@ -137,8 +145,8 @@ const renderStill = (options) => {
     const selectedServeUrl = (0, legacy_webpack_config_1.getServeUrlWithFallback)(options);
     const downloadDir = (0, make_assets_download_dir_1.makeAssetsDownloadTmpDir)();
     const onDownload = (_a = options.onDownload) !== null && _a !== void 0 ? _a : (() => () => undefined);
-    return new Promise((resolve, reject) => {
-        var _a;
+    const happyPath = new Promise((resolve, reject) => {
+        var _a, _b;
         const onError = (err) => reject(err);
         let close = null;
         (0, prepare_server_1.prepareServer)({
@@ -147,6 +155,7 @@ const renderStill = (options) => {
             onDownload,
             onError,
             ffmpegExecutable: (_a = options.ffmpegExecutable) !== null && _a !== void 0 ? _a : null,
+            port: (_b = options.port) !== null && _b !== void 0 ? _b : null,
         })
             .then(({ serveUrl, closeServer, offthreadPort }) => {
             close = closeServer;
@@ -161,5 +170,14 @@ const renderStill = (options) => {
             .catch((err) => reject(err))
             .finally(() => 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/serve-static.js

@@ -12,7 +12,12 @@ const offthread_video_server_1 = require("./offthread-video-server");
 const serveStatic = async (path, options) => {
     var _a, _b;
     const port = await (0, get_port_1.getDesiredPort)((_b = (_a = options === null || options === void 0 ? void 0 : options.port) !== null && _a !== void 0 ? _a : remotion_1.Internals.getServerPort()) !== null && _b !== void 0 ? _b : undefined, 3000, 3100);
-    const offthreadRequest = (0, offthread_video_server_1.startOffthreadVideoServer)(options.ffmpegExecutable, options.downloadDir, options.onDownload, options.onError);
+    const offthreadRequest = (0, offthread_video_server_1.startOffthreadVideoServer)({
+        ffmpegExecutable: options.ffmpegExecutable,
+        downloadDir: options.downloadDir,
+        onDownload: options.onDownload,
+        onError: options.onError,
+    });
     try {
         const server = http_1.default
             .createServer((request, response) => {
@@ -39,6 +44,9 @@ const serveStatic = async (path, options) => {
             return new Promise((resolve, reject) => {
                 server.close((err) => {
                     if (err) {
+                        if (err.code === 'ERR_SERVER_NOT_RUNNING') {
+                            return resolve();
+                        }
                         reject(err);
                     }
                     else {

package/dist/set-props-and-env.d.ts

@@ -1,5 +1,5 @@
 import { Page } from 'puppeteer-core';
-export declare const setPropsAndEnv: ({ inputProps, envVariables, page, serveUrl, initialFrame, timeoutInMilliseconds, proxyPort, }: {
+export declare const setPropsAndEnv: ({ inputProps, envVariables, page, serveUrl, initialFrame, timeoutInMilliseconds, proxyPort, retriesRemaining, }: {
     inputProps: unknown;
     envVariables: Record<string, string> | undefined;
     page: Page;
@@ -7,4 +7,5 @@ export declare const setPropsAndEnv: ({ inputProps, envVariables, page, serveUrl
     initialFrame: number;
     timeoutInMilliseconds: number | undefined;
     proxyPort: number;
+    retriesRemaining: number;
 }) => Promise<void>;