@remotion/renderer 4.0.0-lambda.3 → 4.0.0-newpaths.13

package/dist/render-still.js

@@ -30,46 +30,57 @@ 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 convert_to_positive_frame_index_1 = require("./convert-to-positive-frame-index");
 const ensure_output_directory_1 = require("./ensure-output-directory");
 const handle_javascript_exception_1 = require("./error-handling/handle-javascript-exception");
+const find_closest_package_json_1 = require("./find-closest-package-json");
+const image_format_1 = require("./image-format");
 const legacy_webpack_config_1 = require("./legacy-webpack-config");
-const make_assets_download_dir_1 = require("./make-assets-download-dir");
+const make_cancel_signal_1 = require("./make-cancel-signal");
 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 take_frame_and_compose_1 = require("./take-frame-and-compose");
+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, proxyPort, cancelSignal, }) => {
+const innerRenderStill = async ({ composition, quality, imageFormat = 'png', serveUrl, puppeteerInstance, dumpBrowserLogs = false, onError, inputProps, envVariables, output, frame = 0, overwrite = true, browserExecutable, timeoutInMilliseconds, chromiumOptions, scale = 1, proxyPort, cancelSignal, downloadMap, }) => {
     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);
+    const stillFrame = (0, convert_to_positive_frame_index_1.convertToPositiveFrameIndex)({
+        durationInFrames: composition.durationInFrames,
+        frame,
+    });
     (0, validate_puppeteer_timeout_1.validatePuppeteerTimeout)(timeoutInMilliseconds);
     (0, validate_scale_1.validateScale)(scale);
-    if (typeof output !== 'string') {
-        throw new TypeError('`output` parameter was not passed or is not a string');
-    }
-    output = path_1.default.resolve(process.cwd(), output);
+    output =
+        typeof output === 'string' ? path_1.default.resolve(process.cwd(), output) : null;
     if (quality !== undefined && imageFormat !== 'jpeg') {
         throw new Error("You can only pass the `quality` option if `imageFormat` is 'jpeg'.");
     }
-    remotion_1.Internals.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.`);
-        }
-        const stat = (0, fs_1.statSync)(output);
-        if (!stat.isFile()) {
-            throw new Error(`The output location ${output} already exists, but is not a file, but something else (e.g. folder). Cannot save to it.`);
+    (0, quality_1.validateQuality)(quality);
+    if (output) {
+        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.`);
+            }
+            const stat = (0, fs_1.statSync)(output);
+            if (!stat.isFile()) {
+                throw new Error(`The output location ${output} already exists, but is not a file, but something else (e.g. folder). Cannot save to it.`);
+            }
         }
+        (0, ensure_output_directory_1.ensureOutputDirectory)(output);
     }
-    (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,
@@ -96,7 +107,7 @@ const innerRenderStill = async ({ composition, quality, imageFormat = 'png', ser
             await page.close();
         }
         else {
-            browserInstance.close().catch((err) => {
+            browserInstance.close(true).catch((err) => {
                 console.log('Unable to close browser', err);
             });
         }
@@ -109,33 +120,52 @@ const innerRenderStill = async ({ composition, quality, imageFormat = 'png', ser
         envVariables,
         page,
         serveUrl,
-        initialFrame: frame,
+        initialFrame: stillFrame,
         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,
     });
-    await (0, seek_to_frame_1.seekToFrame)({ frame, page });
-    await (0, provide_screenshot_1.provideScreenshot)({
-        page,
+    await (0, seek_to_frame_1.seekToFrame)({ frame: stillFrame, page });
+    const { buffer } = await (0, take_frame_and_compose_1.takeFrameAndCompose)({
+        downloadMap,
+        frame: stillFrame,
+        freePage: page,
+        height: composition.height,
+        width: composition.width,
         imageFormat,
+        scale,
+        output,
         quality,
-        options: {
-            frame,
-            output,
-        },
+        wantsBuffer: !output,
     });
     await cleanup();
+    return { buffer: output ? null : buffer };
 };
 /**
  *
@@ -143,22 +173,23 @@ const innerRenderStill = async ({ composition, quality, imageFormat = 'png', ser
  * @link https://www.remotion.dev/docs/renderer/render-still
  */
 const renderStill = (options) => {
-    var _a;
+    var _a, _b;
     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);
+    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,
-            downloadDir,
             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,
+            remotionRoot: (0, find_closest_package_json_1.findRemotionRoot)(),
         })
             .then(({ serveUrl, closeServer, offthreadPort }) => {
             close = closeServer;
@@ -167,18 +198,25 @@ const renderStill = (options) => {
                 serveUrl,
                 onError: (err) => reject(err),
                 proxyPort: offthreadPort,
+                downloadMap,
             });
         })
             .then((res) => resolve(res))
             .catch((err) => reject(err))
-            .finally(() => close === null || close === void 0 ? void 0 : close());
+            .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(false);
+        });
     });
     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'));
+                reject(new Error(make_cancel_signal_1.cancelErrorMessages.renderStill));
             });
         }),
     ]);

package/dist/render-svg.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentType } from 'react';
+import type { TCompMetadata } from 'remotion';
+export declare const renderSvg: ({ composition, Comp, frame, layer, }: {
+    composition: TCompMetadata;
+    Comp: ComponentType;
+    frame: number;
+    layer: number;
+}) => string;

package/dist/render-svg.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderSvg = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const server_1 = require("react-dom/server");
+const remotion_1 = require("remotion");
+const make_comp_manager_context_1 = require("./make-comp-manager-context");
+const make_timeline_context_value_1 = require("./make-timeline-context-value");
+const renderSvg = ({ composition, Comp, frame, layer, }) => {
+    const svg = (0, server_1.renderToStaticMarkup)((0, jsx_runtime_1.jsx)(remotion_1.Internals.SelectCompositionMode, { layer: layer, id: composition.id, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineContext.Provider, { value: (0, make_timeline_context_value_1.makeTimelineContextValue)(composition, frame), children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.CompositionManager.Provider, { value: (0, make_comp_manager_context_1.makeCompManagerContext)(composition), children: (0, jsx_runtime_1.jsx)(Comp, {}) }) }) }));
+    return svg;
+};
+exports.renderSvg = renderSvg;

package/dist/render-video-layer.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentType } from 'react';
+import type { TCompMetadata } from 'remotion';
+import type { NativeVideoLayerInfo } from 'remotion/src/video/NativeVideoForRendering';
+export declare const renderVideoLayer: ({ composition, Comp, frame, layer, }: {
+    composition: TCompMetadata;
+    Comp: ComponentType;
+    frame: number;
+    layer: number;
+}) => NativeVideoLayerInfo | null;

package/dist/render-video-layer.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderVideoLayer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const server_1 = require("react-dom/server");
+const remotion_1 = require("remotion");
+const make_comp_manager_context_1 = require("./make-comp-manager-context");
+const make_timeline_context_value_1 = require("./make-timeline-context-value");
+const renderVideoLayer = ({ composition, Comp, frame, layer, }) => {
+    process.env.REMOTION_SERVER_RENDERING = 'true';
+    const markup = (0, server_1.renderToStaticMarkup)((0, jsx_runtime_1.jsx)(remotion_1.Internals.SelectCompositionMode, { layer: layer, id: composition.id, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineContext.Provider, { value: (0, make_timeline_context_value_1.makeTimelineContextValue)(composition, frame), children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.CompositionManager.Provider, { value: (0, make_comp_manager_context_1.makeCompManagerContext)(composition), children: (0, jsx_runtime_1.jsx)(Comp, {}) }) }) }));
+    const matches = markup.matchAll(/<div>(.*?)<\/div>/g);
+    let parsed = null;
+    for (const match of matches) {
+        if (parsed) {
+            throw new Error('cannot have more than one video layer');
+        }
+        const json = JSON.parse(match[1]);
+        parsed = json;
+    }
+    return parsed;
+};
+exports.renderVideoLayer = renderVideoLayer;

package/dist/render-web-frame.d.ts

@@ -0,0 +1,73 @@
+import type { SmallTCompMetadata, TAsset } from 'remotion';
+import type { DownloadMap } from './assets/download-map';
+import type { BrowserExecutable } from './browser-executable';
+import type { BrowserLog } from './browser-log';
+import type { Page } from './browser/BrowserPage';
+import type { CompositorLayer } from './compositor/payloads';
+import type { CountType } from './get-frame-padded-index';
+import type { ServeUrl } from './legacy-webpack-config';
+import type { ChromiumOptions } from './open-browser';
+import type { Pool } from './pool';
+import type { BrowserReplacer } from './replace-browser';
+export declare const renderWebFrameAndRetryTargetClose: ({ frame, index, retriesLeft, attempt, actualConcurrency, browserReplacer, poolPromise, composition, downloadMap, imageFormat, onFrameBuffer, outputDir, stopState, countType, scale, quality, framesToRender, lastFrame, framesRendered, browserExecutable, chromiumOptions, dumpBrowserLogs, pagesArray, onBrowserLog, inputProps, envVariables, muted, proxyPort, realFrameRange, serveUrl, timeoutInMilliseconds, }: {
+    frame: number;
+    index: number;
+    retriesLeft: number;
+    attempt: number;
+    actualConcurrency: number;
+    browserReplacer: BrowserReplacer | null;
+    poolPromise: Promise<Pool<Page>>;
+    composition: SmallTCompMetadata;
+    downloadMap: DownloadMap;
+    imageFormat: 'png' | 'jpeg' | 'none';
+    onFrameBuffer: ((buffer: Buffer, frame: number) => void) | undefined;
+    outputDir: string | null;
+    stopState: {
+        isStopped: boolean;
+    };
+    countType: CountType;
+    scale: number;
+    quality: number | undefined;
+    framesToRender: number[];
+    lastFrame: number;
+    framesRendered: {
+        frames: number;
+    };
+    browserExecutable?: BrowserExecutable | undefined;
+    chromiumOptions?: ChromiumOptions | undefined;
+    dumpBrowserLogs?: boolean | undefined;
+    pagesArray: Page[];
+    onBrowserLog?: ((log: BrowserLog) => void) | undefined;
+    inputProps: unknown;
+    envVariables?: Record<string, string> | undefined;
+    muted: boolean;
+    proxyPort: number;
+    realFrameRange: [number, number];
+    serveUrl: ServeUrl;
+    timeoutInMilliseconds: number;
+}) => Promise<{
+    layer: CompositorLayer | null;
+    buffer: Buffer | null;
+    assets: TAsset[];
+}>;
+export declare const makePage: ({ browserReplacer, pagesArray, composition, scale, onBrowserLog, inputProps, envVariables, serveUrl, realFrameRange, timeoutInMilliseconds, proxyPort, imageFormat, muted, }: {
+    browserReplacer: BrowserReplacer;
+    pagesArray: Page[];
+    composition: SmallTCompMetadata;
+    scale?: number | undefined;
+    onBrowserLog?: ((log: BrowserLog) => void) | undefined;
+    inputProps: unknown;
+    envVariables?: Record<string, string> | undefined;
+    serveUrl: ServeUrl;
+    realFrameRange: [number, number];
+    timeoutInMilliseconds: number | undefined;
+    proxyPort: number;
+    imageFormat: 'png' | 'jpeg' | 'none';
+    muted: boolean;
+}) => Promise<Page>;
+export declare const makeBrowser: ({ dumpBrowserLogs, browserExecutable, chromiumOptions, scale, }: {
+    dumpBrowserLogs?: boolean | undefined;
+    browserExecutable?: BrowserExecutable | undefined;
+    chromiumOptions?: ChromiumOptions | undefined;
+    scale?: number | undefined;
+}) => Promise<import("./browser/Browser").Browser>;

package/dist/render-web-frame.js

@@ -0,0 +1,260 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeBrowser = exports.makePage = exports.renderWebFrameAndRetryTargetClose = void 0;
+const path_1 = __importDefault(require("path"));
+const browser_1 = require("./browser");
+const handle_javascript_exception_1 = require("./error-handling/handle-javascript-exception");
+const make_cancel_signal_1 = require("./make-cancel-signal");
+const open_browser_1 = require("./open-browser");
+const perf_1 = require("./perf");
+const puppeteer_evaluate_1 = require("./puppeteer-evaluate");
+const seek_to_frame_1 = require("./seek-to-frame");
+const set_props_and_env_1 = require("./set-props-and-env");
+const take_frame_and_compose_1 = require("./take-frame-and-compose");
+const renderFrameWithOptionToReject = async ({ frame, index, reject, width, height, poolPromise, stopState, imageFormat, downloadMap, scale, quality, }) => {
+    const pool = await poolPromise;
+    const freePage = await pool.acquire();
+    if (stopState.isStopped) {
+        reject(new Error('Render was stopped'));
+        throw new Error('stopped');
+    }
+    const errorCallbackOnFrame = (err) => {
+        reject(err);
+    };
+    const cleanupPageError = (0, handle_javascript_exception_1.handleJavascriptException)({
+        page: freePage,
+        onError: errorCallbackOnFrame,
+        frame,
+    });
+    freePage.on('error', errorCallbackOnFrame);
+    await (0, seek_to_frame_1.seekToFrame)({ frame, page: freePage });
+    const id = (0, perf_1.startPerfMeasure)('save');
+    const output = path_1.default.join(downloadMap.compositingDir, `preframe-${index}.${imageFormat}`);
+    const { buffer, collectedAssets, clipRegion } = await (0, take_frame_and_compose_1.takeFrame)({
+        frame,
+        freePage,
+        height,
+        imageFormat,
+        quality,
+        width,
+    });
+    const needsComposing = clipRegion === null
+        ? null
+        : {
+            tmpFile: path_1.default.join(downloadMap.compositingDir, `${frame}.${imageFormat}`),
+            finalOutfie: output !== null && output !== void 0 ? output : path_1.default.join(downloadMap.compositingDir, `${frame}-final.${imageFormat}`),
+            clipRegion: clipRegion,
+        };
+    const compositionLayer = !needsComposing || needsComposing.clipRegion === 'hide'
+        ? null
+        : {
+            type: imageFormat === 'jpeg'
+                ? 'JpgImage'
+                : 'PngImage',
+            params: {
+                height: needsComposing.clipRegion.height * scale,
+                width: needsComposing.clipRegion.width * scale,
+                src: needsComposing.tmpFile,
+                x: needsComposing.clipRegion.x * scale,
+                y: needsComposing.clipRegion.y * scale,
+            },
+        };
+    // TODO: Always return buffer
+    (0, perf_1.stopPerfMeasure)(id);
+    cleanupPageError();
+    freePage.off('error', errorCallbackOnFrame);
+    pool.release(freePage);
+    return { layer: compositionLayer, buffer, assets: collectedAssets };
+};
+const renderWebFrame = ({ frame, index, downloadMap, imageFormat, poolPromise, stopState, composition, scale, quality, }) => {
+    return new Promise((resolve, reject) => {
+        renderFrameWithOptionToReject({
+            frame,
+            index,
+            reject,
+            width: composition.width,
+            height: composition.height,
+            downloadMap,
+            imageFormat,
+            poolPromise,
+            stopState,
+            scale,
+            quality,
+        })
+            .then((res) => {
+            resolve(res);
+        })
+            .catch((err) => {
+            reject(err);
+        });
+    });
+};
+// TODO: Bring fixes for retrying here
+const renderWebFrameAndRetryTargetClose = async ({ frame, index, retriesLeft, attempt, actualConcurrency, browserReplacer, poolPromise, composition, downloadMap, imageFormat, onFrameBuffer, outputDir, stopState, countType, scale, quality, framesToRender, lastFrame, framesRendered, browserExecutable, chromiumOptions, dumpBrowserLogs, pagesArray, onBrowserLog, inputProps, envVariables, muted, proxyPort, realFrameRange, serveUrl, timeoutInMilliseconds, }) => {
+    var _a, _b;
+    try {
+        const returnval = await renderWebFrame({
+            frame,
+            index,
+            poolPromise,
+            composition,
+            downloadMap,
+            imageFormat,
+            stopState,
+            scale,
+            quality,
+        });
+        return returnval;
+    }
+    catch (err) {
+        if (!((_a = err === null || err === void 0 ? void 0 : err.message) === null || _a === void 0 ? void 0 : _a.includes('Target closed')) &&
+            !((_b = err === null || err === void 0 ? void 0 : err.message) === null || _b === void 0 ? void 0 : _b.includes('Session closed'))) {
+            throw err;
+        }
+        if ((0, make_cancel_signal_1.isUserCancelledRender)(err)) {
+            throw err;
+        }
+        if (retriesLeft === 0) {
+            console.warn(err, `The browser crashed ${attempt} times while rendering frame ${frame}. Not retrying anymore. Learn more about this error under https://www.remotion.dev/docs/target-closed`);
+            throw err;
+        }
+        console.warn(`The browser crashed while rendering frame ${frame}, retrying ${retriesLeft} more times. Learn more about this error under https://www.remotion.dev/docs/target-closed`);
+        if (!browserReplacer) {
+            throw new Error('Did not have browser replacer for web frame');
+        }
+        await browserReplacer.replaceBrowser(() => (0, exports.makeBrowser)({
+            browserExecutable,
+            chromiumOptions,
+            dumpBrowserLogs,
+            scale,
+        }), async () => {
+            const pages = new Array(actualConcurrency).fill(true).map(() => (0, exports.makePage)({
+                browserReplacer,
+                composition,
+                pagesArray,
+                onBrowserLog,
+                scale,
+                inputProps,
+                envVariables,
+                imageFormat,
+                muted,
+                proxyPort,
+                realFrameRange,
+                serveUrl,
+                timeoutInMilliseconds,
+            }));
+            const puppeteerPages = await Promise.all(pages);
+            const pool = await poolPromise;
+            for (const newPage of puppeteerPages) {
+                pool.release(newPage);
+            }
+        });
+        const fram = await (0, exports.renderWebFrameAndRetryTargetClose)({
+            frame,
+            index,
+            retriesLeft: retriesLeft - 1,
+            attempt: attempt + 1,
+            actualConcurrency,
+            browserReplacer,
+            composition,
+            downloadMap,
+            imageFormat,
+            onFrameBuffer,
+            outputDir,
+            poolPromise,
+            stopState,
+            countType,
+            scale,
+            quality,
+            framesToRender,
+            lastFrame,
+            framesRendered,
+            inputProps,
+            pagesArray,
+            browserExecutable,
+            chromiumOptions,
+            dumpBrowserLogs,
+            envVariables,
+            muted,
+            onBrowserLog,
+            proxyPort,
+            realFrameRange,
+            serveUrl,
+            timeoutInMilliseconds,
+        });
+        return fram;
+    }
+};
+exports.renderWebFrameAndRetryTargetClose = renderWebFrameAndRetryTargetClose;
+const makePage = async ({ browserReplacer, pagesArray, composition, scale, onBrowserLog, inputProps, envVariables, serveUrl, realFrameRange, timeoutInMilliseconds, proxyPort, imageFormat, muted, }) => {
+    if (!browserReplacer) {
+        throw new Error('canonot make page without browser replacer');
+    }
+    const page = await browserReplacer.getBrowser().newPage();
+    pagesArray.push(page);
+    await page.setViewport({
+        width: composition.width,
+        height: composition.height,
+        deviceScaleFactor: scale !== null && scale !== void 0 ? scale : 1,
+    });
+    const logCallback = (log) => {
+        onBrowserLog === null || onBrowserLog === void 0 ? void 0 : onBrowserLog({
+            stackTrace: log.stackTrace(),
+            text: log.text,
+            type: log.type,
+        });
+    };
+    if (onBrowserLog) {
+        page.on('console', logCallback);
+    }
+    const initialFrame = realFrameRange[0];
+    await (0, set_props_and_env_1.setPropsAndEnv)({
+        inputProps,
+        envVariables,
+        page,
+        serveUrl,
+        initialFrame,
+        timeoutInMilliseconds,
+        proxyPort,
+        retriesRemaining: 2,
+        audioEnabled: !muted,
+        videoEnabled: imageFormat !== 'none',
+    });
+    await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
+        // 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,
+            composition.defaultProps,
+            composition.durationInFrames,
+            composition.fps,
+            composition.height,
+            composition.width,
+        ],
+        frame: null,
+        page,
+    });
+    page.off('console', logCallback);
+    return page;
+};
+exports.makePage = makePage;
+const makeBrowser = ({ dumpBrowserLogs, browserExecutable, chromiumOptions, scale, }) => (0, open_browser_1.openBrowser)(browser_1.DEFAULT_BROWSER, {
+    shouldDumpIo: dumpBrowserLogs,
+    browserExecutable,
+    chromiumOptions,
+    forceDeviceScaleFactor: scale !== null && scale !== void 0 ? scale : 1,
+});
+exports.makeBrowser = makeBrowser;

package/dist/replace-browser.d.ts

@@ -0,0 +1,6 @@
+import type { Browser } from './browser/Browser';
+export declare type BrowserReplacer = {
+    getBrowser: () => Browser;
+    replaceBrowser: (make: () => Promise<Browser>, makeNewPages: () => Promise<void>) => Promise<Browser>;
+};
+export declare const handleBrowserCrash: (instance: Browser) => BrowserReplacer;

package/dist/replace-browser.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleBrowserCrash = void 0;
+const handleBrowserCrash = (instance) => {
+    let _instance = instance;
+    const waiters = [];
+    let replacing = false;
+    return {
+        getBrowser: () => _instance,
+        replaceBrowser: async (make, makeNewPages) => {
+            if (replacing) {
+                const waiter = new Promise((resolve, reject) => {
+                    waiters.push({
+                        resolve,
+                        reject,
+                    });
+                });
+                return waiter;
+            }
+            try {
+                replacing = true;
+                await _instance
+                    .close(true)
+                    .then(() => {
+                    console.log('Killed previous browser and making new one');
+                })
+                    .catch(() => {
+                    // Ignore as browser crashed
+                });
+                const browser = await make();
+                _instance = browser;
+                await makeNewPages();
+                waiters.forEach((w) => w.resolve(browser));
+                console.log('Made new browser');
+                return browser;
+            }
+            catch (err) {
+                waiters.forEach((w) => w.reject(err));
+                throw err;
+            }
+            finally {
+                replacing = false;
+            }
+        },
+    };
+};
+exports.handleBrowserCrash = handleBrowserCrash;