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

package/dist/render-frames.js

@@ -8,21 +8,27 @@ const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
 const remotion_1 = require("remotion");
 const download_and_map_assets_to_file_1 = require("./assets/download-and-map-assets-to-file");
+const download_map_1 = require("./assets/download-map");
+const browser_1 = require("./browser");
+const compress_assets_1 = require("./compress-assets");
 const cycle_browser_tabs_1 = require("./cycle-browser-tabs");
 const handle_javascript_exception_1 = require("./error-handling/handle-javascript-exception");
 const get_concurrency_1 = require("./get-concurrency");
 const get_duration_from_frame_range_1 = require("./get-duration-from-frame-range");
+const get_frame_padded_index_1 = require("./get-frame-padded-index");
 const get_frame_to_render_1 = require("./get-frame-to-render");
 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 open_browser_1 = require("./open-browser");
+const perf_1 = require("./perf");
 const pool_1 = require("./pool");
 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 truthy_1 = require("./truthy");
 const validate_scale_1 = require("./validate-scale");
 const getComposition = (others) => {
     if ('composition' in others) {
@@ -33,9 +39,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, }) => {
+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, everyNthFrame = 1, proxyPort, cancelSignal, downloadMap, muted, }) => {
     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)) {
@@ -44,12 +55,14 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, inputProps
             });
         }
     }
+    const downloadPromises = [];
     const realFrameRange = (0, get_frame_to_render_1.getRealFrameRange)(composition.durationInFrames, frameRange !== null && frameRange !== void 0 ? frameRange : null);
-    const frameCount = (0, get_duration_from_frame_range_1.getDurationFromFrameRange)(realFrameRange, composition.durationInFrames);
+    const framesToRender = (0, get_duration_from_frame_range_1.getFramesToRender)(realFrameRange, everyNthFrame);
+    const lastFrame = framesToRender[framesToRender.length - 1];
     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,
@@ -57,18 +70,14 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, inputProps
         const logCallback = (log) => {
             onBrowserLog === null || onBrowserLog === void 0 ? void 0 : onBrowserLog({
                 stackTrace: log.stackTrace(),
-                text: log.text(),
-                type: log.type(),
+                text: log.text,
+                type: log.type,
             });
         };
         if (onBrowserLog) {
             page.on('console', logCallback);
         }
-        const initialFrame = typeof frameRange === 'number'
-            ? frameRange
-            : frameRange === null || frameRange === undefined
-                ? 0
-                : frameRange[0];
+        const initialFrame = realFrameRange[0];
         await (0, set_props_and_env_1.setPropsAndEnv)({
             inputProps,
             envVariables,
@@ -76,40 +85,62 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, inputProps
             serveUrl,
             initialFrame,
             timeoutInMilliseconds,
+            proxyPort,
+            retriesRemaining: 2,
+            audioEnabled: !muted,
+            videoEnabled: imageFormat !== 'none',
         });
         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,
         });
         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;
+    // If rendering a GIF and skipping frames, we must ensure it starts from 0
+    // and then is consecutive so FFMPEG recognizes the sequence
+    const countType = everyNthFrame === 1 ? 'actual-frames' : 'from-zero';
+    const filePadLength = (0, get_frame_padded_index_1.getFilePadLength)({
+        lastFrame,
+        totalFrames: framesToRender.length,
+        countType,
+    });
     let framesRendered = 0;
+    const poolPromise = getPool(pages);
     onStart({
-        frameCount,
+        frameCount: framesToRender.length,
+    });
+    const assets = new Array(framesToRender.length).fill(undefined);
+    let stopped = false;
+    cancelSignal === null || cancelSignal === void 0 ? void 0 : cancelSignal(() => {
+        stopped = true;
     });
-    const downloadDir = (0, make_assets_download_dir_1.makeAssetsDownloadTmpDir)();
-    const assets = new Array(frameCount).fill(undefined);
-    await Promise.all(new Array(frameCount)
-        .fill(Boolean)
-        .map((x, i) => i)
-        .map(async (index) => {
-        const frame = realFrameRange[0] + index;
+    const progress = Promise.all(framesToRender.map(async (frame, index) => {
+        const pool = await poolPromise;
         const freePage = await pool.acquire();
-        const paddedIndex = String(frame).padStart(filePadLength, '0');
+        if (stopped) {
+            throw new Error('Render was stopped');
+        }
         const errorCallbackOnFrame = (err) => {
             onError(err);
         };
@@ -122,22 +153,31 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, inputProps
         await (0, seek_to_frame_1.seekToFrame)({ frame, page: freePage });
         if (imageFormat !== 'none') {
             if (onFrameBuffer) {
+                const id = (0, perf_1.startPerfMeasure)('save');
                 const buffer = await (0, provide_screenshot_1.provideScreenshot)({
                     page: freePage,
                     imageFormat,
                     quality,
                     options: {
                         frame,
-                        output: undefined,
+                        output: null,
                     },
                 });
+                (0, perf_1.stopPerfMeasure)(id);
                 onFrameBuffer(buffer, frame);
             }
             else {
                 if (!outputDir) {
                     throw new Error('Called renderFrames() without specifying either `outputDir` or `onFrameBuffer`');
                 }
-                const output = path_1.default.join(outputDir, `element-${paddedIndex}.${imageFormat}`);
+                const output = path_1.default.join(outputDir, (0, get_frame_padded_index_1.getFrameOutputFileName)({
+                    frame,
+                    imageFormat,
+                    index,
+                    countType,
+                    lastFrame,
+                    totalFrames: framesToRender.length,
+                }));
                 await (0, provide_screenshot_1.provideScreenshot)({
                     page: freePage,
                     imageFormat,
@@ -157,13 +197,13 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, inputProps
             frame,
             page: freePage,
         });
-        const compressedAssets = collectedAssets.map((asset) => remotion_1.Internals.AssetCompression.compressAsset(assets.filter(remotion_1.Internals.truthy).flat(1), asset));
+        const compressedAssets = collectedAssets.map((asset) => (0, compress_assets_1.compressAsset)(assets.filter(truthy_1.truthy).flat(1), asset));
         assets[index] = compressedAssets;
         compressedAssets.forEach((asset) => {
             (0, download_and_map_assets_to_file_1.downloadAndMapAssetsToFileUrl)({
                 asset,
-                downloadDir,
-                onDownload: onDownload !== null && onDownload !== void 0 ? onDownload : (() => () => undefined),
+                onDownload,
+                downloadMap,
             }).catch((err) => {
                 onError(new Error(`Error while downloading asset: ${err.stack}`));
             });
@@ -175,53 +215,95 @@ 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,
+                imageSequenceName: `element-%0${filePadLength}d.${imageFormat}`,
+                firstFrameIndex: framesToRender[0],
+                downloadMap,
+            },
+            frameCount: framesToRender.length,
+        };
+        return returnValue;
+    });
+    return happyPath
+        .then(() => {
+        return Promise.all(downloadPromises);
+    })
+        .then(() => happyPath);
 };
-const renderFrames = async (options) => {
-    var _a, _b;
+const renderFrames = (options) => {
+    var _a, _b, _c, _d, _e;
     const composition = getComposition(options);
     if (!composition) {
         throw new Error('No `composition` option has been specified for renderFrames()');
     }
     remotion_1.Internals.validateDimension(composition.height, 'height', 'in the `config` object passed to `renderFrames()`');
     remotion_1.Internals.validateDimension(composition.width, 'width', 'in the `config` object passed to `renderFrames()`');
-    remotion_1.Internals.validateFps(composition.fps, 'in the `config` object of `renderFrames()`');
+    remotion_1.Internals.validateFps(composition.fps, 'in the `config` object of `renderFrames()`', false);
     remotion_1.Internals.validateDurationInFrames(composition.durationInFrames, 'in the `config` object passed to `renderFrames()`');
     if (options.quality !== undefined && options.imageFormat !== 'jpeg') {
         throw new Error("You can only pass the `quality` option if `imageFormat` is 'jpeg'.");
     }
     const selectedServeUrl = (0, legacy_webpack_config_1.getServeUrlWithFallback)(options);
-    remotion_1.Internals.validateQuality(options.quality);
+    (0, quality_1.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)(browser_1.DEFAULT_BROWSER, {
         shouldDumpIo: options.dumpBrowserLogs,
         browserExecutable: options.browserExecutable,
         chromiumOptions: options.chromiumOptions,
-    }));
-    const actualParallelism = (0, get_concurrency_1.getActualConcurrency)((_b = options.parallelism) !== null && _b !== void 0 ? _b : null);
-    const { stopCycling } = (0, cycle_browser_tabs_1.cycleBrowserTabs)(browserInstance, actualParallelism);
+        forceDeviceScaleFactor: (_b = options.scale) !== null && _b !== void 0 ? _b : 1,
+    });
+    const downloadMap = (_c = options.downloadMap) !== null && _c !== void 0 ? _c : (0, download_map_1.makeDownloadMap)();
+    const onDownload = (_d = options.onDownload) !== null && _d !== void 0 ? _d : (() => () => undefined);
+    const actualParallelism = (0, get_concurrency_1.getActualConcurrency)((_e = options.parallelism) !== null && _e !== void 0 ? _e : null);
     const openedPages = [];
     return new Promise((resolve, reject) => {
-        innerRenderFrames({
-            ...options,
-            puppeteerInstance: browserInstance,
-            onError: (err) => reject(err),
-            pagesArray: openedPages,
-            serveUrl,
-            composition,
-            actualParallelism,
+        var _a, _b, _c;
+        const cleanup = [];
+        const onError = (err) => {
+            reject(err);
+        };
+        Promise.race([
+            new Promise((_, rej) => {
+                var _a;
+                (_a = options.cancelSignal) === null || _a === void 0 ? void 0 : _a.call(options, () => {
+                    rej(new Error('renderFrames() got cancelled'));
+                });
+            }),
+            Promise.all([
+                (0, prepare_server_1.prepareServer)({
+                    webpackConfigOrServeUrl: selectedServeUrl,
+                    onDownload,
+                    onError,
+                    ffmpegExecutable: (_a = options.ffmpegExecutable) !== null && _a !== void 0 ? _a : null,
+                    ffprobeExecutable: (_b = options.ffprobeExecutable) !== null && _b !== void 0 ? _b : null,
+                    port: (_c = options.port) !== null && _c !== void 0 ? _c : null,
+                    downloadMap,
+                }),
+                browserInstance,
+            ]).then(([{ serveUrl, closeServer, offthreadPort }, puppeteerInstance]) => {
+                const { stopCycling } = (0, cycle_browser_tabs_1.cycleBrowserTabs)(puppeteerInstance, actualParallelism);
+                cleanup.push(stopCycling);
+                cleanup.push(closeServer);
+                return innerRenderFrames({
+                    ...options,
+                    puppeteerInstance,
+                    onError,
+                    pagesArray: openedPages,
+                    serveUrl,
+                    composition,
+                    actualParallelism,
+                    onDownload,
+                    proxyPort: offthreadPort,
+                    downloadMap,
+                });
+            }),
+        ])
+            .then((res) => {
+            return resolve(res);
         })
-            .then((res) => resolve(res))
             .catch((err) => reject(err))
             .finally(() => {
             // If browser instance was passed in, we close all the pages
@@ -233,12 +315,18 @@ 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.forEach((c) => {
+                c();
+            });
+            // Don't clear download dir because it might be used by stitchFramesToVideo
         });
     });
 };

package/dist/render-media.d.ts

@@ -1,10 +1,19 @@
-import type { Browser as PuppeteerBrowser } from 'puppeteer-core';
-import { 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 { ChromiumOptions } from './open-browser';
-import { OnStartData } from './types';
+/// <reference types="node" />
+import type { SmallTCompMetadata } from 'remotion';
+import type { RenderMediaOnDownload } from './assets/download-and-map-assets-to-file';
+import type { DownloadMap } from './assets/download-map';
+import type { BrowserExecutable } from './browser-executable';
+import type { BrowserLog } from './browser-log';
+import type { Browser as PuppeteerBrowser } from './browser/Browser';
+import type { Codec } from './codec';
+import type { FfmpegExecutable } from './ffmpeg-executable';
+import type { FrameRange } from './frame-range';
+import type { ServeUrlOrWebpackBundle } from './legacy-webpack-config';
+import type { CancelSignal } from './make-cancel-signal';
+import type { ChromiumOptions } from './open-browser';
+import type { PixelFormat } from './pixel-format';
+import type { ProResProfile } from './prores-profile';
+import type { OnStartData } from './types';
 export declare type StitchingState = 'encoding' | 'muxing';
 export declare type RenderMediaOnProgress = (progress: {
     renderedFrames: number;
@@ -14,7 +23,7 @@ export declare type RenderMediaOnProgress = (progress: {
     stitchStage: StitchingState;
 }) => void;
 export declare type RenderMediaOptions = {
-    outputLocation: string;
+    outputLocation?: string | null;
     codec: Codec;
     composition: SmallTCompMetadata;
     inputProps?: unknown;
@@ -22,10 +31,13 @@ export declare type RenderMediaOptions = {
     crf?: number | null;
     imageFormat?: 'png' | 'jpeg' | 'none';
     ffmpegExecutable?: FfmpegExecutable;
+    ffprobeExecutable?: FfmpegExecutable;
     pixelFormat?: PixelFormat;
     envVariables?: Record<string, string>;
     quality?: number;
     frameRange?: FrameRange | null;
+    everyNthFrame?: number;
+    numberOfGifLoops?: number | null;
     puppeteerInstance?: PuppeteerBrowser;
     overwrite?: boolean;
     onProgress?: RenderMediaOnProgress;
@@ -37,5 +49,20 @@ export declare type RenderMediaOptions = {
     timeoutInMilliseconds?: number;
     chromiumOptions?: ChromiumOptions;
     scale?: number;
+    port?: number | null;
+    cancelSignal?: CancelSignal;
+    browserExecutable?: BrowserExecutable;
+    verbose?: boolean;
+    /**
+     * @deprecated Only for Remotion internal usage
+     */
+    downloadMap?: DownloadMap;
+    muted?: boolean;
+    enforceAudioTrack?: boolean;
 } & 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>;
+/**
+ *
+ * @description Render a video from a composition
+ * @link https://www.remotion.dev/docs/renderer/render-media
+ */
+export declare const renderMedia: ({ parallelism, proResProfile, crf, composition, ffmpegExecutable, ffprobeExecutable, inputProps, pixelFormat, codec, envVariables, frameRange, puppeteerInstance, outputLocation, onProgress, overwrite, onDownload, dumpBrowserLogs, onBrowserLog, onStart, timeoutInMilliseconds, chromiumOptions, scale, browserExecutable, port, cancelSignal, muted, enforceAudioTrack, ...options }: RenderMediaOptions) => Promise<Buffer | null>;