@remotion/media 4.0.401 → 4.0.403

package/dist/extract-frame-and-audio.js

@@ -4,7 +4,7 @@ import { extractFrame } from './video-extraction/extract-frame';
 import { rotateFrame } from './video-extraction/rotate-frame';
 export const extractFrameAndAudio = async ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, loop, audioStreamIndex, trimAfter, trimBefore, fps, maxCacheSize, }) => {
     try {
-        const [frame, audio] = await Promise.all([
+        const [video, audio] = await Promise.all([
             includeVideo
                 ? extractFrame({
                     src,
@@ -34,59 +34,44 @@ export const extractFrameAndAudio = async ({ src, timeInSeconds, logLevel, durat
                 })
                 : null,
         ]);
-        if (frame?.type === 'cannot-decode') {
+        if (video?.type === 'cannot-decode') {
             return {
                 type: 'cannot-decode',
-                durationInSeconds: frame.durationInSeconds,
+                durationInSeconds: video.durationInSeconds,
             };
         }
-        if (frame?.type === 'unknown-container-format') {
+        if (video?.type === 'unknown-container-format') {
             return { type: 'unknown-container-format' };
         }
-        if (frame?.type === 'cannot-decode-alpha') {
+        if (video?.type === 'cannot-decode-alpha') {
             return {
                 type: 'cannot-decode-alpha',
-                durationInSeconds: frame.durationInSeconds,
+                durationInSeconds: video.durationInSeconds,
             };
         }
-        if (frame?.type === 'network-error') {
+        if (video?.type === 'network-error') {
             return { type: 'network-error' };
         }
         if (audio === 'unknown-container-format') {
-            if (frame !== null) {
-                frame?.frame?.close();
-            }
             return { type: 'unknown-container-format' };
         }
         if (audio === 'network-error') {
-            if (frame !== null) {
-                frame?.frame?.close();
-            }
             return { type: 'network-error' };
         }
         if (audio === 'cannot-decode') {
-            if (frame?.type === 'success' && frame.frame !== null) {
-                frame?.frame.close();
-            }
             return {
                 type: 'cannot-decode',
-                durationInSeconds: frame?.type === 'success' ? frame.durationInSeconds : null,
-            };
-        }
-        if (!frame?.frame) {
-            return {
-                type: 'success',
-                frame: null,
-                audio: audio?.data ?? null,
-                durationInSeconds: audio?.durationInSeconds ?? null,
+                durationInSeconds: video?.type === 'success' ? video.durationInSeconds : null,
             };
         }
         return {
             type: 'success',
-            frame: await rotateFrame({
-                frame: frame.frame.toVideoFrame(),
-                rotation: frame.frame.rotation,
-            }),
+            frame: video?.sample
+                ? await rotateFrame({
+                    frame: video.sample.toVideoFrame(),
+                    rotation: video.sample.rotation,
+                })
+                : null,
             audio: audio?.data ?? null,
             durationInSeconds: audio?.durationInSeconds ?? null,
         };

package/dist/media-player.d.ts

@@ -46,7 +46,7 @@ export declare class MediaPlayer {
         canvas: HTMLCanvasElement | OffscreenCanvas | null;
         src: string;
         logLevel: LogLevel;
-        sharedAudioContext: AudioContext;
+        sharedAudioContext: AudioContext | null;
         loop: boolean;
         trimBefore: number | undefined;
         trimAfter: number | undefined;
@@ -78,7 +78,7 @@ export declare class MediaPlayer {
     setTrimBefore(trimBefore: number | undefined, unloopedTimeInSeconds: number): void;
     setTrimAfter(trimAfter: number | undefined, unloopedTimeInSeconds: number): void;
     setDebugOverlay(debugOverlay: boolean): void;
-    private updateAfterPlaybackRateChange;
+    private updateAudioTimeAfterPlaybackRateChange;
     setPlaybackRate(rate: number): void;
     setGlobalPlaybackRate(rate: number): void;
     setFps(fps: number): void;
@@ -87,7 +87,7 @@ export declare class MediaPlayer {
     setLoop(loop: boolean): void;
     dispose(): Promise<void>;
     private scheduleAudioNode;
-    private getPlaybackTime;
+    private getAudioPlaybackTime;
     private setPlaybackTime;
     setVideoFrameCallback(callback: null | ((frame: CanvasImageSource) => void)): void;
     private drawDebugOverlay;

package/dist/media-player.js

@@ -29,9 +29,12 @@ export class MediaPlayer {
             return this.bufferState.delayPlayback();
         };
         this.scheduleAudioNode = (node, mediaTimestamp) => {
-            const currentTime = this.getPlaybackTime();
+            const currentTime = this.getAudioPlaybackTime();
             const delayWithoutPlaybackRate = mediaTimestamp - currentTime;
             const delay = delayWithoutPlaybackRate / (this.playbackRate * this.globalPlaybackRate);
+            if (!this.sharedAudioContext) {
+                throw new Error('Shared audio context not found');
+            }
             if (delay >= 0) {
                 node.start(this.sharedAudioContext.currentTime + delay);
             }
@@ -45,8 +48,8 @@ export class MediaPlayer {
             if (this.context && this.canvas) {
                 drawPreviewOverlay({
                     context: this.context,
-                    audioTime: this.sharedAudioContext.currentTime,
-                    audioContextState: this.sharedAudioContext.state,
+                    audioTime: this.sharedAudioContext?.currentTime ?? null,
+                    audioContextState: this.sharedAudioContext?.state ?? null,
                     audioSyncAnchor: this.audioSyncAnchor,
                     audioIteratorManager: this.audioIteratorManager,
                     playing: this.playing,
@@ -56,7 +59,7 @@ export class MediaPlayer {
         };
         this.canvas = canvas ?? null;
         this.src = src;
-        this.logLevel = logLevel ?? window.remotion_logLevel;
+        this.logLevel = logLevel;
         this.sharedAudioContext = sharedAudioContext;
         this.playbackRate = playbackRate;
         this.globalPlaybackRate = globalPlaybackRate;
@@ -181,7 +184,7 @@ export class MediaPlayer {
                 throw new Error(`should have asserted that the time is not null`);
             }
             this.setPlaybackTime(startTime, this.playbackRate * this.globalPlaybackRate);
-            if (audioTrack) {
+            if (audioTrack && this.sharedAudioContext) {
                 this.audioIteratorManager = audioIteratorManager({
                     audioTrack,
                     delayPlaybackHandleIfNotPremounting: this.delayPlaybackHandleIfNotPremounting,
@@ -254,24 +257,25 @@ export class MediaPlayer {
         if (nonce.isStale()) {
             return;
         }
-        const currentPlaybackTime = this.getPlaybackTime();
-        if (currentPlaybackTime === newTime) {
-            return;
-        }
+        const shouldSeekAudio = this.audioIteratorManager &&
+            this.sharedAudioContext &&
+            this.getAudioPlaybackTime() !== newTime;
         await Promise.all([
             this.videoIteratorManager?.seek({
                 newTime,
                 nonce,
             }),
-            this.audioIteratorManager?.seek({
-                newTime,
-                nonce,
-                fps: this.fps,
-                playbackRate: this.playbackRate * this.globalPlaybackRate,
-                getIsPlaying: () => this.playing,
-                scheduleAudioNode: this.scheduleAudioNode,
-                bufferState: this.bufferState,
-            }),
+            shouldSeekAudio
+                ? this.audioIteratorManager?.seek({
+                    newTime,
+                    nonce,
+                    fps: this.fps,
+                    playbackRate: this.playbackRate * this.globalPlaybackRate,
+                    getIsPlaying: () => this.playing,
+                    scheduleAudioNode: this.scheduleAudioNode,
+                    bufferState: this.bufferState,
+                })
+                : null,
         ]);
     }
     async play(time) {
@@ -300,7 +304,8 @@ export class MediaPlayer {
                 scheduleAudioNode: this.scheduleAudioNode,
             });
         }
-        if (this.sharedAudioContext.state === 'suspended') {
+        if (this.sharedAudioContext &&
+            this.sharedAudioContext.state === 'suspended') {
             await this.sharedAudioContext.resume();
         }
         this.drawDebugOverlay();
@@ -359,11 +364,14 @@ export class MediaPlayer {
     setDebugOverlay(debugOverlay) {
         this.debugOverlay = debugOverlay;
     }
-    updateAfterPlaybackRateChange() {
+    updateAudioTimeAfterPlaybackRateChange() {
         if (!this.audioIteratorManager) {
             return;
         }
-        this.setPlaybackTime(this.getPlaybackTime(), this.playbackRate * this.globalPlaybackRate);
+        if (!this.sharedAudioContext) {
+            return;
+        }
+        this.setPlaybackTime(this.getAudioPlaybackTime(), this.playbackRate * this.globalPlaybackRate);
         const iterator = this.audioIteratorManager.getAudioBufferIterator();
         if (!iterator) {
             return;
@@ -378,11 +386,11 @@ export class MediaPlayer {
     }
     setPlaybackRate(rate) {
         this.playbackRate = rate;
-        this.updateAfterPlaybackRateChange();
+        this.updateAudioTimeAfterPlaybackRateChange();
     }
     setGlobalPlaybackRate(rate) {
         this.globalPlaybackRate = rate;
-        this.updateAfterPlaybackRateChange();
+        this.updateAudioTimeAfterPlaybackRateChange();
     }
     setFps(fps) {
         this.fps = fps;
@@ -414,7 +422,10 @@ export class MediaPlayer {
         this.audioIteratorManager?.destroyIterator();
         this.input.dispose();
     }
-    getPlaybackTime() {
+    getAudioPlaybackTime() {
+        if (!this.sharedAudioContext) {
+            throw new Error('Shared audio context not found');
+        }
         return calculatePlaybackTime({
             audioSyncAnchor: this.audioSyncAnchor,
             currentTime: this.sharedAudioContext.currentTime,
@@ -422,6 +433,9 @@ export class MediaPlayer {
         });
     }
     setPlaybackTime(time, playbackRate) {
+        if (!this.sharedAudioContext) {
+            return;
+        }
         this.audioSyncAnchor =
             this.sharedAudioContext.currentTime - time / playbackRate;
     }

package/dist/video/video-for-preview.js

@@ -79,8 +79,6 @@ const VideoForPreviewAssertedShowing = ({ src: unpreloadedSrc, style, playbackRa
     useEffect(() => {
         if (!sharedAudioContext)
             return;
-        if (!sharedAudioContext.audioContext)
-            return;
         try {
             const player = new MediaPlayer({
                 canvas: canvasRef.current,

package/dist/video/video.js

@@ -27,9 +27,7 @@ const InnerVideo = ({ src, audioStreamIndex, className, delayRenderRetries, dela
     return (_jsx(VideoForPreview, { audioStreamIndex: audioStreamIndex ?? 0, className: className, name: name, logLevel: logLevel, loop: loop, loopVolumeCurveBehavior: loopVolumeCurveBehavior, muted: muted, onVideoFrame: onVideoFrame, playbackRate: playbackRate, src: src, style: style, volume: volume, showInTimeline: showInTimeline, trimAfter: trimAfterValue, trimBefore: trimBeforeValue, stack: stack ?? null, disallowFallbackToOffthreadVideo: disallowFallbackToOffthreadVideo, fallbackOffthreadVideoProps: fallbackOffthreadVideoProps, debugOverlay: debugOverlay ?? false, headless: headless ?? false }));
 };
 export const Video = ({ src, audioStreamIndex, className, delayRenderRetries, delayRenderTimeoutInMilliseconds, disallowFallbackToOffthreadVideo, fallbackOffthreadVideoProps, logLevel, loop, loopVolumeCurveBehavior, muted, name, onVideoFrame, playbackRate, showInTimeline, style, trimAfter, trimBefore, volume, stack, toneFrequency, debugOverlay, headless, }) => {
-    return (_jsx(InnerVideo, { audioStreamIndex: audioStreamIndex ?? 0, className: className, delayRenderRetries: delayRenderRetries ?? null, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? null, disallowFallbackToOffthreadVideo: disallowFallbackToOffthreadVideo ?? false, fallbackOffthreadVideoProps: fallbackOffthreadVideoProps ?? {}, logLevel: logLevel ??
-            (typeof window !== 'undefined'
-                ? (window.remotion_logLevel ?? 'info')
-                : 'info'), loop: loop ?? false, loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? 'repeat', muted: muted ?? false, name: name, onVideoFrame: onVideoFrame, playbackRate: playbackRate ?? 1, showInTimeline: showInTimeline ?? true, src: src, style: style ?? {}, trimAfter: trimAfter, trimBefore: trimBefore, volume: volume ?? 1, toneFrequency: toneFrequency ?? 1, stack: stack, debugOverlay: debugOverlay ?? false, headless: headless ?? false }));
+    const fallbackLogLevel = Internals.useLogLevel();
+    return (_jsx(InnerVideo, { audioStreamIndex: audioStreamIndex ?? 0, className: className, delayRenderRetries: delayRenderRetries ?? null, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? null, disallowFallbackToOffthreadVideo: disallowFallbackToOffthreadVideo ?? false, fallbackOffthreadVideoProps: fallbackOffthreadVideoProps ?? {}, logLevel: logLevel ?? fallbackLogLevel, loop: loop ?? false, loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? 'repeat', muted: muted ?? false, name: name, onVideoFrame: onVideoFrame, playbackRate: playbackRate ?? 1, showInTimeline: showInTimeline ?? true, src: src, style: style ?? {}, trimAfter: trimAfter, trimBefore: trimBefore, volume: volume ?? 1, toneFrequency: toneFrequency ?? 1, stack: stack, debugOverlay: debugOverlay ?? false, headless: headless ?? false }));
 };
 Internals.addSequenceStackTraces(Video);

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

@@ -2,7 +2,7 @@ import type { VideoSample } from 'mediabunny';
 import { type LogLevel } from 'remotion';
 type ExtractFrameResult = {
     type: 'success';
-    frame: VideoSample | null;
+    sample: VideoSample | null;
     durationInSeconds: number | null;
 } | {
     type: 'cannot-decode';

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

@@ -23,6 +23,12 @@ const extractFrameInternal = async ({ src, timeInSeconds: unloopedTimeInSeconds,
     if (video === 'network-error') {
         return { type: 'network-error' };
     }
+    if (video === 'cannot-decode-alpha') {
+        return {
+            type: 'cannot-decode-alpha',
+            durationInSeconds: mediaDurationInSeconds,
+        };
+    }
     const timeInSeconds = getTimeInSeconds({
         loop,
         mediaDurationInSeconds,
@@ -37,7 +43,7 @@ const extractFrameInternal = async ({ src, timeInSeconds: unloopedTimeInSeconds,
     if (timeInSeconds === null) {
         return {
             type: 'success',
-            frame: null,
+            sample: null,
             durationInSeconds: await sink.getDuration(),
         };
     }
@@ -46,30 +52,23 @@ const extractFrameInternal = async ({ src, timeInSeconds: unloopedTimeInSeconds,
     // Should be able to remove once upgraded to Chrome 145
     try {
         const keyframeBank = await keyframeManager.requestKeyframeBank({
-            packetSink: video.packetSink,
             videoSampleSink: video.sampleSink,
             timestamp: timeInSeconds,
             src,
             logLevel,
             maxCacheSize,
         });
-        if (keyframeBank === 'has-alpha') {
-            return {
-                type: 'cannot-decode-alpha',
-                durationInSeconds: await sink.getDuration(),
-            };
-        }
         if (!keyframeBank) {
             return {
                 type: 'success',
-                frame: null,
+                sample: null,
                 durationInSeconds: await sink.getDuration(),
             };
         }
         const frame = await keyframeBank.getFrameFromTimestamp(timeInSeconds);
         return {
             type: 'success',
-            frame,
+            sample: frame,
             durationInSeconds: await sink.getDuration(),
         };
     }

package/dist/video-extraction/get-frames-since-keyframe.d.ts

@@ -1,15 +1,12 @@
-import type { EncodedPacket } from 'mediabunny';
-import { AudioSampleSink, EncodedPacketSink, VideoSampleSink } from 'mediabunny';
-import type { LogLevel } from 'remotion';
+import { AudioSampleSink, VideoSampleSink } from 'mediabunny';
 type VideoSinks = {
     sampleSink: VideoSampleSink;
-    packetSink: EncodedPacketSink;
 };
 type AudioSinks = {
     sampleSink: AudioSampleSink;
 };
 export type AudioSinkResult = AudioSinks | 'no-audio-track' | 'cannot-decode-audio' | 'unknown-container-format' | 'network-error';
-export type VideoSinkResult = VideoSinks | 'no-video-track' | 'cannot-decode' | 'unknown-container-format' | 'network-error';
+export type VideoSinkResult = VideoSinks | 'no-video-track' | 'cannot-decode' | 'cannot-decode-alpha' | 'unknown-container-format' | 'network-error';
 export declare const getSinks: (src: string) => Promise<{
     getVideo: () => Promise<VideoSinkResult>;
     getAudio: (index: number) => Promise<AudioSinkResult>;
@@ -21,11 +18,4 @@ export declare const getSinks: (src: string) => Promise<{
     getDuration: () => Promise<number>;
 }>;
 export type GetSink = Awaited<ReturnType<typeof getSinks>>;
-export declare const getFramesSinceKeyframe: ({ packetSink, videoSampleSink, startPacket, logLevel, src, }: {
-    packetSink: EncodedPacketSink;
-    videoSampleSink: VideoSampleSink;
-    startPacket: EncodedPacket;
-    logLevel: LogLevel;
-    src: string;
-}) => Promise<import("./keyframe-bank").KeyframeBank>;
 export {};

package/dist/video-extraction/get-frames-since-keyframe.js

@@ -1,6 +1,6 @@
 import { ALL_FORMATS, AudioSampleSink, EncodedPacketSink, Input, MATROSKA, UrlSource, VideoSampleSink, WEBM, } from 'mediabunny';
+import { canBrowserUseWebGl2 } from '../browser-can-use-webgl2';
 import { isNetworkError } from '../is-type-of-error';
-import { makeKeyframeBank } from './keyframe-bank';
 import { rememberActualMatroskaTimestamps } from './remember-actual-matroska-timestamps';
 const getRetryDelay = (() => {
     return null;
@@ -40,9 +40,20 @@ export const getSinks = async (src) => {
         if (!canDecode) {
             return 'cannot-decode';
         }
+        const sampleSink = new VideoSampleSink(videoTrack);
+        const packetSink = new EncodedPacketSink(videoTrack);
+        // Try to get the keypacket at the requested timestamp.
+        // If it returns null (timestamp is before the first keypacket), fall back to the first packet.
+        // This matches mediabunny's internal behavior and handles videos that don't start at timestamp 0.
+        const startPacket = await packetSink.getFirstPacket({
+            verifyKeyPackets: true,
+        });
+        const hasAlpha = startPacket?.sideData.alpha;
+        if (hasAlpha && !canBrowserUseWebGl2()) {
+            return 'cannot-decode-alpha';
+        }
         return {
-            sampleSink: new VideoSampleSink(videoTrack),
-            packetSink: new EncodedPacketSink(videoTrack),
+            sampleSink,
         };
     };
     let videoSinksPromise = null;
@@ -92,17 +103,3 @@ export const getSinks = async (src) => {
         },
     };
 };
-export const getFramesSinceKeyframe = async ({ packetSink, videoSampleSink, startPacket, logLevel, src, }) => {
-    const nextKeyPacket = await packetSink.getNextKeyPacket(startPacket, {
-        verifyKeyPackets: true,
-    });
-    const sampleIterator = videoSampleSink.samples(startPacket.timestamp, nextKeyPacket ? nextKeyPacket.timestamp : Infinity);
-    const keyframeBank = makeKeyframeBank({
-        startTimestampInSeconds: startPacket.timestamp,
-        endTimestampInSeconds: nextKeyPacket ? nextKeyPacket.timestamp : Infinity,
-        sampleIterator,
-        logLevel,
-        src,
-    });
-    return keyframeBank;
-};

package/dist/video-extraction/keyframe-bank.d.ts

@@ -1,11 +1,9 @@
-import type { VideoSample } from 'mediabunny';
+import type { VideoSample, VideoSampleSink } from 'mediabunny';
 import { type LogLevel } from 'remotion';
 export type KeyframeBank = {
     src: string;
-    startTimestampInSeconds: number;
-    endTimestampInSeconds: number;
     getFrameFromTimestamp: (timestamp: number) => Promise<VideoSample | null>;
-    prepareForDeletion: (logLevel: LogLevel) => {
+    prepareForDeletion: (logLevel: LogLevel, reason: string) => {
         framesDeleted: number;
     };
     deleteFramesBeforeTimestamp: ({ logLevel, timestampInSeconds, }: {
@@ -13,17 +11,21 @@ export type KeyframeBank = {
         logLevel: LogLevel;
     }) => void;
     hasTimestampInSecond: (timestamp: number) => Promise<boolean>;
-    addFrame: (frame: VideoSample) => void;
+    addFrame: (frame: VideoSample, logLevel: LogLevel) => void;
     getOpenFrameCount: () => {
         size: number;
         timestamps: number[];
     };
     getLastUsed: () => number;
+    canSatisfyTimestamp: (timestamp: number) => boolean;
+    getRangeOfTimestamps: () => {
+        firstTimestamp: number;
+        lastTimestamp: number;
+    } | null;
 };
-export declare const makeKeyframeBank: ({ startTimestampInSeconds, endTimestampInSeconds, sampleIterator, logLevel: parentLogLevel, src, }: {
-    startTimestampInSeconds: number;
-    endTimestampInSeconds: number;
-    sampleIterator: AsyncGenerator<VideoSample, void, unknown>;
+export declare const makeKeyframeBank: ({ logLevel: parentLogLevel, src, videoSampleSink, requestedTimestamp, }: {
     logLevel: LogLevel;
     src: string;
-}) => KeyframeBank;
+    videoSampleSink: VideoSampleSink;
+    requestedTimestamp: number;
+}) => Promise<KeyframeBank>;