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

package/dist/assets/download-and-map-assets-to-file.d.ts

@@ -2,6 +2,7 @@ import { TAsset } from 'remotion';
 export declare type RenderMediaOnDownload = (src: string) => ((progress: {
     percent: number;
 }) => void) | undefined | void;
+export declare const waitForAssetToBeDownloaded: (src: string) => Promise<string>;
 export declare const markAllAssetsAsDownloaded: () => void;
 export declare const getSanitizedFilenameForAssetUrl: ({ src, downloadDir, }: {
     src: string;
@@ -12,3 +13,8 @@ export declare const downloadAndMapAssetsToFileUrl: ({ asset, downloadDir, onDow
     downloadDir: string;
     onDownload: RenderMediaOnDownload;
 }) => Promise<TAsset>;
+export declare const startDownloadForSrc: ({ src, downloadDir, onDownload, }: {
+    src: string;
+    downloadDir: string;
+    onDownload: RenderMediaOnDownload;
+}) => Promise<string>;

package/dist/assets/download-and-map-assets-to-file.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.downloadAndMapAssetsToFileUrl = exports.getSanitizedFilenameForAssetUrl = exports.markAllAssetsAsDownloaded = void 0;
+exports.startDownloadForSrc = exports.downloadAndMapAssetsToFileUrl = exports.getSanitizedFilenameForAssetUrl = exports.markAllAssetsAsDownloaded = exports.waitForAssetToBeDownloaded = void 0;
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
 const remotion_1 = require("remotion");
@@ -14,20 +14,24 @@ const isDownloadingMap = {};
 const hasBeenDownloadedMap = {};
 const listeners = {};
 const waitForAssetToBeDownloaded = (src) => {
+    if (hasBeenDownloadedMap[src]) {
+        return Promise.resolve(hasBeenDownloadedMap[src]);
+    }
     if (!listeners[src]) {
         listeners[src] = [];
     }
     return new Promise((resolve) => {
-        listeners[src].push(() => resolve());
+        listeners[src].push((to) => resolve(to));
     });
 };
-const notifyAssetIsDownloaded = (src) => {
+exports.waitForAssetToBeDownloaded = waitForAssetToBeDownloaded;
+const notifyAssetIsDownloaded = (src, to) => {
     if (!listeners[src]) {
         listeners[src] = [];
     }
-    listeners[src].forEach((fn) => fn());
+    listeners[src].forEach((fn) => fn(to));
     isDownloadingMap[src] = false;
-    hasBeenDownloadedMap[src] = true;
+    hasBeenDownloadedMap[src] = to;
 };
 const validateMimeType = (mimeType, src) => {
     if (!mimeType.includes('/')) {
@@ -73,7 +77,7 @@ const downloadAsset = async (src, to, onDownload) => {
         return;
     }
     if (isDownloadingMap[src]) {
-        return waitForAssetToBeDownloaded(src);
+        return (0, exports.waitForAssetToBeDownloaded)(src);
     }
     isDownloadingMap[src] = true;
     const onProgress = onDownload(src);
@@ -94,7 +98,7 @@ const downloadAsset = async (src, to, onDownload) => {
         validateBufferEncoding(encoding, src);
         const buff = Buffer.from(assetData, encoding);
         await fs_1.default.promises.writeFile(to, buff);
-        notifyAssetIsDownloaded(src);
+        notifyAssetIsDownloaded(src, to);
         return;
     }
     await (0, download_file_1.downloadFile)(src, to, ({ progress }) => {
@@ -102,7 +106,7 @@ const downloadAsset = async (src, to, onDownload) => {
             percent: progress,
         });
     });
-    notifyAssetIsDownloaded(src);
+    notifyAssetIsDownloaded(src, to);
 };
 const markAllAssetsAsDownloaded = () => {
     Object.keys(hasBeenDownloadedMap).forEach((key) => {
@@ -127,16 +131,22 @@ const getSanitizedFilenameForAssetUrl = ({ src, downloadDir, }) => {
 };
 exports.getSanitizedFilenameForAssetUrl = getSanitizedFilenameForAssetUrl;
 const downloadAndMapAssetsToFileUrl = async ({ asset, downloadDir, onDownload, }) => {
-    const newSrc = (0, exports.getSanitizedFilenameForAssetUrl)({
+    const newSrc = await (0, exports.startDownloadForSrc)({
         src: asset.src,
         downloadDir,
+        onDownload,
     });
-    if (!remotion_1.Internals.AssetCompression.isAssetCompressed(newSrc)) {
-        await downloadAsset(asset.src, newSrc, onDownload);
-    }
     return {
         ...asset,
         src: newSrc,
     };
 };
 exports.downloadAndMapAssetsToFileUrl = downloadAndMapAssetsToFileUrl;
+const startDownloadForSrc = async ({ src, downloadDir, onDownload, }) => {
+    const newSrc = (0, exports.getSanitizedFilenameForAssetUrl)({ downloadDir, src });
+    if (!remotion_1.Internals.AssetCompression.isAssetCompressed(newSrc)) {
+        await downloadAsset(src, newSrc, onDownload);
+    }
+    return newSrc;
+};
+exports.startDownloadForSrc = startDownloadForSrc;

package/dist/assets/ffmpeg-volume-expression.d.ts

@@ -4,9 +4,10 @@ declare type FfmpegVolumeExpression = {
     eval: FfmpegEval;
     value: string;
 };
-export declare const ffmpegVolumeExpression: ({ volume, startInVideo, fps, }: {
+export declare const ffmpegVolumeExpression: ({ volume, startInVideo, fps, trimLeft, }: {
     volume: AssetVolume;
     startInVideo: number;
+    trimLeft: number;
     fps: number;
 }) => FfmpegVolumeExpression;
 export {};

package/dist/assets/ffmpeg-volume-expression.js

@@ -12,12 +12,12 @@ const FFMPEG_TIME_VARIABLE = 't';
 const ffmpegIfOrElse = (condition, then, elseDo) => {
     return `if(${condition},${then},${elseDo})`;
 };
-const ffmpegIsOneOfFrames = (frames, fps) => {
+const ffmpegIsOneOfFrames = ({ frames, trimLeft, fps, }) => {
     const consecutiveArrays = [];
     for (let i = 0; i < frames.length; i++) {
         const previousFrame = frames[i - 1];
         const frame = frames[i];
-        if (!previousFrame || frame !== previousFrame + 1) {
+        if (previousFrame === undefined || frame !== previousFrame + 1) {
             consecutiveArrays.push([]);
         }
         consecutiveArrays[consecutiveArrays.length - 1].push(frame);
@@ -28,25 +28,22 @@ const ffmpegIsOneOfFrames = (frames, fps) => {
         const lastFrame = f[f.length - 1];
         const before = (firstFrame - 0.5) / fps;
         const after = (lastFrame + 0.5) / fps;
-        return `between(${FFMPEG_TIME_VARIABLE},${before.toFixed(4)},${after.toFixed(4)})`;
+        return `between(${FFMPEG_TIME_VARIABLE},${(before + trimLeft).toFixed(4)},${(after + trimLeft).toFixed(4)})`;
     })
         .join('+');
 };
-const ffmpegBuildVolumeExpression = (arr, fps) => {
+const ffmpegBuildVolumeExpression = (arr, delay, fps) => {
     if (arr.length === 0) {
         throw new Error('Volume array expression should never have length 0');
     }
     if (arr.length === 1) {
-        // FFMpeg tends to request volume for frames outside the range
-        // where the audio actually plays.
-        // If this is the case, we just return volume 0 to clip it.
-        return ffmpegIfOrElse(ffmpegIsOneOfFrames(arr[0][1], fps), String(arr[0][0]), String(0));
+        return String(arr[0][0]);
     }
     const [first, ...rest] = arr;
     const [volume, frames] = first;
-    return ffmpegIfOrElse(ffmpegIsOneOfFrames(frames, fps), String(volume), ffmpegBuildVolumeExpression(rest, fps));
+    return ffmpegIfOrElse(ffmpegIsOneOfFrames({ frames, trimLeft: delay, fps }), String(volume), ffmpegBuildVolumeExpression(rest, delay, fps));
 };
-const ffmpegVolumeExpression = ({ volume, startInVideo, fps, }) => {
+const ffmpegVolumeExpression = ({ volume, startInVideo, fps, trimLeft, }) => {
     // If it's a static volume, we return it and tell
     // FFMPEG it only has to evaluate it once
     if (typeof volume === 'number') {
@@ -60,14 +57,20 @@ const ffmpegVolumeExpression = ({ volume, startInVideo, fps, }) => {
             volume: volume[0],
             startInVideo,
             fps,
+            trimLeft,
         });
     }
+    // A 1 sec video with frames 0-29 would mean that
+    // frame 29 corresponds to timestamp 0.966666...
+    // but the audio is actually 1 sec long. For that reason we pad the last
+    // timestamp.
+    const paddedVolume = [...volume, volume[volume.length - 1]];
     // Otherwise, we construct an FFMPEG expression. First step:
     // Make a map of all possible volumes
     // {possibleVolume1} => [frame1, frame2]
     // {possibleVolume2} => [frame3, frame4]
     const volumeMap = {};
-    volume.forEach((baseVolume, frame) => {
+    paddedVolume.forEach((baseVolume, frame) => {
         // Adjust volume based on how many other tracks have not yet finished
         const actualVolume = (0, round_volume_to_avoid_stack_overflow_1.roundVolumeToAvoidStackOverflow)(Math.min(1, baseVolume));
         if (!volumeMap[actualVolume]) {
@@ -81,7 +84,7 @@ const ffmpegVolumeExpression = ({ volume, startInVideo, fps, }) => {
         .map((key) => [Number(key), volumeMap[key]])
         .sort((a, b) => a[1].length - b[1].length);
     // Construct and tell FFMPEG it has to evaluate expression on each frame
-    const expression = ffmpegBuildVolumeExpression(volumeArray, fps);
+    const expression = ffmpegBuildVolumeExpression(volumeArray, trimLeft, fps);
     return {
         eval: 'frame',
         value: `'${expression}'`,

package/dist/combine-videos.js

@@ -28,6 +28,8 @@ const combineVideos = async ({ files, filelistDir, output, onProgress, numberOfF
             remotion_1.Internals.isAudioCodec(codec) ? null : 'copy',
             '-c:a',
             (0, get_audio_codec_name_1.getAudioCodecName)(codec),
+            codec === 'h264' ? '-movflags' : null,
+            codec === 'h264' ? 'faststart' : null,
             '-shortest',
             '-y',
             output,

package/dist/extract-frame-from-video.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="node" />
+import { FfmpegExecutable } from 'remotion';
+import { Readable } from 'stream';
+export declare function streamToString(stream: Readable): Promise<string>;
+export declare const getLastFrameOfVideo: ({ ffmpegExecutable, offset, src, }: {
+    ffmpegExecutable: FfmpegExecutable;
+    offset: number;
+    src: string;
+}) => Promise<Buffer>;
+declare type Options = {
+    time: number;
+    src: string;
+    ffmpegExecutable: FfmpegExecutable;
+};
+export declare const extractFrameFromVideoFn: ({ time, src, ffmpegExecutable, }: Options) => Promise<Buffer>;
+export declare const extractFrameFromVideo: (options: Options) => Promise<Buffer>;
+export {};

package/dist/extract-frame-from-video.js

@@ -0,0 +1,132 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractFrameFromVideo = exports.extractFrameFromVideoFn = exports.getLastFrameOfVideo = exports.streamToString = void 0;
+const execa_1 = __importDefault(require("execa"));
+const frame_to_ffmpeg_timestamp_1 = require("./frame-to-ffmpeg-timestamp");
+const p_limit_1 = require("./p-limit");
+function streamToString(stream) {
+    const chunks = [];
+    return new Promise((resolve, reject) => {
+        stream.on('data', (chunk) => chunks.push(Buffer.from(chunk)));
+        stream.on('error', (err) => reject(err));
+        stream.on('end', () => resolve(Buffer.concat(chunks).toString('utf8')));
+    });
+}
+exports.streamToString = streamToString;
+const getLastFrameOfVideo = async ({ ffmpegExecutable, offset, src, }) => {
+    if (offset > 100) {
+        throw new Error('could not get last frame of ' +
+            src +
+            '. Tried to seek 100ms before the end of the video and no frame was found. The video container has a duration that is longer than it contains video.');
+    }
+    const actualOffset = `-${offset + 10}ms`;
+    const { stdout, stderr } = (0, execa_1.default)(ffmpegExecutable !== null && ffmpegExecutable !== void 0 ? ffmpegExecutable : 'ffmpeg', [
+        '-sseof',
+        actualOffset,
+        '-i',
+        src,
+        '-frames:v',
+        '1',
+        '-f',
+        'image2pipe',
+        '-',
+    ]);
+    if (!stderr) {
+        throw new Error('unexpectedly did not get stderr');
+    }
+    if (!stdout) {
+        throw new Error('unexpectedly did not get stdout');
+    }
+    const stderrChunks = [];
+    const stdoutChunks = [];
+    const stdErrString = new Promise((resolve, reject) => {
+        stderr.on('data', (d) => stderrChunks.push(d));
+        stderr.on('error', (err) => reject(err));
+        stderr.on('end', () => resolve(Buffer.concat(stderrChunks).toString('utf-8')));
+    });
+    const stdoutChunk = new Promise((resolve, reject) => {
+        stdout.on('data', (d) => {
+            stdoutChunks.push(d);
+        });
+        stdout.on('error', (err) => {
+            reject(err);
+        });
+        stdout.on('end', () => {
+            resolve(Buffer.concat(stdoutChunks));
+        });
+    });
+    const [stdErr, stdoutBuffer] = await Promise.all([stdErrString, stdoutChunk]);
+    const isEmpty = stdErr.includes('Output file is empty');
+    if (isEmpty) {
+        return (0, exports.getLastFrameOfVideo)({ ffmpegExecutable, offset: offset + 10, src });
+    }
+    return stdoutBuffer;
+};
+exports.getLastFrameOfVideo = getLastFrameOfVideo;
+const limit = (0, p_limit_1.pLimit)(5);
+const extractFrameFromVideoFn = async ({ time, src, ffmpegExecutable, }) => {
+    const ffmpegTimestamp = (0, frame_to_ffmpeg_timestamp_1.frameToFfmpegTimestamp)(time);
+    const { stdout, stderr } = (0, execa_1.default)(ffmpegExecutable !== null && ffmpegExecutable !== void 0 ? ffmpegExecutable : 'ffmpeg', [
+        '-ss',
+        ffmpegTimestamp,
+        '-i',
+        src,
+        '-frames:v',
+        '1',
+        '-f',
+        'image2pipe',
+        '-',
+    ], {
+        buffer: false,
+    });
+    if (!stderr) {
+        throw new Error('unexpectedly did not get stderr');
+    }
+    if (!stdout) {
+        throw new Error('unexpectedly did not get stdout');
+    }
+    const stdoutChunks = [];
+    const stderrChunks = [];
+    const stderrStringProm = new Promise((resolve, reject) => {
+        stderr.on('data', (d) => {
+            stderrChunks.push(d);
+        });
+        stderr.on('error', (err) => {
+            reject(err);
+        });
+        stderr.on('end', () => {
+            resolve(Buffer.concat(stderrChunks).toString('utf8'));
+        });
+    });
+    const stdoutBuffer = new Promise((resolve, reject) => {
+        stdout.on('data', (d) => {
+            stdoutChunks.push(d);
+        });
+        stdout.on('error', (err) => {
+            reject(err);
+        });
+        stdout.on('end', () => {
+            resolve(Buffer.concat(stdoutChunks));
+        });
+    });
+    const [stderrStr, stdOut] = await Promise.all([
+        stderrStringProm,
+        stdoutBuffer,
+    ]);
+    if (stderrStr.includes('Output file is empty')) {
+        return (0, exports.getLastFrameOfVideo)({
+            ffmpegExecutable,
+            offset: 0,
+            src,
+        });
+    }
+    return stdOut;
+};
+exports.extractFrameFromVideoFn = extractFrameFromVideoFn;
+const extractFrameFromVideo = (options) => {
+    return limit(exports.extractFrameFromVideoFn, options);
+};
+exports.extractFrameFromVideo = extractFrameFromVideo;

package/dist/frame-to-ffmpeg-timestamp.d.ts

@@ -0,0 +1 @@
+export declare const frameToFfmpegTimestamp: (time: number) => string;

package/dist/frame-to-ffmpeg-timestamp.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.frameToFfmpegTimestamp = void 0;
+const frameToFfmpegTimestamp = (time) => {
+    // We ceil because FFMPEG seeks to the closest frame BEFORE the position
+    return (Math.ceil(time * 1000000) / 1000).toFixed(3) + 'ms';
+};
+exports.frameToFfmpegTimestamp = frameToFfmpegTimestamp;

package/dist/get-compositions.d.ts

@@ -1,5 +1,5 @@
 import { Browser } from 'puppeteer-core';
-import { BrowserExecutable, TCompMetadata } from 'remotion';
+import { BrowserExecutable, FfmpegExecutable, TCompMetadata } from 'remotion';
 import { BrowserLog } from './browser-log';
 import { ChromiumOptions } from './open-browser';
 declare type GetCompositionsConfig = {
@@ -10,6 +10,8 @@ declare type GetCompositionsConfig = {
     browserExecutable?: BrowserExecutable;
     timeoutInMilliseconds?: number;
     chromiumOptions?: ChromiumOptions;
+    ffmpegExecutable?: FfmpegExecutable;
+    port?: number | null;
 };
 export declare const getCompositions: (serveUrlOrWebpackUrl: string, config?: GetCompositionsConfig | undefined) => Promise<TCompMetadata[]>;
 export {};

package/dist/get-compositions.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCompositions = void 0;
 const handle_javascript_exception_1 = require("./error-handling/handle-javascript-exception");
 const get_browser_instance_1 = require("./get-browser-instance");
+const make_assets_download_dir_1 = require("./make-assets-download-dir");
 const prepare_server_1 = require("./prepare-server");
 const puppeteer_evaluate_1 = require("./puppeteer-evaluate");
 const set_props_and_env_1 = require("./set-props-and-env");
 const validate_puppeteer_timeout_1 = require("./validate-puppeteer-timeout");
-const innerGetCompositions = async (serveUrl, page, config) => {
+const innerGetCompositions = async (serveUrl, page, config, proxyPort) => {
     if (config === null || config === void 0 ? void 0 : config.onBrowserLog) {
         page.on('console', (log) => {
             var _a;
@@ -26,6 +27,7 @@ const innerGetCompositions = async (serveUrl, page, config) => {
         serveUrl,
         initialFrame: 0,
         timeoutInMilliseconds: config === null || config === void 0 ? void 0 : config.timeoutInMilliseconds,
+        proxyPort,
     });
     await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
         page,
@@ -50,26 +52,40 @@ const innerGetCompositions = async (serveUrl, page, config) => {
 };
 const getCompositions = async (serveUrlOrWebpackUrl, config) => {
     var _a, _b;
-    const { serveUrl, closeServer } = await (0, prepare_server_1.prepareServer)(serveUrlOrWebpackUrl);
+    const downloadDir = (0, make_assets_download_dir_1.makeAssetsDownloadTmpDir)();
     const { page, cleanup } = await (0, get_browser_instance_1.getPageAndCleanupFn)({
         passedInInstance: config === null || config === void 0 ? void 0 : config.puppeteerInstance,
         browserExecutable: (_a = config === null || config === void 0 ? void 0 : config.browserExecutable) !== null && _a !== void 0 ? _a : null,
         chromiumOptions: (_b = config === null || config === void 0 ? void 0 : config.chromiumOptions) !== null && _b !== void 0 ? _b : {},
     });
     return new Promise((resolve, reject) => {
+        var _a, _b;
+        const onError = (err) => reject(err);
         const cleanupPageError = (0, handle_javascript_exception_1.handleJavascriptException)({
             page,
             frame: null,
-            onError: (err) => reject(err),
+            onError,
         });
-        innerGetCompositions(serveUrl, page, config !== null && config !== void 0 ? config : {})
+        let close = null;
+        (0, prepare_server_1.prepareServer)({
+            webpackConfigOrServeUrl: serveUrlOrWebpackUrl,
+            downloadDir,
+            onDownload: () => undefined,
+            onError,
+            ffmpegExecutable: (_a = config === null || config === void 0 ? void 0 : config.ffmpegExecutable) !== null && _a !== void 0 ? _a : null,
+            port: (_b = config === null || config === void 0 ? void 0 : config.port) !== null && _b !== void 0 ? _b : null,
+        })
+            .then(({ serveUrl, closeServer, offthreadPort }) => {
+            close = closeServer;
+            return innerGetCompositions(serveUrl, page, config !== null && config !== void 0 ? config : {}, offthreadPort);
+        })
             .then((comp) => resolve(comp))
             .catch((err) => {
             reject(err);
         })
             .finally(() => {
             cleanup();
-            closeServer();
+            close === null || close === void 0 ? void 0 : close();
             cleanupPageError();
         });
     });

package/dist/index.d.ts

@@ -29,9 +29,13 @@ export declare const RenderInternals: {
     getFfmpegBuildInfo: (options: {
         ffmpegExecutable: string | null;
     }) => Promise<string>;
-    serveStatic: (path: string, options?: {
-        port?: number | undefined;
-    } | undefined) => Promise<{
+    serveStatic: (path: string | null, options: {
+        port: number | null;
+        ffmpegExecutable: import("remotion").FfmpegExecutable;
+        downloadDir: string;
+        onDownload: import("./assets/download-and-map-assets-to-file").RenderMediaOnDownload;
+        onError: (err: Error) => void;
+    }) => Promise<{
         port: number;
         close: () => Promise<void>;
     }>;
@@ -50,10 +54,6 @@ export declare const RenderInternals: {
     makeAssetsDownloadTmpDir: () => string;
     tmpDir: (str: string) => string;
     deleteDirectory: (directory: string) => Promise<void>;
-    prepareServer: (webpackConfigOrServeUrl: string) => Promise<{
-        serveUrl: string;
-        closeServer: () => Promise<void>;
-    }>;
     isServeUrl: (potentialUrl: string) => boolean;
     ensureOutputDirectory: (outputLocation: string) => void;
     getRealFrameRange: (durationInFrames: number, frameRange: import("remotion").FrameRange | null) => [number, number];

package/dist/index.js

@@ -18,7 +18,6 @@ const make_assets_download_dir_1 = require("./make-assets-download-dir");
 const normalize_serve_url_1 = require("./normalize-serve-url");
 const open_browser_1 = require("./open-browser");
 const parse_browser_error_stack_1 = require("./parse-browser-error-stack");
-const prepare_server_1 = require("./prepare-server");
 const serve_static_1 = require("./serve-static");
 const stitch_frames_to_video_1 = require("./stitch-frames-to-video");
 const tmp_dir_1 = require("./tmp-dir");
@@ -58,7 +57,6 @@ exports.RenderInternals = {
     makeAssetsDownloadTmpDir: make_assets_download_dir_1.makeAssetsDownloadTmpDir,
     tmpDir: tmp_dir_1.tmpDir,
     deleteDirectory: delete_directory_1.deleteDirectory,
-    prepareServer: prepare_server_1.prepareServer,
     isServeUrl: is_serve_url_1.isServeUrl,
     ensureOutputDirectory: ensure_output_directory_1.ensureOutputDirectory,
     getRealFrameRange: get_frame_to_render_1.getRealFrameRange,

package/dist/offthread-video-server.d.ts

@@ -0,0 +1,13 @@
+import { RequestListener } from 'http';
+import { FfmpegExecutable } from 'remotion';
+import { RenderMediaOnDownload } from './assets/download-and-map-assets-to-file';
+export declare const extractUrlAndSourceFromUrl: (url: string) => {
+    src: string;
+    time: number;
+};
+export declare const startOffthreadVideoServer: ({ ffmpegExecutable, downloadDir, onDownload, onError, }: {
+    ffmpegExecutable: FfmpegExecutable;
+    downloadDir: string;
+    onDownload: RenderMediaOnDownload;
+    onError: (err: Error) => void;
+}) => RequestListener;

package/dist/offthread-video-server.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.startOffthreadVideoServer = exports.extractUrlAndSourceFromUrl = void 0;
+const url_1 = require("url");
+const download_and_map_assets_to_file_1 = require("./assets/download-and-map-assets-to-file");
+const extract_frame_from_video_1 = require("./extract-frame-from-video");
+const extractUrlAndSourceFromUrl = (url) => {
+    const parsed = new URL(url, 'http://localhost');
+    const query = parsed.search;
+    if (!query.trim()) {
+        throw new Error('Expected query from ' + url);
+    }
+    const params = new url_1.URLSearchParams(query);
+    const src = params.get('src');
+    if (!src) {
+        throw new Error('Did not pass `src` parameter');
+    }
+    const time = params.get('time');
+    if (!time) {
+        throw new Error('Did not get `time` parameter');
+    }
+    return { src, time: parseFloat(time) };
+};
+exports.extractUrlAndSourceFromUrl = extractUrlAndSourceFromUrl;
+const startOffthreadVideoServer = ({ ffmpegExecutable, downloadDir, onDownload, onError, }) => {
+    return (req, res) => {
+        if (!req.url) {
+            throw new Error('Request came in without URL');
+        }
+        if (!req.url.startsWith('/proxy')) {
+            res.writeHead(404);
+            res.end();
+            return;
+        }
+        res.setHeader('access-control-allow-origin', '*');
+        res.setHeader('content-type', 'image/jpg');
+        const { src, time } = (0, exports.extractUrlAndSourceFromUrl)(req.url);
+        (0, download_and_map_assets_to_file_1.startDownloadForSrc)({ src, downloadDir, onDownload }).catch((err) => {
+            onError(new Error(`Error while downloading asset: ${err.stack}`));
+        });
+        (0, download_and_map_assets_to_file_1.waitForAssetToBeDownloaded)(src)
+            .then((newSrc) => {
+            return (0, extract_frame_from_video_1.extractFrameFromVideo)({
+                time,
+                src: newSrc,
+                ffmpegExecutable,
+            });
+        })
+            .then((readable) => {
+            if (!readable) {
+                throw new Error('no readable from ffmpeg');
+            }
+            res.writeHead(200);
+            res.write(readable);
+            res.end();
+        })
+            .catch((err) => {
+            res.writeHead(500);
+            res.end();
+            console.log('Error occurred', err);
+        });
+    };
+};
+exports.startOffthreadVideoServer = startOffthreadVideoServer;

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.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,
     ];

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,8 @@ declare type RenderFramesOptions = {
     timeoutInMilliseconds?: number;
     chromiumOptions?: ChromiumOptions;
     scale?: number;
+    ffmpegExecutable?: FfmpegExecutable;
+    port?: number | null;
 } & ConfigOrComposition & ServeUrlOrWebpackBundle;
 export declare const renderFrames: (options: RenderFramesOptions) => Promise<RenderFramesOutput>;
 export {};

package/dist/render-frames.js

@@ -33,7 +33,7 @@ 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 innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, inputProps, quality, imageFormat = image_format_1.DEFAULT_IMAGE_FORMAT, frameRange, puppeteerInstance, onError, envVariables, onBrowserLog, onFrameBuffer, onDownload, pagesArray, serveUrl, composition, timeoutInMilliseconds, scale, actualParallelism, downloadDir, proxyPort, }) => {
     if (!puppeteerInstance) {
         throw new Error('weird');
     }
@@ -76,6 +76,7 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, inputProps
             serveUrl,
             initialFrame,
             timeoutInMilliseconds,
+            proxyPort,
         });
         await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
             pageFunction: (id) => {
@@ -101,7 +102,6 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, inputProps
     onStart({
         frameCount,
     });
-    const downloadDir = (0, make_assets_download_dir_1.makeAssetsDownloadTmpDir)();
     const assets = new Array(frameCount).fill(undefined);
     await Promise.all(new Array(frameCount)
         .fill(Boolean)
@@ -163,7 +163,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}`));
             });
@@ -187,7 +187,7 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, inputProps
     return returnValue;
 };
 const renderFrames = async (options) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const composition = getComposition(options);
     if (!composition) {
         throw new Error('No `composition` option has been specified for renderFrames()');
@@ -202,25 +202,43 @@ const renderFrames = async (options) => {
     const selectedServeUrl = (0, legacy_webpack_config_1.getServeUrlWithFallback)(options);
     remotion_1.Internals.validateQuality(options.quality);
     (0, validate_scale_1.validateScale)(options.scale);
-    const { 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, {
         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,
+        var _a, _b;
+        let cleanup = null;
+        const onError = (err) => reject(err);
+        (0, prepare_server_1.prepareServer)({
+            webpackConfigOrServeUrl: selectedServeUrl,
+            downloadDir,
+            onDownload,
+            onError,
+            ffmpegExecutable: (_a = options.ffmpegExecutable) !== null && _a !== void 0 ? _a : null,
+            port: (_b = options.port) !== null && _b !== void 0 ? _b : null,
+        })
+            .then(({ serveUrl, closeServer, offthreadPort }) => {
+            cleanup = closeServer;
+            return innerRenderFrames({
+                ...options,
+                puppeteerInstance: browserInstance,
+                onError,
+                pagesArray: openedPages,
+                serveUrl,
+                composition,
+                actualParallelism,
+                onDownload,
+                downloadDir,
+                proxyPort: offthreadPort,
+            });
         })
             .then((res) => resolve(res))
             .catch((err) => reject(err))
@@ -239,7 +257,7 @@ const renderFrames = async (options) => {
                 });
             }
             stopCycling();
-            closeServer();
+            cleanup === null || cleanup === void 0 ? void 0 : cleanup();
         });
     });
 };

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,7 @@ 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>;
+export declare const renderMedia: ({ parallelism, proResProfile, crf, composition, imageFormat, ffmpegExecutable, inputProps, pixelFormat, codec, envVariables, quality, frameRange, puppeteerInstance, outputLocation, onProgress, overwrite, onDownload, dumpBrowserLogs, onBrowserLog, onStart, timeoutInMilliseconds, chromiumOptions, scale, browserExecutable, port, ...options }: RenderMediaOptions) => Promise<void>;

package/dist/render-media.js

@@ -23,7 +23,7 @@ const tmp_dir_1 = require("./tmp-dir");
 const validate_even_dimensions_with_codec_1 = require("./validate-even-dimensions-with-codec");
 const validate_output_filename_1 = require("./validate-output-filename");
 const validate_scale_1 = require("./validate-scale");
-const renderMedia = async ({ parallelism, proResProfile, crf, composition, imageFormat, ffmpegExecutable, inputProps, pixelFormat, codec, envVariables, quality, frameRange, puppeteerInstance, outputLocation, onProgress, overwrite, onDownload, dumpBrowserLogs, onBrowserLog, onStart, timeoutInMilliseconds, chromiumOptions, scale, ...options }) => {
+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, browserExecutable, port, ...options }) => {
     var _a;
     remotion_1.Internals.validateQuality(quality);
     if (typeof crf !== 'undefined' && crf !== null) {
@@ -121,6 +121,9 @@ const renderMedia = async ({ parallelism, proResProfile, crf, composition, image
             timeoutInMilliseconds,
             chromiumOptions,
             scale,
+            ffmpegExecutable,
+            browserExecutable,
+            port,
         });
         if (stitcherFfmpeg) {
             await waitForFinish();

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

@@ -29,6 +29,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 +38,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 +104,7 @@ const innerRenderStill = async ({ composition, quality, imageFormat = 'png', ser
         serveUrl,
         initialFrame: frame,
         timeoutInMilliseconds,
+        proxyPort,
     });
     await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
         pageFunction: (id) => {
@@ -130,18 +132,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,10 @@
 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, }: {
     inputProps: unknown;
     envVariables: Record<string, string> | undefined;
     page: Page;
     serveUrl: string;
     initialFrame: number;
     timeoutInMilliseconds: number | undefined;
+    proxyPort: number;
 }) => Promise<void>;

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

@@ -5,7 +5,7 @@ const remotion_1 = require("remotion");
 const normalize_serve_url_1 = require("./normalize-serve-url");
 const puppeteer_evaluate_1 = require("./puppeteer-evaluate");
 const validate_puppeteer_timeout_1 = require("./validate-puppeteer-timeout");
-const setPropsAndEnv = async ({ inputProps, envVariables, page, serveUrl, initialFrame, timeoutInMilliseconds, }) => {
+const setPropsAndEnv = async ({ inputProps, envVariables, page, serveUrl, initialFrame, timeoutInMilliseconds, proxyPort, }) => {
     (0, validate_puppeteer_timeout_1.validatePuppeteerTimeout)(timeoutInMilliseconds);
     const actualTimeout = timeoutInMilliseconds !== null && timeoutInMilliseconds !== void 0 ? timeoutInMilliseconds : remotion_1.Internals.DEFAULT_PUPPETEER_TIMEOUT;
     page.setDefaultTimeout(actualTimeout);
@@ -27,6 +27,9 @@ const setPropsAndEnv = async ({ inputProps, envVariables, page, serveUrl, initia
     await page.evaluateOnNewDocument((key) => {
         window.remotion_initialFrame = key;
     }, [initialFrame]);
+    await page.evaluateOnNewDocument((port) => {
+        window.remotion_proxyPort = port;
+    }, [proxyPort]);
     const pageRes = await page.goto(urlToVisit);
     const status = pageRes.status();
     if (status !== 200 &&
@@ -55,8 +58,8 @@ const setPropsAndEnv = async ({ inputProps, envVariables, page, serveUrl, initia
         frame: null,
         page,
     });
-    if (siteVersion !== '2') {
-        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 versions from March 2022 onwards. To resolve this error, please bundle and deploy again.`);
+    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.`);
     }
 };
 exports.setPropsAndEnv = setPropsAndEnv;

package/dist/stitch-frames-to-video.js

@@ -160,6 +160,7 @@ const spawnFfmpeg = async (options) => {
                 pixelFormat === 'yuva420p' ? ['-auto-alt-ref', '0'] : null,
                 ['-b:v', '1M'],
             ]),
+        codec === 'h264' ? ['-movflags', 'faststart'] : null,
         audioCodecName ? ['-c:a', audioCodecName] : null,
         // Ignore metadata that may come from remote media
         ['-map_metadata', '-1'],

package/dist/stringify-ffmpeg-filter.js

@@ -11,6 +11,7 @@ const stringifyFfmpegFilter = ({ trimLeft, trimRight, channels, startInVideo, vo
         volume,
         startInVideo,
         fps,
+        trimLeft,
     });
     // Avoid setting filters if possible, as combining them can create noise
     const chunkLength = durationInFrames / fps;
@@ -37,6 +38,8 @@ const stringifyFfmpegFilter = ({ trimLeft, trimRight, channels, startInVideo, vo
                     .fill((startInVideoSeconds * 1000).toFixed(0))
                     .join('|')}`,
             // set the volume if needed
+            // The timings for volume must include whatever is in atrim, unless the volume
+            // filter gets applied before atrim
             volumeFilter.value === '1'
                 ? null
                 : `volume=${volumeFilter.value}:eval=${volumeFilter.eval}`,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/renderer",
-	"version": "4.0.0-preload.13+f7b159495",
+	"version": "4.0.0-preload.17+14cd6033f",
 	"description": "Renderer for Remotion",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -20,10 +20,9 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"dependencies": {
-		"@remotion/bundler": "4.0.0-preload.13+f7b159495",
 		"execa": "5.1.1",
 		"puppeteer-core": "13.5.1",
-		"remotion": "4.0.0-preload.13+f7b159495",
+		"remotion": "4.0.0-preload.17+14cd6033f",
 		"serve-handler": "6.1.3",
 		"source-map": "^0.8.0-beta.0"
 	},
@@ -60,5 +59,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "f7b1594951e881444050f2f9d4af8d442bbec942"
+	"gitHead": "14cd6033f4ad0fa75af142d54a4cd1a23aff3f21"
 }