@remotion/renderer 4.0.0-alpha.4 → 4.0.0-alpha4

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;

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

@@ -1,11 +1,15 @@
 /// <reference types="node" />
+import type { ClipRegion } from 'remotion';
 import type { Page } from './browser/BrowserPage';
 import type { ImageFormat } from './image-format';
-export declare const screenshotDOMElement: ({ page, imageFormat, quality, opts, }: {
+export declare const screenshotDOMElement: ({ page, imageFormat, quality, opts, height, width, clipRegion, }: {
     page: Page;
     imageFormat: ImageFormat;
     quality: number | undefined;
     opts: {
         path: string | null;
     };
+    height: number;
+    width: number;
+    clipRegion: ClipRegion | null;
 }) => Promise<Buffer>;

package/dist/screenshot-dom-element.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.screenshotDOMElement = void 0;
 const puppeteer_evaluate_1 = require("./puppeteer-evaluate");
 const puppeteer_screenshot_1 = require("./puppeteer-screenshot");
-const screenshotDOMElement = async ({ page, imageFormat, quality, opts, }) => {
+const screenshotDOMElement = async ({ page, imageFormat, quality, opts, height, width, clipRegion, }) => {
     const { path } = opts;
     if (imageFormat === 'png') {
         await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
@@ -28,11 +28,19 @@ const screenshotDOMElement = async ({ page, imageFormat, quality, opts, }) => {
     if (imageFormat === 'none') {
         throw new TypeError('Tried to make a screenshot with format "none"');
     }
-    return (0, puppeteer_screenshot_1.screenshot)(page, {
+    const buf = await (0, puppeteer_screenshot_1.screenshot)({
+        page,
         omitBackground: imageFormat === 'png',
         path: path !== null && path !== void 0 ? path : undefined,
         type: imageFormat,
         quality,
+        width,
+        height,
+        clipRegion,
     });
+    if (typeof buf === 'string') {
+        throw new TypeError('Expected a buffer');
+    }
+    return buf;
 };
 exports.screenshotDOMElement = screenshotDOMElement;

package/dist/screenshot-task.d.ts

@@ -1,4 +1,14 @@
+/// <reference types="node" />
+import type { ClipRegion } from 'remotion';
 import type { Page } from './browser/BrowserPage';
-import type { ScreenshotOptions } from './browser/ScreenshotOptions';
 import type { StillImageFormat } from './image-format';
-export declare const _screenshotTask: (page: Page, format: StillImageFormat, options: ScreenshotOptions) => Promise<Buffer | string>;
+export declare const screenshotTask: ({ format, height, omitBackground, page, width, path, quality, clipRegion, }: {
+    page: Page;
+    format: StillImageFormat;
+    path?: string | undefined;
+    quality?: number | undefined;
+    omitBackground: boolean;
+    width: number;
+    height: number;
+    clipRegion: ClipRegion | null;
+}) => Promise<Buffer | string>;

package/dist/screenshot-task.js

@@ -3,10 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports._screenshotTask = void 0;
+exports.screenshotTask = void 0;
 const fs_1 = __importDefault(require("fs"));
 const perf_1 = require("./perf");
-const _screenshotTask = async (page, format, options) => {
+const screenshotTask = async ({ format, height, omitBackground, page, width, path, quality, clipRegion, }) => {
     var _a;
     const client = page._client();
     const target = page.target();
@@ -15,7 +15,7 @@ const _screenshotTask = async (page, format, options) => {
         targetId: target._targetId,
     });
     (0, perf_1.stopPerfMeasure)(perfTarget);
-    const shouldSetDefaultBackground = options.omitBackground && format === 'png';
+    const shouldSetDefaultBackground = omitBackground && format === 'png';
     if (shouldSetDefaultBackground)
         await client.send('Emulation.setDefaultBackgroundColorOverride', {
             color: { r: 0, g: 0, b: 0, a: 0 },
@@ -24,17 +24,32 @@ const _screenshotTask = async (page, format, options) => {
     try {
         const result = await client.send('Page.captureScreenshot', {
             format,
-            quality: options.quality,
-            clip: undefined,
+            quality,
+            clip: clipRegion !== null && clipRegion !== 'hide'
+                ? {
+                    x: clipRegion.x,
+                    y: clipRegion.y,
+                    height: clipRegion.height,
+                    scale: 1,
+                    width: clipRegion.width,
+                }
+                : {
+                    x: 0,
+                    y: 0,
+                    height,
+                    scale: 1,
+                    width,
+                },
             captureBeyondViewport: true,
+            optimizeForSpeed: true,
         });
         (0, perf_1.stopPerfMeasure)(cap);
         if (shouldSetDefaultBackground)
             await client.send('Emulation.setDefaultBackgroundColorOverride');
         const saveMarker = (0, perf_1.startPerfMeasure)('save');
         const buffer = Buffer.from(result.data, 'base64');
-        if (options.path)
-            await fs_1.default.promises.writeFile(options.path, buffer);
+        if (path)
+            await fs_1.default.promises.writeFile(path, buffer);
         (0, perf_1.stopPerfMeasure)(saveMarker);
         return buffer;
     }
@@ -42,7 +57,7 @@ const _screenshotTask = async (page, format, options) => {
         if (err.message.includes('Unable to capture screenshot')) {
             const errMessage = [
                 'Could not take a screenshot because Google Chrome ran out of memory or disk space.',
-                ((_a = process === null || process === void 0 ? void 0 : process.env) === null || _a === void 0 ? void 0 : _a.REMOTION_LAMBDA)
+                ((_a = process === null || process === void 0 ? void 0 : process.env) === null || _a === void 0 ? void 0 : _a.__RESERVED_IS_INSIDE_REMOTION_LAMBDA)
                     ? 'Deploy a new Lambda function with more memory or disk space.'
                     : 'Decrease the concurrency to use less RAM.',
             ].join(' ');
@@ -51,4 +66,4 @@ const _screenshotTask = async (page, format, options) => {
         throw err;
     }
 };
-exports._screenshotTask = _screenshotTask;
+exports.screenshotTask = screenshotTask;

package/dist/seek-to-frame.d.ts

@@ -1,4 +1,5 @@
 import type { Page } from './browser/BrowserPage';
+export declare const waitForReady: (page: Page) => Promise<unknown>;
 export declare const seekToFrame: ({ frame, page, }: {
     frame: number;
     page: Page;

package/dist/seek-to-frame.js

@@ -1,9 +1,55 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.seekToFrame = void 0;
+exports.seekToFrame = exports.waitForReady = void 0;
+const symbolicateable_error_1 = require("./error-handling/symbolicateable-error");
+const parse_browser_error_stack_1 = require("./parse-browser-error-stack");
 const puppeteer_evaluate_1 = require("./puppeteer-evaluate");
+const waitForReady = (page) => {
+    return Promise.race([
+        new Promise((_, reject) => {
+            page.on("disposed" /* PageEmittedEvents.Disposed */, () => {
+                reject(new Error('Target closed (page disposed)'));
+            });
+        }),
+        new Promise((_, reject) => {
+            page.browser.on("closed-silent" /* BrowserEmittedEvents.ClosedSilent */, () => {
+                reject(new Error('Target closed'));
+            });
+        }),
+        page
+            .mainFrame()
+            ._mainWorld.waitForFunction(page.browser, 'window.ready === true')
+            .catch((err) => {
+            throw err;
+        }),
+        page
+            .mainFrame()
+            ._mainWorld.waitForFunction(page.browser, 'window.remotion_cancelledError !== undefined')
+            .then(() => {
+            return (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
+                pageFunction: () => window.remotion_cancelledError,
+                args: [],
+                frame: null,
+                page,
+            });
+        })
+            .then((val) => {
+            if (typeof val !== 'string') {
+                throw val;
+            }
+            throw new symbolicateable_error_1.SymbolicateableError({
+                frame: null,
+                stack: val,
+                name: 'CancelledError',
+                message: val.split('\n')[0],
+                stackFrame: (0, parse_browser_error_stack_1.parseStack)(val.split('\n')),
+            });
+        }),
+    ]);
+};
+exports.waitForReady = waitForReady;
 const seekToFrame = async ({ frame, page, }) => {
-    await page.waitForFunction(page.browser, 'window.ready === true');
+    await (0, exports.waitForReady)(page);
     await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
         pageFunction: (f) => {
             window.remotion_setFrame(f);
@@ -12,7 +58,7 @@ const seekToFrame = async ({ frame, page, }) => {
         frame,
         page,
     });
-    await page.waitForFunction(page.browser, 'window.ready === true');
+    await (0, exports.waitForReady)(page);
     await page.evaluateHandle('document.fonts.ready');
 };
 exports.seekToFrame = seekToFrame;

package/dist/serve-static.d.ts

@@ -8,6 +8,7 @@ export declare const serveStatic: (path: string | null, options: {
     onDownload: RenderMediaOnDownload;
     onError: (err: Error) => void;
     downloadMap: DownloadMap;
+    remotionRoot: string;
 }) => Promise<{
     port: number;
     close: () => Promise<void>;

package/dist/serve-static.js

@@ -9,58 +9,94 @@ const get_port_1 = require("./get-port");
 const offthread_video_server_1 = require("./offthread-video-server");
 const serve_handler_1 = require("./serve-handler");
 const serveStatic = async (path, options) => {
-    var _a;
-    const port = await (0, get_port_1.getDesiredPort)((_a = options === null || options === void 0 ? void 0 : options.port) !== null && _a !== void 0 ? _a : undefined, 3000, 3100);
     const offthreadRequest = (0, offthread_video_server_1.startOffthreadVideoServer)({
         ffmpegExecutable: options.ffmpegExecutable,
         ffprobeExecutable: options.ffprobeExecutable,
         onDownload: options.onDownload,
         onError: options.onError,
         downloadMap: options.downloadMap,
+        remotionRoot: options.remotionRoot,
     });
-    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.serveHandler)(request, response, {
-                public: path,
-            }).catch(() => {
-                response.statusCode = 500;
-                response.end('Error serving file');
+    const connections = {};
+    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.serveHandler)(request, response, {
+            public: path,
+        }).catch(() => {
+            response.statusCode = 500;
+            response.end('Error serving file');
+        });
+    });
+    server.on('connection', (conn) => {
+        const key = conn.remoteAddress + ':' + conn.remotePort;
+        connections[key] = conn;
+        conn.on('close', () => {
+            delete connections[key];
+        });
+    });
+    let selectedPort = null;
+    const maxTries = 5;
+    for (let i = 0; i < maxTries; i++) {
+        try {
+            selectedPort = await new Promise((resolve, reject) => {
+                var _a;
+                (0, get_port_1.getDesiredPort)((_a = options === null || options === void 0 ? void 0 : options.port) !== null && _a !== void 0 ? _a : undefined, 3000, 3100)
+                    .then(({ port, didUsePort }) => {
+                    server.listen(port);
+                    server.on('listening', () => {
+                        resolve(port);
+                        return didUsePort();
+                    });
+                    server.on('error', (err) => {
+                        reject(err);
+                    });
+                })
+                    .catch((err) => reject(err));
             });
-        })
-            .listen(port);
-        const close = () => {
-            return new Promise((resolve, reject) => {
-                server.close((err) => {
-                    if (err) {
-                        if (err.code === 'ERR_SERVER_NOT_RUNNING') {
-                            return resolve();
+            const destroyConnections = function () {
+                for (const key in connections)
+                    connections[key].destroy();
+            };
+            const close = () => {
+                return new Promise((resolve, reject) => {
+                    destroyConnections();
+                    server.close((err) => {
+                        if (err) {
+                            if (err.code ===
+                                'ERR_SERVER_NOT_RUNNING') {
+                                return resolve();
+                            }
+                            reject(err);
                         }
-                        reject(err);
-                    }
-                    else {
-                        resolve();
-                    }
+                        else {
+                            resolve();
+                        }
+                    });
                 });
-            });
-        };
-        return { port, close };
-    }
-    catch (err) {
-        console.log({ err, msg: err.message });
-        if (err.message.includes('EADDRINUSE')) {
-            return (0, exports.serveStatic)(path, options);
+            };
+            return { port: selectedPort, close };
+        }
+        catch (err) {
+            if (!(err instanceof Error)) {
+                throw err;
+            }
+            const codedError = err;
+            if (codedError.code === 'EADDRINUSE') {
+                // Already in use, try another port
+            }
+            else {
+                throw err;
+            }
         }
-        throw err;
     }
+    throw new Error(`Tried ${maxTries} times to find a free port. Giving up.`);
 };
 exports.serveStatic = serveStatic;

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

@@ -1,5 +1,5 @@
 import type { Page } from './browser/BrowserPage';
-export declare const setPropsAndEnv: ({ inputProps, envVariables, page, serveUrl, initialFrame, timeoutInMilliseconds, proxyPort, retriesRemaining, }: {
+export declare const setPropsAndEnv: ({ inputProps, envVariables, page, serveUrl, initialFrame, timeoutInMilliseconds, proxyPort, retriesRemaining, audioEnabled, videoEnabled, }: {
     inputProps: unknown;
     envVariables: Record<string, string> | undefined;
     page: Page;
@@ -8,4 +8,6 @@ export declare const setPropsAndEnv: ({ inputProps, envVariables, page, serveUrl
     timeoutInMilliseconds: number | undefined;
     proxyPort: number;
     retriesRemaining: number;
+    audioEnabled: boolean;
+    videoEnabled: boolean;
 }) => Promise<void>;

package/dist/set-props-and-env.js

@@ -1,11 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setPropsAndEnv = void 0;
+const version_1 = require("remotion/version");
 const TimeoutSettings_1 = require("./browser/TimeoutSettings");
 const normalize_serve_url_1 = require("./normalize-serve-url");
 const puppeteer_evaluate_1 = require("./puppeteer-evaluate");
+const redirect_status_codes_1 = require("./redirect-status-codes");
 const validate_puppeteer_timeout_1 = require("./validate-puppeteer-timeout");
-const setPropsAndEnv = async ({ inputProps, envVariables, page, serveUrl, initialFrame, timeoutInMilliseconds, proxyPort, retriesRemaining, }) => {
+const setPropsAndEnv = async ({ inputProps, envVariables, page, serveUrl, initialFrame, timeoutInMilliseconds, proxyPort, retriesRemaining, audioEnabled, videoEnabled, }) => {
     (0, validate_puppeteer_timeout_1.validatePuppeteerTimeout)(timeoutInMilliseconds);
     const actualTimeout = timeoutInMilliseconds !== null && timeoutInMilliseconds !== void 0 ? timeoutInMilliseconds : TimeoutSettings_1.DEFAULT_TIMEOUT;
     page.setDefaultTimeout(actualTimeout);
@@ -13,23 +15,32 @@ const setPropsAndEnv = async ({ inputProps, envVariables, page, serveUrl, initia
     const urlToVisit = (0, normalize_serve_url_1.normalizeServeUrl)(serveUrl);
     await page.evaluateOnNewDocument((timeout) => {
         window.remotion_puppeteerTimeout = timeout;
-    }, [actualTimeout]);
+    }, actualTimeout);
+    if (typeof inputProps === 'string') {
+        throw new Error('Input props should be an object, not a string.');
+    }
     if (inputProps) {
         await page.evaluateOnNewDocument((input) => {
             window.remotion_inputProps = input;
-        }, [JSON.stringify(inputProps)]);
+        }, JSON.stringify(inputProps));
     }
     if (envVariables) {
         await page.evaluateOnNewDocument((input) => {
             window.remotion_envVariables = input;
-        }, [JSON.stringify(envVariables)]);
+        }, JSON.stringify(envVariables));
     }
     await page.evaluateOnNewDocument((key) => {
         window.remotion_initialFrame = key;
-    }, [initialFrame]);
+    }, initialFrame);
     await page.evaluateOnNewDocument((port) => {
         window.remotion_proxyPort = port;
-    }, [proxyPort]);
+    }, proxyPort);
+    await page.evaluateOnNewDocument((enabled) => {
+        window.remotion_audioEnabled = enabled;
+    }, audioEnabled);
+    await page.evaluateOnNewDocument((enabled) => {
+        window.remotion_videoEnabled = enabled;
+    }, videoEnabled);
     const pageRes = await page.goto(urlToVisit);
     if (pageRes === null) {
         throw new Error(`Visited "${urlToVisit}" but got no response.`);
@@ -52,15 +63,11 @@ const setPropsAndEnv = async ({ inputProps, envVariables, page, serveUrl, initia
             retriesRemaining: retriesRemaining - 1,
             serveUrl,
             timeoutInMilliseconds,
+            audioEnabled,
+            videoEnabled,
         });
     }
-    if (status !== 200 &&
-        status !== 301 &&
-        status !== 302 &&
-        status !== 303 &&
-        status !== 304 &&
-        status !== 307 &&
-        status !== 308) {
+    if (!redirect_status_codes_1.redirectStatusCodes.every((code) => code !== status)) {
         throw new Error(`Error while getting compositions: Tried to go to ${urlToVisit} but the status code was ${status} instead of 200. Does the site you specified exist?`);
     }
     const isRemotionFn = await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
@@ -82,8 +89,25 @@ const setPropsAndEnv = async ({ inputProps, envVariables, page, serveUrl, initia
         frame: null,
         page,
     });
-    if (siteVersion !== '3') {
-        throw new Error(`Incompatible site: When visiting ${urlToVisit}, a bundle was found, but one that is not compatible with this version of Remotion. The bundle format changed in version 3.0.11. To resolve this error, please bundle and deploy again.`);
+    const remotionVersion = await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
+        pageFunction: () => {
+            return window.remotion_version;
+        },
+        args: [],
+        frame: null,
+        page,
+    });
+    const requiredVersion = '4';
+    if (siteVersion !== requiredVersion) {
+        throw new Error(`Incompatible site: When visiting ${urlToVisit}, a bundle was found, but one that is not compatible with this version of Remotion. Found version: ${siteVersion} - Required version: ${requiredVersion}. To resolve this error, please bundle and deploy again.`);
+    }
+    if (remotionVersion !== version_1.VERSION && process.env.NODE_ENV !== 'test') {
+        if (remotionVersion) {
+            console.warn(`The site was bundled with version ${remotionVersion} of @remotion/bundler, while @remotion/renderer is on version ${version_1.VERSION}. You may not have the newest bugfixes and features. Re-bundle the site to fix this issue.`);
+        }
+        else {
+            console.warn(`The site was bundled with an old version of Remotion, while @remotion/renderer is on version ${version_1.VERSION}. You may not have the newest bugfixes and features. Re-bundle the site to fix this issue.`);
+        }
     }
 };
 exports.setPropsAndEnv = setPropsAndEnv;

package/dist/stitch-frames-to-video.d.ts

@@ -1,13 +1,17 @@
 /// <reference types="node" />
 import type { RenderMediaOnDownload } from './assets/download-and-map-assets-to-file';
 import type { RenderAssetInfo } from './assets/download-map';
+import type { AudioCodec } from './audio-codec';
 import type { Codec } from './codec';
 import type { FfmpegExecutable } from './ffmpeg-executable';
+import type { FfmpegOverrideFn } from './ffmpeg-override';
 import type { ImageFormat } from './image-format';
 import type { CancelSignal } from './make-cancel-signal';
 import type { PixelFormat } from './pixel-format';
 import type { ProResProfile } from './prores-profile';
 export declare type StitcherOptions = {
+    audioBitrate?: string | null;
+    videoBitrate?: string | null;
     fps: number;
     width: number;
     height: number;
@@ -17,6 +21,7 @@ export declare type StitcherOptions = {
     pixelFormat?: PixelFormat;
     numberOfGifLoops?: number | null;
     codec?: Codec;
+    audioCodec?: AudioCodec | null;
     crf?: number | null;
     onProgress?: (progress: number) => void;
     onDownload?: RenderMediaOnDownload;
@@ -29,12 +34,20 @@ export declare type StitcherOptions = {
     internalOptions?: {
         preEncodedFileLocation: string | null;
         imageFormat: ImageFormat;
+        preferLossless: boolean;
     };
+    muted?: boolean;
+    enforceAudioTrack?: boolean;
+    ffmpegOverride?: FfmpegOverrideFn;
 };
 declare type ReturnType = {
     task: Promise<Buffer | null>;
     getLogs: () => string;
 };
-export declare const spawnFfmpeg: (options: StitcherOptions) => Promise<ReturnType>;
+export declare const spawnFfmpeg: (options: StitcherOptions, remotionRoot: string) => Promise<ReturnType>;
+/**
+ * @description Takes a series of images and audio information generated by renderFrames() and encodes it to a video.
+ * @see [Documentation](https://www.remotion.dev/docs/renderer/stitch-frames-to-video)
+ */
 export declare const stitchFramesToVideo: (options: StitcherOptions) => Promise<Buffer | null>;
 export {};