@remotion/media 4.0.352 → 4.0.354

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

@@ -1,14 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useEffect, useRef, useState } from 'react';
 import { Internals, useBufferState, useCurrentFrame } from 'remotion';
-import { Log } from '../log';
 import { MediaPlayer } from './media-player';
 const { useUnsafeVideoConfig, Timeline, SharedAudioContext } = Internals;
 export const NewVideoForPreview = ({ src, style, playbackRate = 1, logLevel = 'info', }) => {
     const canvasRef = useRef(null);
     const videoConfig = useUnsafeVideoConfig();
     const frame = useCurrentFrame();
-    const lastCurrentTimeRef = useRef(-1);
     const mediaPlayerRef = useRef(null);
     const [mediaPlayerReady, setMediaPlayerReady] = useState(false);
     const [playing] = Timeline.usePlayingState();
@@ -32,7 +30,6 @@ export const NewVideoForPreview = ({ src, style, playbackRate = 1, logLevel = 'i
         if (!sharedAudioContext.audioContext)
             return;
         try {
-            Log.trace(logLevel, `[NewVideoForPreview] Creating MediaPlayer for src: ${src}`);
             const player = new MediaPlayer({
                 canvas: canvasRef.current,
                 src,
@@ -44,14 +41,14 @@ export const NewVideoForPreview = ({ src, style, playbackRate = 1, logLevel = 'i
                 .initialize(initialTimestamp)
                 .then(() => {
                 setMediaPlayerReady(true);
-                Log.trace(logLevel, `[NewVideoForPreview] MediaPlayer initialized successfully`);
+                Internals.Log.trace({ logLevel, tag: '@remotion/media' }, `[NewVideoForPreview] MediaPlayer initialized successfully`);
             })
                 .catch((error) => {
-                Log.error('[NewVideoForPreview] Failed to initialize MediaPlayer', error);
+                Internals.Log.error({ logLevel, tag: '@remotion/media' }, '[NewVideoForPreview] Failed to initialize MediaPlayer', error);
             });
         }
         catch (error) {
-            Log.error('[NewVideoForPreview] MediaPlayer initialization failed', error);
+            Internals.Log.error({ logLevel, tag: '@remotion/media' }, '[NewVideoForPreview] MediaPlayer initialization failed', error);
         }
         return () => {
             if (delayHandleRef.current) {
@@ -59,7 +56,7 @@ export const NewVideoForPreview = ({ src, style, playbackRate = 1, logLevel = 'i
                 delayHandleRef.current = null;
             }
             if (mediaPlayerRef.current) {
-                Log.trace(logLevel, `[NewVideoForPreview] Disposing MediaPlayer`);
+                Internals.Log.trace({ logLevel, tag: '@remotion/media' }, `[NewVideoForPreview] Disposing MediaPlayer`);
                 mediaPlayerRef.current.dispose();
                 mediaPlayerRef.current = null;
             }
@@ -72,13 +69,11 @@ export const NewVideoForPreview = ({ src, style, playbackRate = 1, logLevel = 'i
         if (!mediaPlayer)
             return;
         if (playing) {
-            Log.trace(logLevel, `[NewVideoForPreview] Remotion playing - calling MediaPlayer.play()`);
             mediaPlayer.play().catch((error) => {
-                Log.error('[NewVideoForPreview] Failed to play', error);
+                Internals.Log.error({ logLevel, tag: '@remotion/media' }, '[NewVideoForPreview] Failed to play', error);
             });
         }
         else {
-            Log.trace(logLevel, `[NewVideoForPreview] Remotion paused - calling MediaPlayer.pause()`);
             mediaPlayer.pause();
         }
     }, [playing, logLevel, mediaPlayerReady]);
@@ -88,25 +83,24 @@ export const NewVideoForPreview = ({ src, style, playbackRate = 1, logLevel = 'i
         if (!mediaPlayer || !mediaPlayerReady)
             return;
         mediaPlayer.seekTo(currentTime);
-        Log.trace(logLevel, `[NewVideoForPreview] Updating target time to ${currentTime.toFixed(3)}s`);
-        lastCurrentTimeRef.current = currentTime;
+        Internals.Log.trace({ logLevel, tag: '@remotion/media' }, `[NewVideoForPreview] Updating target time to ${currentTime.toFixed(3)}s`);
     }, [currentTime, logLevel, mediaPlayerReady]);
-    // sync MediaPlayer stalling with Remotion buffering
+    // sync MediaPlayer buffering with Remotion buffering
     useEffect(() => {
         const mediaPlayer = mediaPlayerRef.current;
         if (!mediaPlayer || !mediaPlayerReady)
             return;
-        mediaPlayer.onStalledChange((isStalled) => {
-            if (isStalled && !delayHandleRef.current) {
+        mediaPlayer.onBufferingChange((newBufferingState) => {
+            if (newBufferingState && !delayHandleRef.current) {
                 // Start blocking Remotion playback
                 delayHandleRef.current = buffer.delayPlayback();
-                Log.trace(logLevel, '[NewVideoForPreview] MediaPlayer stalled - blocking Remotion playback');
+                Internals.Log.trace({ logLevel, tag: '@remotion/media' }, '[NewVideoForPreview] MediaPlayer buffering - blocking Remotion playback');
             }
-            else if (!isStalled && delayHandleRef.current) {
+            else if (!newBufferingState && delayHandleRef.current) {
                 // Unblock Remotion playback
                 delayHandleRef.current.unblock();
                 delayHandleRef.current = null;
-                Log.trace(logLevel, '[NewVideoForPreview] MediaPlayer unstalled - unblocking Remotion playback');
+                Internals.Log.trace({ logLevel, tag: '@remotion/media' }, '[NewVideoForPreview] MediaPlayer unbuffering - unblocking Remotion playback');
             }
         });
     }, [mediaPlayerReady, buffer, logLevel]);

package/dist/video/props.d.ts

@@ -9,17 +9,12 @@ export type VideoProps = {
     name?: string;
     pauseWhenBuffering?: boolean;
     showInTimeline?: boolean;
-    onAutoPlayError?: null | (() => void);
     onVideoFrame?: OnVideoFrame;
     playbackRate?: number;
     muted?: boolean;
     delayRenderRetries?: number;
     delayRenderTimeoutInMilliseconds?: number;
-    crossOrigin?: '' | 'anonymous' | 'use-credentials';
     style?: React.CSSProperties;
-    onError?: (err: Error) => void;
-    useWebAudioApi?: boolean;
-    acceptableTimeShiftInSeconds?: number;
     /**
      * @deprecated For internal use only
      */

package/dist/video/timeout-utils.d.ts

@@ -0,0 +1,2 @@
+export declare const sleep: (ms: number) => Promise<unknown>;
+export declare function withTimeout<T>(promise: Promise<T>, timeoutMs: number, errorMessage?: string): Promise<T>;

package/dist/video/timeout-utils.js

@@ -0,0 +1,18 @@
+/* eslint-disable no-promise-executor-return */
+export const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+export function withTimeout(promise, timeoutMs, errorMessage = 'Operation timed out') {
+    let timeoutId = null;
+    const timeoutPromise = new Promise((_, reject) => {
+        timeoutId = window.setTimeout(() => {
+            reject(new Error(errorMessage));
+        }, timeoutMs);
+    });
+    return Promise.race([
+        promise.finally(() => {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+        }),
+        timeoutPromise,
+    ]);
+}

package/dist/video/video-for-preview.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { LogLevel } from 'remotion';
+type NewVideoForPreviewProps = {
+    readonly src: string;
+    readonly style?: React.CSSProperties;
+    readonly playbackRate?: number;
+    readonly logLevel?: LogLevel;
+    readonly className?: string;
+};
+export declare const NewVideoForPreview: React.FC<NewVideoForPreviewProps>;
+export {};

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

@@ -0,0 +1,113 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Internals, useBufferState, useCurrentFrame } from 'remotion';
+import { MediaPlayer } from './media-player';
+const { useUnsafeVideoConfig, Timeline, SharedAudioContext } = Internals;
+export const NewVideoForPreview = ({ src, style, playbackRate = 1, logLevel = 'info', className, }) => {
+    const canvasRef = useRef(null);
+    const videoConfig = useUnsafeVideoConfig();
+    const frame = useCurrentFrame();
+    const mediaPlayerRef = useRef(null);
+    const [mediaPlayerReady, setMediaPlayerReady] = useState(false);
+    const [playing] = Timeline.usePlayingState();
+    const sharedAudioContext = useContext(SharedAudioContext);
+    const buffer = useBufferState();
+    const delayHandleRef = useRef(null);
+    if (!videoConfig) {
+        throw new Error('No video config found');
+    }
+    if (!src) {
+        throw new TypeError('No `src` was passed to <NewVideoForPreview>.');
+    }
+    const actualFps = videoConfig.fps / playbackRate;
+    const currentTime = frame / actualFps;
+    const [initialTimestamp] = useState(currentTime);
+    useEffect(() => {
+        if (!canvasRef.current)
+            return;
+        if (!sharedAudioContext)
+            return;
+        if (!sharedAudioContext.audioContext)
+            return;
+        try {
+            const player = new MediaPlayer({
+                canvas: canvasRef.current,
+                src,
+                logLevel,
+                sharedAudioContext: sharedAudioContext.audioContext,
+            });
+            mediaPlayerRef.current = player;
+            player
+                .initialize(initialTimestamp)
+                .then(() => {
+                setMediaPlayerReady(true);
+                Internals.Log.trace({ logLevel, tag: '@remotion/media' }, `[NewVideoForPreview] MediaPlayer initialized successfully`);
+            })
+                .catch((error) => {
+                Internals.Log.error({ logLevel, tag: '@remotion/media' }, '[NewVideoForPreview] Failed to initialize MediaPlayer', error);
+            });
+        }
+        catch (error) {
+            Internals.Log.error({ logLevel, tag: '@remotion/media' }, '[NewVideoForPreview] MediaPlayer initialization failed', error);
+        }
+        return () => {
+            if (delayHandleRef.current) {
+                delayHandleRef.current.unblock();
+                delayHandleRef.current = null;
+            }
+            if (mediaPlayerRef.current) {
+                Internals.Log.trace({ logLevel, tag: '@remotion/media' }, `[NewVideoForPreview] Disposing MediaPlayer`);
+                mediaPlayerRef.current.dispose();
+                mediaPlayerRef.current = null;
+            }
+            setMediaPlayerReady(false);
+        };
+    }, [src, logLevel, sharedAudioContext, initialTimestamp]);
+    const classNameValue = useMemo(() => {
+        return [Internals.OBJECTFIT_CONTAIN_CLASS_NAME, className]
+            .filter(Internals.truthy)
+            .join(' ');
+    }, [className]);
+    // sync play/pause state with Remotion timeline (like old VideoForPreview video does)
+    useEffect(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer)
+            return;
+        if (playing) {
+            mediaPlayer.play().catch((error) => {
+                Internals.Log.error({ logLevel, tag: '@remotion/media' }, '[NewVideoForPreview] Failed to play', error);
+            });
+        }
+        else {
+            mediaPlayer.pause();
+        }
+    }, [playing, logLevel, mediaPlayerReady]);
+    // sync target time with MediaPlayer
+    useEffect(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady)
+            return;
+        mediaPlayer.seekTo(currentTime);
+        Internals.Log.trace({ logLevel, tag: '@remotion/media' }, `[NewVideoForPreview] Updating target time to ${currentTime.toFixed(3)}s`);
+    }, [currentTime, logLevel, mediaPlayerReady]);
+    // sync MediaPlayer buffering with Remotion buffering
+    useEffect(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady)
+            return;
+        mediaPlayer.onBufferingChange((newBufferingState) => {
+            if (newBufferingState && !delayHandleRef.current) {
+                // Start blocking Remotion playback
+                delayHandleRef.current = buffer.delayPlayback();
+                Internals.Log.trace({ logLevel, tag: '@remotion/media' }, '[NewVideoForPreview] MediaPlayer buffering - blocking Remotion playback');
+            }
+            else if (!newBufferingState && delayHandleRef.current) {
+                // Unblock Remotion playback
+                delayHandleRef.current.unblock();
+                delayHandleRef.current = null;
+                Internals.Log.trace({ logLevel, tag: '@remotion/media' }, '[NewVideoForPreview] MediaPlayer unbuffering - unblocking Remotion playback');
+            }
+        });
+    }, [mediaPlayerReady, buffer, logLevel]);
+    return (_jsx("canvas", { ref: canvasRef, width: videoConfig.width, height: videoConfig.height, style: style, className: classNameValue }));
+};

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

@@ -1,40 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { cancelRender, Internals, useCurrentFrame, useDelayRender, useRemotionEnvironment, useVideoConfig, } from 'remotion';
+import { applyVolume } from '../convert-audiodata/apply-volume';
+import { frameForVolumeProp } from '../looped-frame';
 import { extractFrameViaBroadcastChannel } from '../video-extraction/extract-frame-via-broadcast-channel';
 export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted, loopVolumeCurveBehavior, delayRenderRetries, delayRenderTimeoutInMilliseconds, 
 // call when a frame of the video, i.e. frame drawn on canvas
 onVideoFrame, logLevel = window.remotion_logLevel, loop, style, className, }) => {
+    if (!src) {
+        throw new TypeError('No `src` was passed to <Video>.');
+    }
+    const frame = useCurrentFrame();
     const absoluteFrame = Internals.useTimelinePosition();
     const { fps } = useVideoConfig();
-    const canvasRef = useRef(null);
     const { registerRenderAsset, unregisterRenderAsset } = useContext(Internals.RenderAssetManager);
-    const frame = useCurrentFrame();
-    const volumePropsFrame = Internals.useFrameForVolumeProp(loopVolumeCurveBehavior ?? 'repeat');
-    const environment = useRemotionEnvironment();
+    const startsAt = Internals.useMediaStartsAt();
     const [id] = useState(() => `${Math.random()}`.replace('0.', ''));
-    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 environment = useRemotionEnvironment();
     const { delayRender, continueRender } = useDelayRender();
+    const canvasRef = useRef(null);
     useLayoutEffect(() => {
         if (!canvasRef.current) {
             return;
@@ -46,18 +30,27 @@ onVideoFrame, logLevel = window.remotion_logLevel, loop, style, className, }) =>
             retries: delayRenderRetries ?? undefined,
             timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined,
         });
+        const shouldRenderAudio = (() => {
+            if (!window.remotion_audioEnabled) {
+                return false;
+            }
+            if (muted) {
+                return false;
+            }
+            return true;
+        })();
         extractFrameViaBroadcastChannel({
             src,
             timeInSeconds: timestamp,
             durationInSeconds,
+            playbackRate: playbackRate ?? 1,
             logLevel: logLevel ?? 'info',
             includeAudio: shouldRenderAudio,
             includeVideo: window.remotion_videoEnabled,
             isClientSideRendering: environment.isClientSideRendering,
-            volume,
             loop: loop ?? false,
         })
-            .then(({ frame: imageBitmap, audio }) => {
+            .then(({ frame: imageBitmap, audio, durationInSeconds: assetDurationInSeconds, }) => {
             if (imageBitmap) {
                 onVideoFrame?.(imageBitmap);
                 const context = canvasRef.current?.getContext('2d');
@@ -79,7 +72,22 @@ onVideoFrame, logLevel = window.remotion_logLevel, loop, style, className, }) =>
             else if (window.remotion_videoEnabled) {
                 cancelRender(new Error('No video frame found'));
             }
-            if (audio) {
+            const volumePropsFrame = frameForVolumeProp({
+                behavior: loopVolumeCurveBehavior ?? 'repeat',
+                loop: loop ?? false,
+                assetDurationInSeconds: assetDurationInSeconds ?? 0,
+                fps,
+                frame,
+                startsAt,
+            });
+            const volume = Internals.evaluateVolume({
+                volume: volumeProp,
+                frame: volumePropsFrame,
+                mediaVolume: 1,
+            });
+            Internals.warnAboutTooHighVolume(volume);
+            if (audio && volume > 0) {
+                applyVolume(audio.data, volume);
                 registerRenderAsset({
                     type: 'inline-audio',
                     id,
@@ -111,14 +119,16 @@ onVideoFrame, logLevel = window.remotion_logLevel, loop, style, className, }) =>
         frame,
         id,
         logLevel,
+        loop,
+        loopVolumeCurveBehavior,
+        muted,
         onVideoFrame,
         playbackRate,
         registerRenderAsset,
-        shouldRenderAudio,
         src,
+        startsAt,
         unregisterRenderAsset,
-        volume,
-        loop,
+        volumeProp,
     ]);
     const classNameValue = useMemo(() => {
         return [Internals.OBJECTFIT_CONTAIN_CLASS_NAME, className]

package/dist/video/video.js

@@ -32,6 +32,6 @@ export const Video = (props) => {
     if (environment.isRendering) {
         return _jsx(VideoForRendering, { ...otherProps });
     }
-    const { onAutoPlayError, onVideoFrame, crossOrigin, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...propsForPreview } = otherProps;
-    return (_jsx(VideoForPreview, { _remotionInternalStack: stack ?? null, _remotionInternalNativeLoopPassed: false, onDuration: onDuration, onlyWarnForMediaSeekingError: true, pauseWhenBuffering: pauseWhenBuffering ?? false, showInTimeline: showInTimeline ?? true, onAutoPlayError: onAutoPlayError ?? undefined, onVideoFrame: onVideoFrame ?? null, crossOrigin: crossOrigin, ...propsForPreview }));
+    const { onVideoFrame, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...propsForPreview } = otherProps;
+    return (_jsx(VideoForPreview, { _remotionInternalStack: stack ?? null, _remotionInternalNativeLoopPassed: false, onDuration: onDuration, onlyWarnForMediaSeekingError: true, pauseWhenBuffering: pauseWhenBuffering ?? false, showInTimeline: showInTimeline ?? true, onVideoFrame: onVideoFrame ?? null, ...propsForPreview }));
 };

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

@@ -1,16 +1,17 @@
+import { type LogLevel } from 'remotion';
 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, loop, }: {
+export declare const extractFrameViaBroadcastChannel: ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, isClientSideRendering, loop, }: {
     src: string;
     timeInSeconds: number;
     durationInSeconds: number;
+    playbackRate: number;
     logLevel: LogLevel;
     includeAudio: boolean;
     includeVideo: boolean;
     isClientSideRendering: boolean;
-    volume: number;
     loop: boolean;
 }) => Promise<{
     frame: ImageBitmap | VideoFrame | null;
     audio: PcmS16AudioData | null;
+    durationInSeconds: number | null;
 }>;

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

@@ -5,14 +5,14 @@ if (window.remotion_broadcastChannel && window.remotion_isMainTab) {
         const data = event.data;
         if (data.type === 'request') {
             try {
-                const { frame, audio } = await extractFrameAndAudio({
+                const { frame, audio, durationInSeconds } = await extractFrameAndAudio({
                     src: data.src,
                     timeInSeconds: data.timeInSeconds,
                     logLevel: data.logLevel,
                     durationInSeconds: data.durationInSeconds,
+                    playbackRate: data.playbackRate,
                     includeAudio: data.includeAudio,
                     includeVideo: data.includeVideo,
-                    volume: data.volume,
                     loop: data.loop,
                 });
                 const videoFrame = frame;
@@ -27,6 +27,7 @@ if (window.remotion_broadcastChannel && window.remotion_isMainTab) {
                     id: data.id,
                     frame: imageBitmap,
                     audio,
+                    durationInSeconds: durationInSeconds ?? null,
                 };
                 window.remotion_broadcastChannel.postMessage(response);
                 videoFrame?.close();
@@ -45,16 +46,16 @@ if (window.remotion_broadcastChannel && window.remotion_isMainTab) {
         }
     });
 }
-export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel, durationInSeconds, includeAudio, includeVideo, isClientSideRendering, volume, loop, }) => {
+export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, isClientSideRendering, loop, }) => {
     if (isClientSideRendering || window.remotion_isMainTab) {
         return extractFrameAndAudio({
             logLevel,
             src,
             timeInSeconds,
             durationInSeconds,
+            playbackRate,
             includeAudio,
             includeVideo,
-            volume,
             loop,
         });
     }
@@ -69,6 +70,9 @@ export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel,
                 resolve({
                     frame: data.frame ? data.frame : null,
                     audio: data.audio ? data.audio : null,
+                    durationInSeconds: data.durationInSeconds
+                        ? data.durationInSeconds
+                        : null,
                 });
                 window.remotion_broadcastChannel.removeEventListener('message', onMessage);
             }
@@ -86,9 +90,9 @@ export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel,
         id: requestId,
         logLevel,
         durationInSeconds,
+        playbackRate,
         includeAudio,
         includeVideo,
-        volume,
         loop,
     };
     window.remotion_broadcastChannel.postMessage(request);

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

@@ -1,4 +1,4 @@
-import type { LogLevel } from '../log';
+import { type LogLevel } from 'remotion';
 import { type GetSink } from './get-frames-since-keyframe';
 export declare const sinkPromises: Record<string, Promise<GetSink>>;
 export declare const extractFrame: ({ src, timeInSeconds: unloopedTimeinSeconds, logLevel, loop, }: {

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

@@ -6,6 +6,9 @@ export const extractFrame = async ({ src, timeInSeconds: unloopedTimeinSeconds,
         sinkPromises[src] = getSinks(src);
     }
     const { video, getDuration } = await sinkPromises[src];
+    if (video === null) {
+        throw new Error(`No video track found for ${src}`);
+    }
     const timeInSeconds = loop
         ? unloopedTimeinSeconds % (await getDuration())
         : unloopedTimeinSeconds;

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

@@ -4,7 +4,7 @@ export declare const getSinks: (src: string) => Promise<{
     video: {
         sampleSink: VideoSampleSink;
         packetSink: EncodedPacketSink;
-    };
+    } | null;
     audio: {
         sampleSink: AudioSampleSink;
     } | null;

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

@@ -8,16 +8,15 @@ export const getSinks = async (src) => {
     });
     const format = await input.getFormat();
     const videoTrack = await input.getPrimaryVideoTrack();
-    if (!videoTrack) {
-        throw new Error(`No video track found for ${src}`);
-    }
     const audioTrack = await input.getPrimaryAudioTrack();
     const isMatroska = format === MATROSKA;
     return {
-        video: {
-            sampleSink: new VideoSampleSink(videoTrack),
-            packetSink: new EncodedPacketSink(videoTrack),
-        },
+        video: videoTrack
+            ? {
+                sampleSink: new VideoSampleSink(videoTrack),
+                packetSink: new EncodedPacketSink(videoTrack),
+            }
+            : null,
         audio: audioTrack
             ? {
                 sampleSink: new AudioSampleSink(audioTrack),
@@ -30,7 +29,7 @@ export const getSinks = async (src) => {
 };
 export const getFramesSinceKeyframe = async ({ packetSink, videoSampleSink, startPacket, }) => {
     const nextKeyPacket = await packetSink.getNextKeyPacket(startPacket, {
-        verifyKeyPackets: false,
+        verifyKeyPackets: true,
     });
     const sampleIterator = videoSampleSink.samples(startPacket.timestamp, nextKeyPacket ? nextKeyPacket.timestamp : Infinity);
     const keyframeBank = makeKeyframeBank({

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

@@ -1,5 +1,5 @@
 import type { VideoSample } from 'mediabunny';
-import type { LogLevel } from '../log';
+import { type LogLevel } from 'remotion';
 export type KeyframeBank = {
     startTimestampInSeconds: number;
     endTimestampInSeconds: number;

package/dist/video-extraction/keyframe-bank.js

@@ -1,4 +1,4 @@
-import { Log } from '../log';
+import { Internals } from 'remotion';
 // Round to only 4 digits, because WebM has a timescale of 1_000, e.g. framer.webm
 const roundTo4Digits = (timestamp) => {
     return Math.round(timestamp * 1000) / 1000;
@@ -7,7 +7,7 @@ export const makeKeyframeBank = ({ startTimestampInSeconds, endTimestampInSecond
     const frames = {};
     const frameTimestamps = [];
     let lastUsed = Date.now();
-    let alloctionSize = 0;
+    let allocationSize = 0;
     const hasDecodedEnoughForTimestamp = (timestamp) => {
         const lastFrameTimestamp = frameTimestamps[frameTimestamps.length - 1];
         if (!lastFrameTimestamp) {
@@ -24,7 +24,7 @@ export const makeKeyframeBank = ({ startTimestampInSeconds, endTimestampInSecond
     const addFrame = (frame) => {
         frames[frame.timestamp] = frame;
         frameTimestamps.push(frame.timestamp);
-        alloctionSize += frame.allocationSize();
+        allocationSize += frame.allocationSize();
         lastUsed = Date.now();
     };
     const ensureEnoughFramesForTimestamp = async (timestamp) => {
@@ -72,7 +72,7 @@ export const makeKeyframeBank = ({ startTimestampInSeconds, endTimestampInSecond
             if (!frames[frameTimestamp]) {
                 continue;
             }
-            alloctionSize -= frames[frameTimestamp].allocationSize();
+            allocationSize -= frames[frameTimestamp].allocationSize();
             frames[frameTimestamp].close();
             delete frames[frameTimestamp];
         }
@@ -89,17 +89,17 @@ export const makeKeyframeBank = ({ startTimestampInSeconds, endTimestampInSecond
                 if (!frames[frameTimestamp]) {
                     continue;
                 }
-                alloctionSize -= frames[frameTimestamp].allocationSize();
+                allocationSize -= frames[frameTimestamp].allocationSize();
                 frameTimestamps.splice(frameTimestamps.indexOf(frameTimestamp), 1);
                 frames[frameTimestamp].close();
                 delete frames[frameTimestamp];
-                Log.verbose(logLevel, `[Video] Deleted frame ${frameTimestamp} for src ${src}`);
+                Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `Deleted frame ${frameTimestamp} for src ${src}`);
             }
         }
     };
     const getOpenFrameCount = () => {
         return {
-            size: alloctionSize,
+            size: allocationSize,
             timestamps: frameTimestamps,
         };
     };

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

@@ -1,5 +1,5 @@
 import type { EncodedPacketSink, VideoSampleSink } from 'mediabunny';
-import type { LogLevel } from '../log';
+import { type LogLevel } from 'remotion';
 import { type KeyframeBank } from './keyframe-bank';
 export declare const makeKeyframeManager: () => {
     requestKeyframeBank: ({ packetSink, timestamp, videoSampleSink, src, logLevel, }: {