@remotion/media 4.0.394 → 4.0.396

package/dist/audio/audio-for-rendering.js

@@ -36,13 +36,6 @@ export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted
     useLayoutEffect(() => {
         const timestamp = frame / fps;
         const durationInSeconds = 1 / fps;
-        if (replaceWithHtml5Audio) {
-            return;
-        }
-        const newHandle = delayRender(`Extracting audio for frame ${frame}`, {
-            retries: delayRenderRetries ?? undefined,
-            timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined,
-        });
         const shouldRenderAudio = (() => {
             if (!audioEnabled) {
                 return false;
@@ -52,6 +45,16 @@ export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted
             }
             return true;
         })();
+        if (!shouldRenderAudio) {
+            return;
+        }
+        if (replaceWithHtml5Audio) {
+            return;
+        }
+        const newHandle = delayRender(`Extracting audio for frame ${frame}`, {
+            retries: delayRenderRetries ?? undefined,
+            timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined,
+        });
         extractFrameViaBroadcastChannel({
             src,
             timeInSeconds: timestamp,

package/dist/audio-for-rendering.d.ts

@@ -0,0 +1,3 @@
+import type React from 'react';
+import type { AudioProps } from './props';
+export declare const AudioForRendering: React.FC<AudioProps>;

package/dist/audio-for-rendering.js

@@ -0,0 +1,94 @@
+import { useContext, useLayoutEffect, useMemo, useState } from 'react';
+import { cancelRender, Internals, useCurrentFrame, useDelayRender, useRemotionEnvironment, } from 'remotion';
+import { extractFrameViaBroadcastChannel } from './extract-frame-via-broadcast-channel';
+export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted, loopVolumeCurveBehavior, delayRenderRetries, delayRenderTimeoutInMilliseconds, logLevel = window.remotion_logLevel, }) => {
+    const absoluteFrame = Internals.useTimelinePosition();
+    const videoConfig = Internals.useUnsafeVideoConfig();
+    const { registerRenderAsset, unregisterRenderAsset } = useContext(Internals.RenderAssetManager);
+    const frame = useCurrentFrame();
+    const volumePropsFrame = Internals.useFrameForVolumeProp(loopVolumeCurveBehavior ?? 'repeat');
+    const environment = useRemotionEnvironment();
+    const [id] = useState(() => `${Math.random()}`.replace('0.', ''));
+    if (!videoConfig) {
+        throw new Error('No video config found');
+    }
+    if (!src) {
+        throw new TypeError('No `src` was passed to <Video>.');
+    }
+    const volume = Internals.evaluateVolume({
+        volume: volumeProp,
+        frame: volumePropsFrame,
+        mediaVolume: 1,
+    });
+    Internals.warnAboutTooHighVolume(volume);
+    const shouldRenderAudio = useMemo(() => {
+        if (!window.remotion_audioEnabled) {
+            return false;
+        }
+        if (muted) {
+            return false;
+        }
+        if (volume <= 0) {
+            return false;
+        }
+        return true;
+    }, [muted, volume]);
+    const { fps } = videoConfig;
+    const { delayRender, continueRender } = useDelayRender();
+    useLayoutEffect(() => {
+        const actualFps = playbackRate ? fps / playbackRate : fps;
+        const timestamp = frame / actualFps;
+        const durationInSeconds = 1 / actualFps;
+        const newHandle = delayRender(`Extracting frame number ${frame}`, {
+            retries: delayRenderRetries ?? undefined,
+            timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined,
+        });
+        extractFrameViaBroadcastChannel({
+            src,
+            timeInSeconds: timestamp,
+            durationInSeconds,
+            logLevel: logLevel ?? 'info',
+            shouldRenderAudio,
+            isClientSideRendering: environment.isClientSideRendering,
+        })
+            .then(({ audio }) => {
+            if (audio) {
+                registerRenderAsset({
+                    type: 'inline-audio',
+                    id,
+                    audio: Array.from(audio.data),
+                    sampleRate: audio.sampleRate,
+                    numberOfChannels: audio.numberOfChannels,
+                    frame: absoluteFrame,
+                    timestamp: audio.timestamp,
+                    duration: (audio.numberOfFrames / audio.sampleRate) * 1000000,
+                });
+            }
+            continueRender(newHandle);
+        })
+            .catch((error) => {
+            cancelRender(error);
+        });
+        return () => {
+            continueRender(newHandle);
+            unregisterRenderAsset(id);
+        };
+    }, [
+        absoluteFrame,
+        continueRender,
+        delayRender,
+        delayRenderRetries,
+        delayRenderTimeoutInMilliseconds,
+        environment.isClientSideRendering,
+        fps,
+        frame,
+        id,
+        logLevel,
+        playbackRate,
+        registerRenderAsset,
+        shouldRenderAudio,
+        src,
+        unregisterRenderAsset,
+    ]);
+    return null;
+};

package/dist/audio.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { AudioProps } from './props';
+export declare const Audio: React.FC<AudioProps>;

package/dist/audio.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useContext } from 'react';
+import { cancelRender, Internals, Sequence, useRemotionEnvironment, } from 'remotion';
+import { SharedAudioContext } from '../../core/src/audio/shared-audio-tags';
+import { AudioForRendering } from './audio-for-rendering';
+const { validateMediaTrimProps, resolveTrimProps, validateMediaProps, AudioForPreview, } = Internals;
+export const Audio = (props) => {
+    const audioContext = useContext(SharedAudioContext);
+    // Should only destruct `trimBefore` and `trimAfter` from props,
+    // rest gets drilled down
+    const { trimBefore, trimAfter, name, pauseWhenBuffering, stack, showInTimeline, onError: onRemotionError, loop, ...otherProps } = props;
+    const environment = useRemotionEnvironment();
+    const onDuration = useCallback(() => undefined, []);
+    if (typeof props.src !== 'string') {
+        throw new TypeError(`The \`<Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
+    }
+    validateMediaTrimProps({
+        startFrom: undefined,
+        endAt: undefined,
+        trimBefore,
+        trimAfter,
+    });
+    const { trimBeforeValue, trimAfterValue } = resolveTrimProps({
+        startFrom: undefined,
+        endAt: undefined,
+        trimBefore,
+        trimAfter,
+    });
+    const onError = useCallback((e) => {
+        // eslint-disable-next-line no-console
+        console.log(e.currentTarget.error);
+        // If there is no `loop` property, we don't need to get the duration
+        // and this does not need to be a fatal error
+        const errMessage = `Could not play audio: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`;
+        if (loop) {
+            if (onRemotionError) {
+                onRemotionError(new Error(errMessage));
+                return;
+            }
+            cancelRender(new Error(errMessage));
+        }
+        else {
+            onRemotionError?.(new Error(errMessage));
+            // eslint-disable-next-line no-console
+            console.warn(errMessage);
+        }
+    }, [onRemotionError, loop]);
+    if (typeof trimBeforeValue !== 'undefined' ||
+        typeof trimAfterValue !== 'undefined') {
+        return (_jsx(Sequence, { layout: "none", from: 0 - (trimBeforeValue ?? 0), showInTimeline: false, durationInFrames: trimAfterValue, name: name, children: _jsx(Audio, { pauseWhenBuffering: pauseWhenBuffering ?? false, ...otherProps }) }));
+    }
+    validateMediaProps(props, 'Video');
+    if (environment.isRendering) {
+        return _jsx(AudioForRendering, { ...otherProps });
+    }
+    const { onAutoPlayError, crossOrigin, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...propsForPreview } = otherProps;
+    return (_jsx(AudioForPreview, { _remotionInternalNativeLoopPassed: props._remotionInternalNativeLoopPassed ?? false, _remotionInternalStack: stack ?? null, shouldPreMountAudioTags: audioContext !== null && audioContext.numberOfAudioTags > 0, ...propsForPreview, onNativeError: onError, onDuration: onDuration, 
+        // Proposal: Make this default to true in v5
+        pauseWhenBuffering: pauseWhenBuffering ?? false, _remotionInternalNeedsDurationCalculation: Boolean(loop), showInTimeline: showInTimeline ?? true }));
+};

package/dist/audiodata-to-array.js

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

package/dist/convert-audiodata/data-types.d.ts

@@ -0,0 +1 @@
+export declare const getDataTypeForAudioFormat: (format: AudioSampleFormat) => Float32ArrayConstructor | Int16ArrayConstructor | Uint8ArrayConstructor | Int32ArrayConstructor;

package/dist/convert-audiodata/data-types.js

@@ -0,0 +1,22 @@
+export const getDataTypeForAudioFormat = (format) => {
+    switch (format) {
+        case 'f32':
+            return Float32Array;
+        case 'f32-planar':
+            return Float32Array;
+        case 's16':
+            return Int16Array;
+        case 's16-planar':
+            return Int16Array;
+        case 'u8':
+            return Uint8Array;
+        case 'u8-planar':
+            return Uint8Array;
+        case 's32':
+            return Int32Array;
+        case 's32-planar':
+            return Int32Array;
+        default:
+            throw new Error(`Unsupported audio format: ${format}`);
+    }
+};

package/dist/convert-audiodata/is-planar-format.d.ts

@@ -0,0 +1 @@
+export declare const isPlanarFormat: (format: AudioSampleFormat) => boolean;

package/dist/convert-audiodata/is-planar-format.js

@@ -0,0 +1,3 @@
+export const isPlanarFormat = (format) => {
+    return format.includes('-planar');
+};

package/dist/convert-audiodata/log-audiodata.d.ts

@@ -0,0 +1 @@
+export declare const logAudioData: (audioData: AudioData) => string;

package/dist/convert-audiodata/log-audiodata.js

@@ -0,0 +1,8 @@
+export const logAudioData = (audioData) => {
+    const srcChannels = new Int16Array(audioData.numberOfFrames * audioData.numberOfChannels);
+    audioData.copyTo(srcChannels, {
+        planeIndex: 0,
+        format: 's16',
+    });
+    return srcChannels.slice(0, 10).join(',');
+};

package/dist/convert-audiodata/trim-audiodata.js

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

package/dist/deserialized-audiodata.d.ts

@@ -0,0 +1,15 @@
+import type { DataType } from './convert-audiodata/data-types';
+export type SerializableAudioData = {
+    data: DataType[];
+    format: AudioSampleFormat;
+    numberOfChannels: number;
+    numberOfFrames: number;
+    sampleRate: number;
+};
+export declare const turnAudioDataIntoSerializableData: (audioData: AudioData) => {
+    data: (Float32Array<ArrayBuffer> | Int32Array<ArrayBuffer> | Int16Array<ArrayBuffer> | Uint8Array<ArrayBuffer>)[];
+    format: AudioSampleFormat;
+    numberOfChannels: number;
+    numberOfFrames: number;
+    sampleRate: number;
+};

package/dist/deserialized-audiodata.js

@@ -0,0 +1,26 @@
+import { getDataTypeForAudioFormat } from './convert-audiodata/data-types';
+import { isPlanarFormat } from './convert-audiodata/is-planar-format';
+export const turnAudioDataIntoSerializableData = (audioData) => {
+    if (!audioData.format) {
+        throw new Error('AudioData format is not set');
+    }
+    const DataType = getDataTypeForAudioFormat(audioData.format);
+    const isPlanar = isPlanarFormat(audioData.format);
+    const planes = isPlanar ? audioData.numberOfChannels : 1;
+    const srcChannels = new Array(planes)
+        .fill(true)
+        .map(() => new DataType((isPlanar ? 1 : audioData.numberOfChannels) *
+        audioData.numberOfFrames));
+    for (let i = 0; i < planes; i++) {
+        audioData.copyTo(srcChannels[i], {
+            planeIndex: i,
+        });
+    }
+    return {
+        data: srcChannels,
+        format: audioData.format,
+        numberOfChannels: audioData.numberOfChannels,
+        numberOfFrames: audioData.numberOfFrames,
+        sampleRate: audioData.sampleRate,
+    };
+};

package/dist/esm/index.mjs

@@ -3387,8 +3387,26 @@ var extractFrameAndAudio = async ({
   }
 };
 
-// src/video-extraction/extract-frame-via-broadcast-channel.ts
-if (typeof window !== "undefined" && window.remotion_broadcastChannel && window.remotion_isMainTab) {
+// src/video-extraction/add-broadcast-channel-listener.ts
+var emitReadiness = (channel) => {
+  channel.postMessage({
+    type: "main-tab-ready"
+  });
+  let times = 0;
+  const interval = setInterval(() => {
+    channel.postMessage({
+      type: "main-tab-ready"
+    });
+    times++;
+    if (times > 30) {
+      clearInterval(interval);
+    }
+  }, 300);
+};
+var addBroadcastChannelListener = () => {
+  if (!(typeof window !== "undefined" && window.remotion_broadcastChannel && window.remotion_isMainTab)) {
+    return;
+  }
   window.remotion_broadcastChannel.addEventListener("message", async (event) => {
     const data = event.data;
     if (data.type === "request") {
@@ -3467,8 +3485,29 @@ if (typeof window !== "undefined" && window.remotion_broadcastChannel && window.
       throw new Error("Invalid message: " + JSON.stringify(data));
     }
   });
-}
-var extractFrameViaBroadcastChannel = ({
+  emitReadiness(window.remotion_broadcastChannel);
+};
+var mainTabIsReadyProm = null;
+var waitForMainTabToBeReady = (channel) => {
+  if (mainTabIsReadyProm) {
+    return mainTabIsReadyProm;
+  }
+  mainTabIsReadyProm = new Promise((resolve) => {
+    const onMessage = (event) => {
+      const data = event.data;
+      if (data.type === "main-tab-ready") {
+        resolve();
+        channel.removeEventListener("message", onMessage);
+      }
+    };
+    channel.addEventListener("message", onMessage);
+  });
+  return mainTabIsReadyProm;
+};
+
+// src/video-extraction/extract-frame-via-broadcast-channel.ts
+addBroadcastChannelListener();
+var extractFrameViaBroadcastChannel = async ({
   src,
   timeInSeconds,
   logLevel,
@@ -3501,6 +3540,7 @@ var extractFrameViaBroadcastChannel = ({
       maxCacheSize
     });
   }
+  await waitForMainTabToBeReady(window.remotion_broadcastChannel);
   const requestId = crypto.randomUUID();
   const resolvePromise = new Promise((resolve, reject) => {
     const onMessage = (event) => {
@@ -3508,6 +3548,9 @@ var extractFrameViaBroadcastChannel = ({
       if (!data) {
         return;
       }
+      if (data.type === "main-tab-ready") {
+        return;
+      }
       if (data.id !== requestId) {
         return;
       }
@@ -3637,13 +3680,6 @@ var AudioForRendering = ({
   useLayoutEffect2(() => {
     const timestamp = frame / fps;
     const durationInSeconds = 1 / fps;
-    if (replaceWithHtml5Audio) {
-      return;
-    }
-    const newHandle = delayRender(`Extracting audio for frame ${frame}`, {
-      retries: delayRenderRetries ?? undefined,
-      timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
-    });
     const shouldRenderAudio = (() => {
       if (!audioEnabled) {
         return false;
@@ -3653,6 +3689,16 @@ var AudioForRendering = ({
       }
       return true;
     })();
+    if (!shouldRenderAudio) {
+      return;
+    }
+    if (replaceWithHtml5Audio) {
+      return;
+    }
+    const newHandle = delayRender(`Extracting audio for frame ${frame}`, {
+      retries: delayRenderRetries ?? undefined,
+      timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
+    });
     extractFrameViaBroadcastChannel({
       src,
       timeInSeconds: timestamp,

package/dist/extract-audio.d.ts

@@ -0,0 +1,7 @@
+import type { PcmS16AudioData } from './convert-audiodata/convert-audiodata';
+export declare const extractAudio: ({ src, timeInSeconds, durationInSeconds, volume, }: {
+    src: string;
+    timeInSeconds: number;
+    durationInSeconds: number;
+    volume: number;
+}) => Promise<PcmS16AudioData | null>;

package/dist/extract-audio.js

@@ -0,0 +1,98 @@
+import { combineAudioDataAndClosePrevious } from './convert-audiodata/combine-audiodata';
+import { convertAudioData } from './convert-audiodata/convert-audiodata';
+import { TARGET_NUMBER_OF_CHANNELS, TARGET_SAMPLE_RATE, } from './convert-audiodata/resample-audiodata';
+import { sinkPromises } from './extract-frame';
+import { getSinks } from './video-extraction/get-frames-since-keyframe';
+export const extractAudio = async ({ src, timeInSeconds, durationInSeconds, volume, }) => {
+    console.time('extractAudio');
+    if (!sinkPromises[src]) {
+        sinkPromises[src] = getSinks(src);
+    }
+    const { audio, actualMatroskaTimestamps, isMatroska } = await sinkPromises[src];
+    if (audio === null) {
+        console.timeEnd('extractAudio');
+        return null;
+    }
+    // https://discord.com/channels/@me/1409810025844838481/1415028953093111870
+    // Audio frames might have dependencies on previous and next frames so we need to decode a bit more
+    // and then discard it.
+    // The worst case seems to be FLAC files with a 65'535 sample window, which would be 1486.0ms at 44.1Khz.
+    // So let's set a threshold of 1.5 seconds.
+    const extraThreshold = 1.5;
+    // Matroska timestamps are not accurate unless we start from the beginning
+    // So for matroska, we need to decode all samples :(
+    // https://github.com/Vanilagy/mediabunny/issues/105
+    const sampleIterator = audio.sampleSink.samples(isMatroska ? 0 : Math.max(0, timeInSeconds - extraThreshold), timeInSeconds + durationInSeconds);
+    const samples = [];
+    for await (const sample of sampleIterator) {
+        const realTimestamp = actualMatroskaTimestamps.getRealTimestamp(sample.timestamp);
+        if (realTimestamp !== null && realTimestamp !== sample.timestamp) {
+            sample.setTimestamp(realTimestamp);
+        }
+        actualMatroskaTimestamps.observeTimestamp(sample.timestamp);
+        actualMatroskaTimestamps.observeTimestamp(sample.timestamp + sample.duration);
+        if (sample.timestamp + sample.duration - 0.0000000001 <= timeInSeconds) {
+            continue;
+        }
+        if (sample.timestamp >= timeInSeconds + durationInSeconds - 0.0000000001) {
+            continue;
+        }
+        samples.push(sample);
+    }
+    const audioDataArray = [];
+    for (let i = 0; i < samples.length; i++) {
+        const sample = samples[i];
+        // Less than 1 sample would be included - we did not need it after all!
+        if (Math.abs(sample.timestamp - (timeInSeconds + durationInSeconds)) *
+            sample.sampleRate <
+            1) {
+            sample.close();
+            continue;
+        }
+        // Less than 1 sample would be included - we did not need it after all!
+        if (sample.timestamp + sample.duration <= timeInSeconds) {
+            sample.close();
+            continue;
+        }
+        const isFirstSample = i === 0;
+        const isLastSample = i === samples.length - 1;
+        const audioDataRaw = sample.toAudioData();
+        // amount of samples to shave from start and end
+        let trimStartInSeconds = 0;
+        let trimEndInSeconds = 0;
+        // TODO: Apply playback rate
+        // TODO: Apply tone frequency
+        if (isFirstSample) {
+            trimStartInSeconds = timeInSeconds - sample.timestamp;
+        }
+        if (isLastSample) {
+            trimEndInSeconds =
+                // clamp to 0 in case the audio ends early
+                Math.max(0, sample.timestamp +
+                    sample.duration -
+                    (timeInSeconds + durationInSeconds));
+        }
+        const audioData = convertAudioData({
+            audioData: audioDataRaw,
+            newSampleRate: TARGET_SAMPLE_RATE,
+            trimStartInSeconds,
+            trimEndInSeconds,
+            targetNumberOfChannels: TARGET_NUMBER_OF_CHANNELS,
+            volume,
+        });
+        audioDataRaw.close();
+        if (audioData.numberOfFrames === 0) {
+            sample.close();
+            continue;
+        }
+        audioDataArray.push(audioData);
+        sample.close();
+    }
+    if (audioDataArray.length === 0) {
+        console.timeEnd('extractAudio');
+        return null;
+    }
+    const combined = combineAudioDataAndClosePrevious(audioDataArray);
+    console.timeEnd('extractAudio');
+    return combined;
+};

package/dist/extract-frame-via-broadcast-channel.d.ts

@@ -0,0 +1,15 @@
+import type { PcmS16AudioData } from './convert-audiodata/convert-audiodata';
+import type { LogLevel } from './log';
+export declare const extractFrameViaBroadcastChannel: ({ src, timeInSeconds, logLevel, durationInSeconds, includeAudio, includeVideo, isClientSideRendering, volume, }: {
+    src: string;
+    timeInSeconds: number;
+    durationInSeconds: number;
+    logLevel: LogLevel;
+    includeAudio: boolean;
+    includeVideo: boolean;
+    isClientSideRendering: boolean;
+    volume: number;
+}) => Promise<{
+    frame: ImageBitmap | VideoFrame | null;
+    audio: PcmS16AudioData | null;
+}>;

package/dist/extract-frame-via-broadcast-channel.js

@@ -0,0 +1,104 @@
+import { extractFrameAndAudio } from './extract-frame-and-audio';
+// Doesn't exist in studio
+if (window.remotion_broadcastChannel && window.remotion_isMainTab) {
+    window.remotion_broadcastChannel.addEventListener('message', async (event) => {
+        const data = event.data;
+        if (data.type === 'request') {
+            try {
+                const { frame, audio } = await extractFrameAndAudio({
+                    src: data.src,
+                    timeInSeconds: data.timeInSeconds,
+                    logLevel: data.logLevel,
+                    durationInSeconds: data.durationInSeconds,
+                    includeAudio: data.includeAudio,
+                    includeVideo: data.includeVideo,
+                    volume: data.volume,
+                });
+                const videoFrame = frame;
+                const imageBitmap = videoFrame
+                    ? await createImageBitmap(videoFrame)
+                    : null;
+                if (videoFrame) {
+                    videoFrame.close();
+                }
+                const response = {
+                    type: 'response-success',
+                    id: data.id,
+                    frame: imageBitmap,
+                    audio,
+                };
+                window.remotion_broadcastChannel.postMessage(response);
+                videoFrame?.close();
+            }
+            catch (error) {
+                const response = {
+                    type: 'response-error',
+                    id: data.id,
+                    errorStack: error.stack ?? 'No stack trace',
+                };
+                window.remotion_broadcastChannel.postMessage(response);
+            }
+        }
+        else {
+            throw new Error('Invalid message: ' + JSON.stringify(data));
+        }
+    });
+}
+export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel, durationInSeconds, includeAudio, includeVideo, isClientSideRendering, volume, }) => {
+    if (isClientSideRendering || window.remotion_isMainTab) {
+        return extractFrameAndAudio({
+            logLevel,
+            src,
+            timeInSeconds,
+            durationInSeconds,
+            includeAudio,
+            includeVideo,
+            volume,
+        });
+    }
+    const requestId = crypto.randomUUID();
+    const resolvePromise = new Promise((resolve, reject) => {
+        const onMessage = (event) => {
+            const data = event.data;
+            if (!data) {
+                return;
+            }
+            if (data.type === 'response-success' && data.id === requestId) {
+                resolve({
+                    frame: data.frame ? data.frame : null,
+                    audio: data.audio ? data.audio : null,
+                });
+                window.remotion_broadcastChannel.removeEventListener('message', onMessage);
+            }
+            else if (data.type === 'response-error' && data.id === requestId) {
+                reject(data.errorStack);
+                window.remotion_broadcastChannel.removeEventListener('message', onMessage);
+            }
+        };
+        window.remotion_broadcastChannel.addEventListener('message', onMessage);
+    });
+    const request = {
+        type: 'request',
+        src,
+        timeInSeconds,
+        id: requestId,
+        logLevel,
+        durationInSeconds,
+        includeAudio,
+        includeVideo,
+        volume,
+    };
+    window.remotion_broadcastChannel.postMessage(request);
+    let timeoutId;
+    return Promise.race([
+        resolvePromise.then((res) => {
+            clearTimeout(timeoutId);
+            return res;
+        }),
+        new Promise((_, reject) => {
+            timeoutId = setTimeout(() => {
+                reject(new Error(`Timeout while extracting frame at time ${timeInSeconds}sec from ${src}`));
+            }, Math.max(3000, window.remotion_puppeteerTimeout - 5000));
+        }),
+    ]);
+};

package/dist/extract-frame.d.ts

@@ -0,0 +1,27 @@
+import type { LogLevel } from './log';
+import { type GetSink } from './video-extraction/get-frames-since-keyframe';
+export declare const keyframeManager: {
+    requestKeyframeBank: ({ packetSink, timestamp, videoSampleSink, src, logLevel, }: {
+        timestamp: number;
+        packetSink: import("mediabunny").EncodedPacketSink;
+        videoSampleSink: import("mediabunny").VideoSampleSink;
+        src: string;
+        logLevel: LogLevel;
+    }) => Promise<import("./video-extraction/keyframe-bank").KeyframeBank>;
+    addKeyframeBank: ({ src, bank, startTimestampInSeconds, }: {
+        src: string;
+        bank: Promise<import("./video-extraction/keyframe-bank").KeyframeBank>;
+        startTimestampInSeconds: number;
+    }) => void;
+    getCacheStats: () => Promise<{
+        count: number;
+        totalSize: number;
+    }>;
+    clearAll: () => Promise<void>;
+};
+export declare const sinkPromises: Record<string, Promise<GetSink>>;
+export declare const extractFrame: ({ src, timeInSeconds, logLevel, }: {
+    src: string;
+    timeInSeconds: number;
+    logLevel: LogLevel;
+}) => Promise<import("mediabunny").VideoSample | null>;