@remotion/media 4.0.390 → 4.0.392

package/dist/esm/index.mjs

@@ -49,6 +49,25 @@ var getTimeInSeconds = ({
   }
   return timeInSeconds + (trimBefore ?? 0) / fps;
 };
+var calculateEndTime = ({
+  mediaDurationInSeconds,
+  ifNoMediaDuration,
+  src,
+  trimAfter,
+  trimBefore,
+  fps
+}) => {
+  if (mediaDurationInSeconds === null && ifNoMediaDuration === "fail") {
+    throw new Error(`Could not determine duration of ${src}, but "loop" was set.`);
+  }
+  const mediaDuration = Internals.calculateMediaDuration({
+    trimAfter,
+    mediaDurationInFrames: mediaDurationInSeconds ? mediaDurationInSeconds * fps : Infinity,
+    playbackRate: 1,
+    trimBefore
+  }) / fps;
+  return mediaDuration + (trimBefore ?? 0) / fps;
+};
 
 // src/media-player.ts
 import { ALL_FORMATS, Input, UrlSource } from "mediabunny";
@@ -80,9 +99,9 @@ var allowWaitRoutine = async (next, waitFn) => {
 };
 
 // src/audio/audio-preview-iterator.ts
-var makeAudioIterator = (audioSink, startFromSecond) => {
+var makeAudioIterator = (startFromSecond, cache) => {
   let destroyed = false;
-  const iterator = audioSink.buffers(startFromSecond);
+  const iterator = cache.makeIteratorOrUsePrewarmed(startFromSecond);
   const queuedAudioNodes = [];
   const audioChunksForAfterResuming = [];
   let mostRecentTimestamp = -Infinity;
@@ -254,19 +273,83 @@ var isAlreadyQueued = (time, queuedPeriod) => {
   return time >= queuedPeriod.from && time < queuedPeriod.until;
 };
 
+// src/prewarm-iterator-for-looping.ts
+var makePrewarmedVideoIteratorCache = (videoSink) => {
+  const prewarmedVideoIterators = new Map;
+  const prewarmIteratorForLooping = ({ timeToSeek }) => {
+    if (!prewarmedVideoIterators.has(timeToSeek)) {
+      prewarmedVideoIterators.set(timeToSeek, videoSink.canvases(timeToSeek));
+    }
+  };
+  const makeIteratorOrUsePrewarmed = (timeToSeek) => {
+    const prewarmedIterator = prewarmedVideoIterators.get(timeToSeek);
+    if (prewarmedIterator) {
+      prewarmedVideoIterators.delete(timeToSeek);
+      return prewarmedIterator;
+    }
+    const iterator = videoSink.canvases(timeToSeek);
+    return iterator;
+  };
+  const destroy = () => {
+    for (const iterator of prewarmedVideoIterators.values()) {
+      iterator.return();
+    }
+    prewarmedVideoIterators.clear();
+  };
+  return {
+    prewarmIteratorForLooping,
+    makeIteratorOrUsePrewarmed,
+    destroy
+  };
+};
+var makePrewarmedAudioIteratorCache = (audioSink) => {
+  const prewarmedAudioIterators = new Map;
+  const prewarmIteratorForLooping = ({ timeToSeek }) => {
+    if (!prewarmedAudioIterators.has(timeToSeek)) {
+      prewarmedAudioIterators.set(timeToSeek, audioSink.buffers(timeToSeek));
+    }
+  };
+  const makeIteratorOrUsePrewarmed = (timeToSeek) => {
+    const prewarmedIterator = prewarmedAudioIterators.get(timeToSeek);
+    if (prewarmedIterator) {
+      prewarmedAudioIterators.delete(timeToSeek);
+      return prewarmedIterator;
+    }
+    const iterator = audioSink.buffers(timeToSeek);
+    return iterator;
+  };
+  const destroy = () => {
+    for (const iterator of prewarmedAudioIterators.values()) {
+      iterator.return();
+    }
+    prewarmedAudioIterators.clear();
+  };
+  return {
+    prewarmIteratorForLooping,
+    makeIteratorOrUsePrewarmed,
+    destroy
+  };
+};
+
 // src/audio-iterator-manager.ts
 var audioIteratorManager = ({
   audioTrack,
   delayPlaybackHandleIfNotPremounting,
-  sharedAudioContext
+  sharedAudioContext,
+  getIsLooping,
+  getEndTime,
+  getStartTime,
+  updatePlaybackTime
 }) => {
   let muted = false;
   let currentVolume = 1;
   const gainNode = sharedAudioContext.createGain();
   gainNode.connect(sharedAudioContext.destination);
   const audioSink = new AudioBufferSink(audioTrack);
+  const prewarmedAudioIteratorCache = makePrewarmedAudioIteratorCache(audioSink);
   let audioBufferIterator = null;
   let audioIteratorsCreated = 0;
+  let currentDelayHandle = null;
   const scheduleAudioChunk = ({
     buffer,
     mediaTimestamp,
@@ -316,24 +399,23 @@ var audioIteratorManager = ({
     getIsPlaying,
     scheduleAudioNode
   }) => {
+    updatePlaybackTime(startFromSecond);
     audioBufferIterator?.destroy();
     const delayHandle = delayPlaybackHandleIfNotPremounting();
-    const iterator = makeAudioIterator(audioSink, startFromSecond);
+    currentDelayHandle = delayHandle;
+    const iterator = makeAudioIterator(startFromSecond, prewarmedAudioIteratorCache);
     audioIteratorsCreated++;
     audioBufferIterator = iterator;
     try {
       for (let i = 0;i < 3; i++) {
         const result = await iterator.getNext();
         if (iterator.isDestroyed()) {
-          delayHandle.unblock();
           return;
         }
         if (nonce.isStale()) {
-          delayHandle.unblock();
           return;
         }
         if (!result.value) {
-          delayHandle.unblock();
           return;
         }
         onAudioChunk({
@@ -350,6 +432,7 @@ var audioIteratorManager = ({
       throw e;
     } finally {
       delayHandle.unblock();
+      currentDelayHandle = null;
     }
   };
   const pausePlayback = () => {
@@ -367,6 +450,13 @@ var audioIteratorManager = ({
     scheduleAudioNode,
     bufferState
   }) => {
+    if (getIsLooping()) {
+      if (getEndTime() - newTime < 1) {
+        prewarmedAudioIteratorCache.prewarmIteratorForLooping({
+          timeToSeek: getStartTime()
+        });
+      }
+    }
     if (!audioBufferIterator) {
       await startAudioIterator({
         nonce,
@@ -467,8 +557,13 @@ var audioIteratorManager = ({
     pausePlayback,
     getAudioBufferIterator: () => audioBufferIterator,
     destroyIterator: () => {
+      prewarmedAudioIteratorCache.destroy();
       audioBufferIterator?.destroy();
       audioBufferIterator = null;
+      if (currentDelayHandle) {
+        currentDelayHandle.unblock();
+        currentDelayHandle = null;
+      }
     },
     seek,
     getAudioIteratorsCreated: () => audioIteratorsCreated,
@@ -570,9 +665,9 @@ import { CanvasSink } from "mediabunny";
 import { Internals as Internals2 } from "remotion";
 
 // src/video/video-preview-iterator.ts
-var createVideoIterator = (timeToSeek, videoSink) => {
+var createVideoIterator = (timeToSeek, cache) => {
   let destroyed = false;
-  const iterator = videoSink.canvases(timeToSeek);
+  const iterator = cache.makeIteratorOrUsePrewarmed(timeToSeek);
   let lastReturnedFrame = null;
   let iteratorEnded = false;
   const getNextOrNullIfNotAvailable = async () => {
@@ -700,11 +795,15 @@ var videoIteratorManager = ({
   drawDebugOverlay,
   logLevel,
   getOnVideoFrameCallback,
-  videoTrack
+  videoTrack,
+  getEndTime,
+  getStartTime,
+  getIsLooping
 }) => {
   let videoIteratorsCreated = 0;
   let videoFrameIterator = null;
   let framesRendered = 0;
+  let currentDelayHandle = null;
   if (canvas) {
     canvas.width = videoTrack.displayWidth;
     canvas.height = videoTrack.displayHeight;
@@ -714,6 +813,7 @@ var videoIteratorManager = ({
     fit: "contain",
     alpha: true
   });
+  const prewarmedVideoIteratorCache = makePrewarmedVideoIteratorCache(canvasSink);
   const drawFrame = (frame) => {
     if (context && canvas) {
       context.clearRect(0, 0, canvas.width, canvas.height);
@@ -729,12 +829,18 @@ var videoIteratorManager = ({
   };
   const startVideoIterator = async (timeToSeek, nonce) => {
     videoFrameIterator?.destroy();
-    const iterator = createVideoIterator(timeToSeek, canvasSink);
+    const iterator = createVideoIterator(timeToSeek, prewarmedVideoIteratorCache);
     videoIteratorsCreated++;
     videoFrameIterator = iterator;
     const delayHandle = delayPlaybackHandleIfNotPremounting();
-    const frameResult = await iterator.getNext();
-    delayHandle.unblock();
+    currentDelayHandle = delayHandle;
+    let frameResult;
+    try {
+      frameResult = await iterator.getNext();
+    } finally {
+      delayHandle.unblock();
+      currentDelayHandle = null;
+    }
     if (iterator.isDestroyed()) {
       return;
     }
@@ -753,6 +859,13 @@ var videoIteratorManager = ({
     if (!videoFrameIterator) {
       return;
     }
+    if (getIsLooping()) {
+      if (getEndTime() - newTime < 1) {
+        prewarmedVideoIteratorCache.prewarmIteratorForLooping({
+          timeToSeek: getStartTime()
+        });
+      }
+    }
     const videoSatisfyResult = await videoFrameIterator.tryToSatisfySeek(newTime);
     if (videoSatisfyResult.type === "satisfied") {
       drawFrame(videoSatisfyResult.frame);
@@ -768,10 +881,15 @@ var videoIteratorManager = ({
     getVideoIteratorsCreated: () => videoIteratorsCreated,
     seek,
     destroy: () => {
+      prewarmedVideoIteratorCache.destroy();
       videoFrameIterator?.destroy();
       if (context && canvas) {
         context.clearRect(0, 0, canvas.width, canvas.height);
       }
+      if (currentDelayHandle) {
+        currentDelayHandle.unblock();
+        currentDelayHandle = null;
+      }
       videoFrameIterator = null;
     },
     getVideoFrameIterator: () => videoFrameIterator,
@@ -823,7 +941,8 @@ class MediaPlayer {
     bufferState,
     isPremounting,
     isPostmounting,
-    onVideoFrameCallback
+    onVideoFrameCallback,
+    playing
   }) {
     this.canvas = canvas ?? null;
     this.src = src;
@@ -842,6 +961,7 @@ class MediaPlayer {
     this.isPostmounting = isPostmounting;
     this.nonceManager = makeNonceManager();
     this.onVideoFrameCallback = onVideoFrameCallback;
+    this.playing = playing;
     this.input = new Input({
       source: new UrlSource(this.src),
       formats: ALL_FORMATS
@@ -866,9 +986,24 @@ class MediaPlayer {
   initialize(startTimeUnresolved) {
     const promise = this._initialize(startTimeUnresolved);
     this.initializationPromise = promise;
+    this.seekPromiseChain = promise;
     return promise;
   }
+  getStartTime() {
+    return (this.trimBefore ?? 0) / this.fps;
+  }
+  getEndTime() {
+    return calculateEndTime({
+      mediaDurationInSeconds: this.totalDuration,
+      ifNoMediaDuration: "fail",
+      src: this.src,
+      trimAfter: this.trimAfter,
+      trimBefore: this.trimBefore,
+      fps: this.fps
+    });
+  }
   async _initialize(startTimeUnresolved) {
+    const delayHandle = this.delayPlaybackHandleIfNotPremounting();
     try {
       if (this.input.disposed) {
         return { type: "disposed" };
@@ -914,7 +1049,10 @@ class MediaPlayer {
           canvas: this.canvas,
           getOnVideoFrameCallback: () => this.onVideoFrameCallback,
           logLevel: this.logLevel,
-          drawDebugOverlay: this.drawDebugOverlay
+          drawDebugOverlay: this.drawDebugOverlay,
+          getEndTime: () => this.getEndTime(),
+          getStartTime: () => this.getStartTime(),
+          getIsLooping: () => this.loop
         });
       }
       const startTime = getTimeInSeconds({
@@ -936,21 +1074,25 @@ class MediaPlayer {
         this.audioIteratorManager = audioIteratorManager({
           audioTrack,
           delayPlaybackHandleIfNotPremounting: this.delayPlaybackHandleIfNotPremounting,
-          sharedAudioContext: this.sharedAudioContext
+          sharedAudioContext: this.sharedAudioContext,
+          getIsLooping: () => this.loop,
+          getEndTime: () => this.getEndTime(),
+          getStartTime: () => this.getStartTime(),
+          updatePlaybackTime: (time) => this.setPlaybackTime(time, this.playbackRate * this.globalPlaybackRate)
         });
       }
       const nonce = this.nonceManager.createAsyncOperation();
       try {
-        if (this.audioIteratorManager) {
-          this.audioIteratorManager.startAudioIterator({
+        await Promise.all([
+          this.audioIteratorManager ? this.audioIteratorManager.startAudioIterator({
             nonce,
             playbackRate: this.playbackRate * this.globalPlaybackRate,
             startFromSecond: startTime,
             getIsPlaying: () => this.playing,
             scheduleAudioNode: this.scheduleAudioNode
-          });
-        }
-        await this.videoIteratorManager?.startVideoIterator(startTime, nonce);
+          }) : Promise.resolve(),
+          this.videoIteratorManager ? this.videoIteratorManager.startVideoIterator(startTime, nonce) : Promise.resolve()
+        ]);
       } catch (error) {
         if (this.isDisposalError()) {
           return { type: "disposed" };
@@ -966,6 +1108,8 @@ class MediaPlayer {
       }
       Internals3.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to initialize", error);
       throw error;
+    } finally {
+      delayHandle.unblock();
     }
   }
   async seekTo(time) {
@@ -1013,6 +1157,9 @@ class MediaPlayer {
     ]);
   }
   async play(time) {
+    if (this.playing) {
+      return;
+    }
     const newTime = getTimeInSeconds({
       unloopedTimeInSeconds: time,
       playbackRate: this.playbackRate,
@@ -1049,6 +1196,9 @@ class MediaPlayer {
     return this.bufferState.delayPlayback();
   };
   pause() {
+    if (!this.playing) {
+      return;
+    }
     this.playing = false;
     this.audioIteratorManager?.pausePlayback();
     this.drawDebugOverlay();
@@ -1083,12 +1233,16 @@ class MediaPlayer {
     this.audioIteratorManager?.destroyIterator();
   }
   setTrimBefore(trimBefore, unloopedTimeInSeconds) {
-    this.trimBefore = trimBefore;
-    this.updateAfterTrimChange(unloopedTimeInSeconds);
+    if (this.trimBefore !== trimBefore) {
+      this.trimBefore = trimBefore;
+      this.updateAfterTrimChange(unloopedTimeInSeconds);
+    }
   }
   setTrimAfter(trimAfter, unloopedTimeInSeconds) {
-    this.trimAfter = trimAfter;
-    this.updateAfterTrimChange(unloopedTimeInSeconds);
+    if (this.trimAfter !== trimAfter) {
+      this.trimAfter = trimAfter;
+      this.updateAfterTrimChange(unloopedTimeInSeconds);
+    }
   }
   setDebugOverlay(debugOverlay) {
     this.debugOverlay = debugOverlay;
@@ -1439,6 +1593,7 @@ var AudioForPreviewAssertedShowing = ({
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
   const isPlayerBuffering = Internals6.useIsPlayerBuffering(bufferingContext);
+  const initialPlaying = useRef(playing && !isPlayerBuffering);
   const initialIsPremounting = useRef(isPremounting);
   const initialIsPostmounting = useRef(isPostmounting);
   const initialGlobalPlaybackRate = useRef(globalPlaybackRate);
@@ -1465,7 +1620,8 @@ var AudioForPreviewAssertedShowing = ({
         isPostmounting: initialIsPostmounting.current,
         isPremounting: initialIsPremounting.current,
         globalPlaybackRate: initialGlobalPlaybackRate.current,
-        onVideoFrameCallback: null
+        onVideoFrameCallback: null,
+        playing: initialPlaying.current
       });
       mediaPlayerRef.current = player;
       player.initialize(currentTimeRef.current).then((result) => {
@@ -3778,6 +3934,7 @@ var VideoForPreviewAssertedShowing = ({
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
   const isPlayerBuffering = Internals15.useIsPlayerBuffering(buffering);
+  const initialPlaying = useRef2(playing && !isPlayerBuffering);
   const initialIsPremounting = useRef2(isPremounting);
   const initialIsPostmounting = useRef2(isPostmounting);
   const initialGlobalPlaybackRate = useRef2(globalPlaybackRate);
@@ -3804,7 +3961,8 @@ var VideoForPreviewAssertedShowing = ({
         isPremounting: initialIsPremounting.current,
         isPostmounting: initialIsPostmounting.current,
         globalPlaybackRate: initialGlobalPlaybackRate.current,
-        onVideoFrameCallback: initialOnVideoFrameRef.current ?? null
+        onVideoFrameCallback: initialOnVideoFrameRef.current ?? null,
+        playing: initialPlaying.current
       });
       mediaPlayerRef.current = player;
       player.initialize(currentTimeRef.current).then((result) => {

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>;