@remotion/renderer 4.0.0-preload.13 → 4.0.0-spawn.13

package/dist/open-browser.d.ts

@@ -10,9 +10,9 @@ export declare type ChromiumOptions = {
 };
 export declare const killAllBrowsers: () => Promise<void>;
 export declare const openBrowser: (browser: Browser, options?: {
-    shouldDumpIo?: boolean | undefined;
-    browserExecutable?: string | null | undefined;
-    chromiumOptions?: ChromiumOptions | undefined;
-    forceDeviceScaleFactor?: number | undefined;
-} | undefined) => Promise<puppeteer.Browser>;
+    shouldDumpIo?: boolean;
+    browserExecutable?: string | null;
+    chromiumOptions?: ChromiumOptions;
+    forceDeviceScaleFactor?: number;
+}) => Promise<puppeteer.Browser>;
 export {};

package/dist/prepare-server.d.ts

@@ -1,4 +1,14 @@
-export declare const prepareServer: (webpackConfigOrServeUrl: string) => Promise<{
+import { FfmpegExecutable } from 'remotion';
+import { RenderMediaOnDownload } from './assets/download-and-map-assets-to-file';
+export declare const prepareServer: ({ downloadDir, ffmpegExecutable, onDownload, onError, webpackConfigOrServeUrl, port, }: {
+    webpackConfigOrServeUrl: string;
+    downloadDir: string;
+    onDownload: RenderMediaOnDownload;
+    onError: (err: Error) => void;
+    ffmpegExecutable: FfmpegExecutable;
+    port: number | null;
+}) => Promise<{
     serveUrl: string;
-    closeServer: () => Promise<void>;
+    closeServer: () => Promise<unknown>;
+    offthreadPort: number;
 }>;

package/dist/prepare-server.js

@@ -3,17 +3,34 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.prepareServer = void 0;
 const is_serve_url_1 = require("./is-serve-url");
 const serve_static_1 = require("./serve-static");
-const prepareServer = async (webpackConfigOrServeUrl) => {
+const prepareServer = async ({ downloadDir, ffmpegExecutable, onDownload, onError, webpackConfigOrServeUrl, port, }) => {
     if ((0, is_serve_url_1.isServeUrl)(webpackConfigOrServeUrl)) {
+        const { port: offthreadPort, close: closeProxy } = await (0, serve_static_1.serveStatic)(null, {
+            downloadDir,
+            onDownload,
+            onError,
+            ffmpegExecutable,
+            port,
+        });
         return Promise.resolve({
             serveUrl: webpackConfigOrServeUrl,
-            closeServer: () => Promise.resolve(undefined),
+            closeServer: () => closeProxy(),
+            offthreadPort,
         });
     }
-    const { port, close } = await (0, serve_static_1.serveStatic)(webpackConfigOrServeUrl);
+    const { port: serverPort, close } = await (0, serve_static_1.serveStatic)(webpackConfigOrServeUrl, {
+        downloadDir,
+        onDownload,
+        onError,
+        ffmpegExecutable,
+        port,
+    });
     return Promise.resolve({
-        closeServer: () => close(),
-        serveUrl: `http://localhost:${port}`,
+        closeServer: () => {
+            return close();
+        },
+        serveUrl: `http://localhost:${serverPort}`,
+        offthreadPort: serverPort,
     });
 };
 exports.prepareServer = prepareServer;

package/dist/prespawn-ffmpeg.d.ts

@@ -17,5 +17,6 @@ declare type PreSticherOptions = {
 export declare const prespawnFfmpeg: (options: PreSticherOptions) => Promise<{
     task: execa.ExecaChildProcess<string>;
     getLogs: () => string;
+    waitForSpawn: Promise<void>;
 }>;
 export {};

package/dist/prespawn-ffmpeg.js

@@ -57,15 +57,13 @@ const prespawnFfmpeg = async (options) => {
         // -c:v is the same as -vcodec as -codec:video
         // and specified the video codec.
         ['-c:v', encoderName],
-        ...[
-            proResProfileName ? ['-profile:v', proResProfileName] : null,
-            supportsCrf ? ['-crf', String(crf)] : null,
-            ['-pix_fmt', pixelFormat],
-            // Without explicitly disabling auto-alt-ref,
-            // transparent WebM generation doesn't work
-            pixelFormat === 'yuva420p' ? ['-auto-alt-ref', '0'] : null,
-            ['-b:v', '1M'],
-        ],
+        proResProfileName ? ['-profile:v', proResProfileName] : null,
+        supportsCrf ? ['-crf', String(crf)] : null,
+        ['-pix_fmt', pixelFormat],
+        // Without explicitly disabling auto-alt-ref,
+        // transparent WebM generation doesn't work
+        pixelFormat === 'yuva420p' ? ['-auto-alt-ref', '0'] : null,
+        ['-b:v', '1M'],
         '-y',
         options.outputLocation,
     ];
@@ -75,6 +73,9 @@ const prespawnFfmpeg = async (options) => {
     }
     const ffmpegString = ffmpegArgs.flat(2).filter(Boolean);
     const task = (0, execa_1.default)((_f = options.ffmpegExecutable) !== null && _f !== void 0 ? _f : 'ffmpeg', ffmpegString);
+    const waitForSpawn = new Promise((resolve) => {
+        task.on('spawn', () => resolve());
+    });
     let ffmpegOutput = '';
     (_g = task.stderr) === null || _g === void 0 ? void 0 : _g.on('data', (data) => {
         const str = data.toString();
@@ -86,6 +87,6 @@ const prespawnFfmpeg = async (options) => {
             }
         }
     });
-    return { task, getLogs: () => ffmpegOutput };
+    return { task, getLogs: () => ffmpegOutput, waitForSpawn };
 };
 exports.prespawnFfmpeg = prespawnFfmpeg;

package/dist/puppeteer-screenshot.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];

package/dist/render-frames.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="node" />
 import { Browser as PuppeteerBrowser } from 'puppeteer-core';
-import { BrowserExecutable, FrameRange, ImageFormat, SmallTCompMetadata } from 'remotion';
+import { BrowserExecutable, FfmpegExecutable, FrameRange, ImageFormat, SmallTCompMetadata } from 'remotion';
 import { RenderMediaOnDownload } from './assets/download-and-map-assets-to-file';
 import { BrowserLog } from './browser-log';
 import { ServeUrlOrWebpackBundle } from './legacy-webpack-config';
@@ -33,6 +33,11 @@ declare type RenderFramesOptions = {
     timeoutInMilliseconds?: number;
     chromiumOptions?: ChromiumOptions;
     scale?: number;
+    ffmpegExecutable?: FfmpegExecutable;
+    port?: number | null;
 } & ConfigOrComposition & ServeUrlOrWebpackBundle;
-export declare const renderFrames: (options: RenderFramesOptions) => Promise<RenderFramesOutput>;
+declare type ReturnTypeWithCancel = Promise<RenderFramesOutput> & {
+    cancel: () => void;
+};
+export declare const renderFrames: (options: RenderFramesOptions) => ReturnTypeWithCancel;
 export {};

package/dist/render-frames.js

@@ -33,7 +33,12 @@ 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, }) => {
+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, }) => {
     if (!puppeteerInstance) {
         throw new Error('weird');
     }
@@ -76,6 +81,8 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, inputProps
             serveUrl,
             initialFrame,
             timeoutInMilliseconds,
+            proxyPort,
+            retriesRemaining: 2,
         });
         await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
             pageFunction: (id) => {
@@ -91,23 +98,26 @@ 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 downloadDir = (0, make_assets_download_dir_1.makeAssetsDownloadTmpDir)();
     const assets = new Array(frameCount).fill(undefined);
-    await Promise.all(new Array(frameCount)
+    let stopped = false;
+    const progress = Promise.all(new Array(frameCount)
         .fill(Boolean)
-        .map((x, i) => i)
+        .map((_x, i) => i)
         .map(async (index) => {
+        if (stopped) {
+            throw new Error('Render was stopped');
+        }
         const frame = realFrameRange[0] + index;
+        const pool = await poolPromise;
         const freePage = await pool.acquire();
         const paddedIndex = String(frame).padStart(filePadLength, '0');
         const errorCallbackOnFrame = (err) => {
@@ -163,7 +173,7 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, inputProps
             (0, download_and_map_assets_to_file_1.downloadAndMapAssetsToFileUrl)({
                 asset,
                 downloadDir,
-                onDownload: onDownload !== null && onDownload !== void 0 ? onDownload : (() => () => undefined),
+                onDownload,
             }).catch((err) => {
                 onError(new Error(`Error while downloading asset: ${err.stack}`));
             });
@@ -175,19 +185,30 @@ 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}`,
+    const prom = Object.assign(new Promise((res, rej) => {
+        progress
+            .then(() => {
+            const returnValue = {
+                assetsInfo: {
+                    assets,
+                    downloadDir,
+                    firstFrameIndex,
+                    imageSequenceName: `element-%0${filePadLength}d.${imageFormat}`,
+                },
+                frameCount,
+            };
+            res(returnValue);
+        })
+            .catch((err) => rej(err));
+    }), {
+        cancel: () => {
+            stopped = true;
         },
-        frameCount,
-    };
-    return returnValue;
+    });
+    return prom;
 };
-const renderFrames = async (options) => {
-    var _a, _b, _c;
+const renderFrames = (options) => {
+    var _a, _b, _c, _d;
     const composition = getComposition(options);
     if (!composition) {
         throw new Error('No `composition` option has been specified for renderFrames()');
@@ -202,25 +223,51 @@ 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 { closeServer, serveUrl } = await (0, prepare_server_1.prepareServer)(selectedServeUrl);
-    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 actualParallelism = (0, get_concurrency_1.getActualConcurrency)((_c = options.parallelism) !== null && _c !== void 0 ? _c : null);
+    });
+    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) => {
-        innerRenderFrames({
-            ...options,
-            puppeteerInstance: browserInstance,
-            onError: (err) => reject(err),
-            pagesArray: openedPages,
-            serveUrl,
-            composition,
-            actualParallelism,
+    let cancel = () => undefined;
+    const prom = new Promise((resolve, reject) => {
+        var _a, _b;
+        let cleanup = null;
+        const onError = (err) => reject(err);
+        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]) => {
+            cleanup = closeServer;
+            const renderFramesProm = innerRenderFrames({
+                ...options,
+                puppeteerInstance,
+                onError,
+                pagesArray: openedPages,
+                serveUrl,
+                composition,
+                actualParallelism,
+                onDownload,
+                downloadDir,
+                proxyPort: offthreadPort,
+            });
+            cancel = () => {
+                renderFramesProm.cancel();
+            };
+            return renderFramesProm;
         })
             .then((res) => resolve(res))
             .catch((err) => reject(err))
@@ -234,13 +281,23 @@ 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();
-            closeServer();
+            cleanup === null || cleanup === void 0 ? void 0 : cleanup();
         });
     });
+    const returnType = Object.assign(prom, {
+        cancel: () => {
+            cancel();
+        },
+    });
+    return returnType;
 };
 exports.renderFrames = renderFrames;

package/dist/render-media.d.ts

@@ -1,5 +1,5 @@
 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';
@@ -37,5 +37,11 @@ export declare type RenderMediaOptions = {
     timeoutInMilliseconds?: number;
     chromiumOptions?: ChromiumOptions;
     scale?: number;
+    port?: number | null;
+    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>;
+declare type RenderMediaReturnType = Promise<void> & {
+    cancel: () => void;
+};
+export declare const renderMedia: (options: RenderMediaOptions) => RenderMediaReturnType;
+export {};

package/dist/render-media.js

@@ -23,7 +23,22 @@ 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 }) => {
+const renderMedia = (options) => {
+    let resolve = () => undefined;
+    let reject = () => undefined;
+    const rejectIfCancel = new Promise((res, rej) => {
+        resolve = res;
+        reject = rej;
+    });
+    const prom = innerRenderMedia({ ...options, rejectIfCancel }).then(() => {
+        resolve();
+    });
+    return Object.assign(prom, {
+        cancel: () => reject(new Error('Render got cancelled')),
+    });
+};
+exports.renderMedia = renderMedia;
+const innerRenderMedia = async ({ 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, rejectIfCancel, ...options }) => {
     var _a;
     remotion_1.Internals.validateQuality(quality);
     if (typeof crf !== 'undefined' && crf !== null) {
@@ -39,6 +54,14 @@ const renderMedia = async ({ parallelism, proResProfile, crf, composition, image
     let renderedFrames = 0;
     let renderedDoneIn = null;
     let encodedDoneIn = null;
+    let cancelRenderFrames = () => undefined;
+    rejectIfCancel
+        .then(() => undefined)
+        .catch((err) => {
+        preStitcher === null || preStitcher === void 0 ? void 0 : preStitcher.task.kill();
+        cancelRenderFrames();
+        throw err;
+    });
     const renderStart = Date.now();
     const tmpdir = (0, tmp_dir_1.tmpDir)('pre-encode');
     const parallelEncoding = (0, can_use_parallel_encoding_1.canUseParallelEncoding)(codec);
@@ -87,7 +110,7 @@ const renderMedia = async ({ parallelism, proResProfile, crf, composition, image
         }
         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 renderFramesProc = (0, render_frames_1.renderFrames)({
             config: composition,
             onFrameUpdate: (frame) => {
                 renderedFrames = frame;
@@ -121,7 +144,14 @@ const renderMedia = async ({ parallelism, proResProfile, crf, composition, image
             timeoutInMilliseconds,
             chromiumOptions,
             scale,
+            ffmpegExecutable,
+            browserExecutable,
+            port,
         });
+        cancelRenderFrames = () => {
+            renderFramesProc.cancel();
+        };
+        const { assetsInfo } = await renderFramesProc;
         if (stitcherFfmpeg) {
             await waitForFinish();
             (_a = stitcherFfmpeg === null || stitcherFfmpeg === void 0 ? void 0 : stitcherFfmpeg.stdin) === null || _a === void 0 ? void 0 : _a.end();
@@ -165,6 +195,26 @@ const renderMedia = async ({ parallelism, proResProfile, crf, composition, image
         encodedDoneIn = Date.now() - stitchStart;
         callUpdate();
     }
+    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
+         */
+        cancelRenderFrames();
+        if (stitcherFfmpeg !== undefined && stitcherFfmpeg.exitCode === null) {
+            const promise = new Promise((resolve) => {
+                setTimeout(() => {
+                    resolve();
+                }, 2000);
+                stitcherFfmpeg.on('close', resolve);
+            });
+            // Can only kill the process once it has spawned, otherwise getting EPIPE error in Node.JS
+            await (preStitcher === null || preStitcher === void 0 ? void 0 : preStitcher.waitForSpawn);
+            stitcherFfmpeg.kill();
+            await promise;
+        }
+        throw err;
+    }
     finally {
         if (preEncodedFileLocation !== null &&
             fs_1.default.existsSync(preEncodedFileLocation)) {
@@ -172,4 +222,3 @@ const renderMedia = async ({ parallelism, proResProfile, crf, composition, image
         }
     }
 };
-exports.renderMedia = renderMedia;

package/dist/render-still.d.ts

@@ -1,5 +1,6 @@
 import { Browser as PuppeteerBrowser } from 'puppeteer-core';
-import { BrowserExecutable, StillImageFormat, TCompMetadata } from 'remotion';
+import { BrowserExecutable, FfmpegExecutable, StillImageFormat, TCompMetadata } from 'remotion';
+import { RenderMediaOnDownload } from './assets/download-and-map-assets-to-file';
 import { ServeUrlOrWebpackBundle } from './legacy-webpack-config';
 import { ChromiumOptions } from './open-browser';
 declare type InnerStillOptions = {
@@ -17,8 +18,12 @@ declare type InnerStillOptions = {
     timeoutInMilliseconds?: number;
     chromiumOptions?: ChromiumOptions;
     scale?: number;
+    onDownload?: RenderMediaOnDownload;
+    ffmpegExecutable?: FfmpegExecutable;
+};
+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
  */

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];
@@ -29,6 +33,7 @@ const remotion_1 = require("remotion");
 const ensure_output_directory_1 = require("./ensure-output-directory");
 const handle_javascript_exception_1 = require("./error-handling/handle-javascript-exception");
 const legacy_webpack_config_1 = require("./legacy-webpack-config");
+const make_assets_download_dir_1 = require("./make-assets-download-dir");
 const open_browser_1 = require("./open-browser");
 const prepare_server_1 = require("./prepare-server");
 const provide_screenshot_1 = require("./provide-screenshot");
@@ -37,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, }) => {
+const innerRenderStill = async ({ composition, quality, imageFormat = 'png', serveUrl, puppeteerInstance, dumpBrowserLogs = false, onError, inputProps, envVariables, output, frame = 0, overwrite = true, browserExecutable, timeoutInMilliseconds, chromiumOptions, scale, proxyPort, }) => {
     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()`');
@@ -103,6 +108,8 @@ const innerRenderStill = async ({ composition, quality, imageFormat = 'png', ser
         serveUrl,
         initialFrame: frame,
         timeoutInMilliseconds,
+        proxyPort,
+        retriesRemaining: 2,
     });
     await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
         pageFunction: (id) => {
@@ -130,18 +137,35 @@ const innerRenderStill = async ({ composition, quality, imageFormat = 'png', ser
 /**
  * @description Render a still frame from a composition and returns an image path
  */
-const renderStill = async (options) => {
+const renderStill = (options) => {
+    var _a;
     const selectedServeUrl = (0, legacy_webpack_config_1.getServeUrlWithFallback)(options);
-    const { closeServer, serveUrl } = await (0, prepare_server_1.prepareServer)(selectedServeUrl);
+    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) => {
-        innerRenderStill({
-            ...options,
-            serveUrl,
-            onError: (err) => reject(err),
+        var _a, _b;
+        const onError = (err) => reject(err);
+        let close = null;
+        (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,
+        })
+            .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(() => close === null || close === void 0 ? void 0 : close());
     });
 };
 exports.renderStill = renderStill;

package/dist/serve-static.d.ts

@@ -1,6 +1,12 @@
-export declare const serveStatic: (path: string, options?: {
-    port?: number | undefined;
-} | undefined) => Promise<{
+import { FfmpegExecutable } from 'remotion';
+import { RenderMediaOnDownload } from './assets/download-and-map-assets-to-file';
+export declare const serveStatic: (path: string | null, options: {
+    port: number | null;
+    ffmpegExecutable: FfmpegExecutable;
+    downloadDir: string;
+    onDownload: RenderMediaOnDownload;
+    onError: (err: Error) => void;
+}) => Promise<{
     port: number;
     close: () => Promise<void>;
 }>;

package/dist/serve-static.js

@@ -8,12 +8,28 @@ const http_1 = __importDefault(require("http"));
 const remotion_1 = require("remotion");
 const serve_handler_1 = __importDefault(require("serve-handler"));
 const get_port_1 = require("./get-port");
+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)({
+        ffmpegExecutable: options.ffmpegExecutable,
+        downloadDir: options.downloadDir,
+        onDownload: options.onDownload,
+        onError: options.onError,
+    });
     try {
         const server = http_1.default
             .createServer((request, response) => {
+            var _a;
+            if ((_a = request.url) === null || _a === void 0 ? void 0 : _a.startsWith('/proxy')) {
+                return offthreadRequest(request, response);
+            }
+            if (path === null) {
+                response.writeHead(404);
+                response.end('Server only supports /proxy');
+                return;
+            }
             (0, serve_handler_1.default)(request, response, {
                 public: path,
                 directoryListing: false,

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

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