@remotion/renderer 3.0.8 → 3.0.11

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/index.js

@@ -0,0 +1 @@
+"use strict";

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;