@remotion/media 4.0.374 → 4.0.376

package/dist/extract-frame-and-audio.d.ts

@@ -1,6 +1,6 @@
 import type { LogLevel } from 'remotion';
 import type { ExtractFrameViaBroadcastChannelResult } from './video-extraction/extract-frame-via-broadcast-channel';
-export declare const extractFrameAndAudio: ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, loop, audioStreamIndex, trimAfter, trimBefore, fps, }: {
+export declare const extractFrameAndAudio: ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, loop, audioStreamIndex, trimAfter, trimBefore, fps, maxCacheSize, }: {
     src: string;
     timeInSeconds: number;
     logLevel: LogLevel;
@@ -13,4 +13,5 @@ export declare const extractFrameAndAudio: ({ src, timeInSeconds, logLevel, dura
     trimAfter: number | undefined;
     trimBefore: number | undefined;
     fps: number;
+    maxCacheSize: number;
 }) => Promise<ExtractFrameViaBroadcastChannelResult>;

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

@@ -1,7 +1,8 @@
 import { extractAudio } from './audio-extraction/extract-audio';
 import { isNetworkError } from './is-network-error';
 import { extractFrame } from './video-extraction/extract-frame';
-export const extractFrameAndAudio = async ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, loop, audioStreamIndex, trimAfter, trimBefore, fps, }) => {
+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([
             includeVideo
@@ -14,6 +15,7 @@ export const extractFrameAndAudio = async ({ src, timeInSeconds, logLevel, durat
                     playbackRate,
                     trimBefore,
                     fps,
+                    maxCacheSize,
                 })
                 : null,
             includeAudio
@@ -28,6 +30,7 @@ export const extractFrameAndAudio = async ({ src, timeInSeconds, logLevel, durat
                     trimAfter,
                     fps,
                     trimBefore,
+                    maxCacheSize,
                 })
                 : null,
         ]);
@@ -61,9 +64,20 @@ export const extractFrameAndAudio = async ({ src, timeInSeconds, logLevel, durat
                 durationInSeconds: frame?.type === 'success' ? frame.durationInSeconds : null,
             };
         }
+        if (!frame?.frame) {
+            return {
+                type: 'success',
+                frame: null,
+                audio: audio?.data ?? null,
+                durationInSeconds: audio?.durationInSeconds ?? null,
+            };
+        }
         return {
             type: 'success',
-            frame: frame?.frame?.toVideoFrame() ?? null,
+            frame: await rotateFrame({
+                frame: frame.frame.toVideoFrame(),
+                rotation: frame.frame.rotation,
+            }),
             audio: audio?.data ?? null,
             durationInSeconds: audio?.durationInSeconds ?? null,
         };

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useLayoutEffect, useMemo, useRef, useState, } from 'react';
-import { cancelRender, Internals, Loop, random, useCurrentFrame, useDelayRender, useRemotionEnvironment, useVideoConfig, } from 'remotion';
+import { Internals, Loop, random, useCurrentFrame, useDelayRender, useRemotionEnvironment, useVideoConfig, } from 'remotion';
+import { useMaxMediaCacheSize } from '../caches';
 import { applyVolume } from '../convert-audiodata/apply-volume';
 import { TARGET_SAMPLE_RATE } from '../convert-audiodata/resample-audiodata';
 import { frameForVolumeProp } from '../looped-frame';
@@ -24,11 +25,16 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
         sequenceContext?.durationInFrames,
     ]);
     const environment = useRemotionEnvironment();
-    const { delayRender, continueRender } = useDelayRender();
+    const { delayRender, continueRender, cancelRender } = useDelayRender();
     const canvasRef = useRef(null);
     const [replaceWithOffthreadVideo, setReplaceWithOffthreadVideo] = useState(false);
     const audioEnabled = Internals.useAudioEnabled();
     const videoEnabled = Internals.useVideoEnabled();
+    const maxCacheSize = useMaxMediaCacheSize(logLevel);
+    const [error, setError] = useState(null);
+    if (error) {
+        throw error;
+    }
     useLayoutEffect(() => {
         if (!canvasRef.current) {
             return;
@@ -36,6 +42,9 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
         if (replaceWithOffthreadVideo) {
             return;
         }
+        if (!canvasRef.current?.getContext) {
+            return setError(new Error('Canvas does not have .getContext() method available. This could be because <Video> was mounted inside an <svg> tag.'));
+        }
         const timestamp = frame / fps;
         const durationInSeconds = 1 / fps;
         const newHandle = delayRender(`Extracting frame at time ${timestamp}`, {
@@ -65,6 +74,7 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
             trimAfter: trimAfterValue,
             trimBefore: trimBeforeValue,
             fps,
+            maxCacheSize,
         })
             .then((result) => {
             if (result.type === 'unknown-container-format') {
@@ -120,14 +130,8 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
                 if (!context) {
                     return;
                 }
-                context.canvas.width =
-                    imageBitmap instanceof ImageBitmap
-                        ? imageBitmap.width
-                        : imageBitmap.displayWidth;
-                context.canvas.height =
-                    imageBitmap instanceof ImageBitmap
-                        ? imageBitmap.height
-                        : imageBitmap.displayHeight;
+                context.canvas.width = imageBitmap.width;
+                context.canvas.height = imageBitmap.height;
                 context.canvas.style.aspectRatio = `${context.canvas.width} / ${context.canvas.height}`;
                 context.drawImage(imageBitmap, 0, 0);
                 imageBitmap.close();
@@ -170,8 +174,8 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
             }
             continueRender(newHandle);
         })
-            .catch((error) => {
-            cancelRender(error);
+            .catch((err) => {
+            cancelRender(err);
         });
         return () => {
             continueRender(newHandle);
@@ -206,6 +210,8 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
         trimBeforeValue,
         audioEnabled,
         videoEnabled,
+        maxCacheSize,
+        cancelRender,
     ]);
     const classNameValue = useMemo(() => {
         return [Internals.OBJECTFIT_CONTAIN_CLASS_NAME, className]
@@ -218,7 +224,9 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
             showInTimeline: false, crossOrigin: undefined, onAutoPlayError: () => undefined, pauseWhenBuffering: false, trimAfter: trimAfterValue, trimBefore: trimBeforeValue, useWebAudioApi: false, startFrom: undefined, endAt: undefined, stack: stack, _remotionInternalNativeLoopPassed: false }));
         if (loop) {
             if (!replaceWithOffthreadVideo.durationInSeconds) {
-                cancelRender(new Error(`Cannot render video ${src}: @remotion/media was unable to render, and fell back to <OffthreadVideo>. Also, "loop" was set, but <OffthreadVideo> does not support looping and @remotion/media could also not determine the duration of the video.`));
+                const err = new Error(`Cannot render video ${src}: @remotion/media was unable to render, and fell back to <OffthreadVideo>. Also, "loop" was set, but <OffthreadVideo> does not support looping and @remotion/media could also not determine the duration of the video.`);
+                cancelRender(err);
+                throw err;
             }
             return (_jsx(Loop, { layout: "none", durationInFrames: Internals.calculateMediaDuration({
                     trimAfter: trimAfterValue,

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

@@ -2,7 +2,7 @@ import { type LogLevel } from 'remotion';
 import type { PcmS16AudioData } from '../convert-audiodata/convert-audiodata';
 export type ExtractFrameViaBroadcastChannelResult = {
     type: 'success';
-    frame: ImageBitmap | VideoFrame | null;
+    frame: ImageBitmap | null;
     audio: PcmS16AudioData | null;
     durationInSeconds: number | null;
 } | {
@@ -16,7 +16,7 @@ export type ExtractFrameViaBroadcastChannelResult = {
 } | {
     type: 'unknown-container-format';
 };
-export declare const extractFrameViaBroadcastChannel: ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, isClientSideRendering, loop, audioStreamIndex, trimAfter, trimBefore, fps, }: {
+export declare const extractFrameViaBroadcastChannel: ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, isClientSideRendering, loop, audioStreamIndex, trimAfter, trimBefore, fps, maxCacheSize, }: {
     src: string;
     timeInSeconds: number;
     durationInSeconds: number;
@@ -30,4 +30,5 @@ export declare const extractFrameViaBroadcastChannel: ({ src, timeInSeconds, log
     trimAfter: number | undefined;
     trimBefore: number | undefined;
     fps: number;
+    maxCacheSize: number;
 }) => Promise<ExtractFrameViaBroadcastChannelResult>;

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

@@ -20,6 +20,7 @@ if (typeof window !== 'undefined' &&
                     trimAfter: data.trimAfter,
                     trimBefore: data.trimBefore,
                     fps: data.fps,
+                    maxCacheSize: data.maxCacheSize,
                 });
                 if (result.type === 'cannot-decode') {
                     const cannotDecodeResponse = {
@@ -56,12 +57,9 @@ if (typeof window !== 'undefined' &&
                     return;
                 }
                 const { frame, audio, durationInSeconds } = result;
-                const videoFrame = frame;
-                const imageBitmap = videoFrame
-                    ? await createImageBitmap(videoFrame)
-                    : null;
-                if (videoFrame) {
-                    videoFrame.close();
+                const imageBitmap = frame ? await createImageBitmap(frame) : null;
+                if (frame) {
+                    frame.close();
                 }
                 const response = {
                     type: 'response-success',
@@ -71,7 +69,6 @@ if (typeof window !== 'undefined' &&
                     durationInSeconds: durationInSeconds ?? null,
                 };
                 window.remotion_broadcastChannel.postMessage(response);
-                videoFrame?.close();
             }
             catch (error) {
                 const response = {
@@ -87,7 +84,7 @@ if (typeof window !== 'undefined' &&
         }
     });
 }
-export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, isClientSideRendering, loop, audioStreamIndex, trimAfter, trimBefore, fps, }) => {
+export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, isClientSideRendering, loop, audioStreamIndex, trimAfter, trimBefore, fps, maxCacheSize, }) => {
     if (isClientSideRendering || window.remotion_isMainTab) {
         return extractFrameAndAudio({
             logLevel,
@@ -102,6 +99,7 @@ export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel,
             trimAfter,
             trimBefore,
             fps,
+            maxCacheSize,
         });
     }
     const requestId = crypto.randomUUID();
@@ -176,6 +174,7 @@ export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel,
         trimAfter,
         trimBefore,
         fps,
+        maxCacheSize,
     };
     window.remotion_broadcastChannel.postMessage(request);
     let timeoutId;

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

@@ -22,8 +22,9 @@ type ExtractFrameParams = {
     trimBefore: number | undefined;
     playbackRate: number;
     fps: number;
+    maxCacheSize: number;
 };
-declare const extractFrameInternal: ({ src, timeInSeconds: unloopedTimeInSeconds, logLevel, loop, trimAfter, trimBefore, playbackRate, fps, }: ExtractFrameParams) => Promise<ExtractFrameResult>;
+declare const extractFrameInternal: ({ src, timeInSeconds: unloopedTimeInSeconds, logLevel, loop, trimAfter, trimBefore, playbackRate, fps, maxCacheSize, }: ExtractFrameParams) => Promise<ExtractFrameResult>;
 type ExtractFrameReturnType = Awaited<ReturnType<typeof extractFrameInternal>>;
 export declare const extractFrame: (params: ExtractFrameParams) => Promise<ExtractFrameReturnType>;
 export {};

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

@@ -1,7 +1,7 @@
 import { keyframeManager } from '../caches';
 import { getSink } from '../get-sink';
 import { getTimeInSeconds } from '../get-time-in-seconds';
-const extractFrameInternal = async ({ src, timeInSeconds: unloopedTimeInSeconds, logLevel, loop, trimAfter, trimBefore, playbackRate, fps, }) => {
+const extractFrameInternal = async ({ src, timeInSeconds: unloopedTimeInSeconds, logLevel, loop, trimAfter, trimBefore, playbackRate, fps, maxCacheSize, }) => {
     const sink = await getSink(src, logLevel);
     const video = await sink.getVideo();
     if (video === 'no-video-track') {
@@ -41,6 +41,7 @@ const extractFrameInternal = async ({ src, timeInSeconds: unloopedTimeInSeconds,
         timestamp: timeInSeconds,
         src,
         logLevel,
+        maxCacheSize,
     });
     if (keyframeBank === 'has-alpha') {
         return {

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

@@ -68,21 +68,15 @@ export const makeKeyframeBank = ({ startTimestampInSeconds, endTimestampInSecond
     };
     const getFrameFromTimestamp = async (timestampInSeconds) => {
         lastUsed = Date.now();
-        // Videos may start slightly after timestamp 0 due to encoding, but if the requested timestamp is too far before the bank start, something is likely wrong.
-        const maxClampToleranceInSeconds = 0.1;
-        // If the requested timestamp is before the start of this bank, clamp it to the start if within tolerance. This handles videos that don't start at timestamp 0.
-        // For example, requesting frame at 0sec when video starts at 0.04sec should return the frame at 0.04sec.
+        // If the requested timestamp is before the start of this bank, clamp it to the start.
+        // This matches Chrome's behavior: render the first available frame rather than showing black.
+        // Videos don't always start at timestamp 0 due to encoding artifacts, container format quirks,
+        // and keyframe positioning. Users have no control over this, so we clamp to the first frame.
         // Test case: https://github.com/remotion-dev/remotion/issues/5915
         let adjustedTimestamp = timestampInSeconds;
         if (roundTo4Digits(timestampInSeconds) <
             roundTo4Digits(startTimestampInSeconds)) {
-            const differenceInSeconds = startTimestampInSeconds - timestampInSeconds;
-            if (differenceInSeconds <= maxClampToleranceInSeconds) {
-                adjustedTimestamp = startTimestampInSeconds;
-            }
-            else {
-                return Promise.reject(new Error(`Timestamp is before start timestamp (requested: ${timestampInSeconds}sec, start: ${startTimestampInSeconds}sec, difference: ${differenceInSeconds.toFixed(3)}sec exceeds tolerance of ${maxClampToleranceInSeconds}sec)`));
-            }
+            adjustedTimestamp = startTimestampInSeconds;
         }
         if (roundTo4Digits(adjustedTimestamp) > roundTo4Digits(endTimestampInSeconds)) {
             return Promise.reject(new Error(`Timestamp is after end timestamp (requested: ${timestampInSeconds}sec, end: ${endTimestampInSeconds}sec)`));

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

@@ -2,12 +2,13 @@ import type { EncodedPacketSink, VideoSampleSink } from 'mediabunny';
 import { type LogLevel } from 'remotion';
 import { type KeyframeBank } from './keyframe-bank';
 export declare const makeKeyframeManager: () => {
-    requestKeyframeBank: ({ packetSink, timestamp, videoSampleSink, src, logLevel, }: {
+    requestKeyframeBank: ({ packetSink, timestamp, videoSampleSink, src, logLevel, maxCacheSize, }: {
         packetSink: EncodedPacketSink;
         timestamp: number;
         videoSampleSink: VideoSampleSink;
         src: string;
         logLevel: LogLevel;
+        maxCacheSize: number;
     }) => Promise<KeyframeBank | "has-alpha" | null>;
     getCacheStats: () => Promise<{
         count: number;

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

@@ -1,6 +1,6 @@
 import { Internals } from 'remotion';
 import { canBrowserUseWebGl2 } from '../browser-can-use-webgl2';
-import { getMaxVideoCacheSize, getTotalCacheStats, SAFE_BACK_WINDOW_IN_SECONDS, } from '../caches';
+import { getTotalCacheStats, SAFE_BACK_WINDOW_IN_SECONDS } from '../caches';
 import { renderTimestampRange } from '../render-timestamp-range';
 import { getFramesSinceKeyframe } from './get-frames-since-keyframe';
 export const makeKeyframeManager = () => {
@@ -75,9 +75,8 @@ export const makeKeyframeManager = () => {
         }
         return { finish: false };
     };
-    const ensureToStayUnderMaxCacheSize = async (logLevel) => {
+    const ensureToStayUnderMaxCacheSize = async (logLevel, maxCacheSize) => {
         let cacheStats = await getTotalCacheStats();
-        const maxCacheSize = getMaxVideoCacheSize(logLevel);
         while (cacheStats.totalSize > maxCacheSize) {
             const { finish } = await deleteOldestKeyframeBank(logLevel);
             if (finish) {
@@ -161,8 +160,8 @@ export const makeKeyframeManager = () => {
         addKeyframeBank({ src, bank: replacementKeybank, startTimestampInSeconds });
         return replacementKeybank;
     };
-    const requestKeyframeBank = async ({ packetSink, timestamp, videoSampleSink, src, logLevel, }) => {
-        await ensureToStayUnderMaxCacheSize(logLevel);
+    const requestKeyframeBank = async ({ packetSink, timestamp, videoSampleSink, src, logLevel, maxCacheSize, }) => {
+        await ensureToStayUnderMaxCacheSize(logLevel, maxCacheSize);
         await clearKeyframeBanksBeforeTime({
             timestampInSeconds: timestamp,
             src,
@@ -190,13 +189,14 @@ export const makeKeyframeManager = () => {
     };
     let queue = Promise.resolve(undefined);
     return {
-        requestKeyframeBank: ({ packetSink, timestamp, videoSampleSink, src, logLevel, }) => {
+        requestKeyframeBank: ({ packetSink, timestamp, videoSampleSink, src, logLevel, maxCacheSize, }) => {
             queue = queue.then(() => requestKeyframeBank({
                 packetSink,
                 timestamp,
                 videoSampleSink,
                 src,
                 logLevel,
+                maxCacheSize,
             }));
             return queue;
         },

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/media",
-	"version": "4.0.374",
+	"version": "4.0.376",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"module": "dist/esm/index.mjs",
@@ -21,20 +21,20 @@
 		"make": "tsc -d && bun --env-file=../.env.bundle bundle.ts"
 	},
 	"dependencies": {
-		"mediabunny": "1.24.3",
-		"remotion": "4.0.374"
+		"mediabunny": "1.24.5",
+		"remotion": "4.0.376"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
 		"react-dom": ">=16.8.0"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.374",
+		"@remotion/eslint-config-internal": "4.0.376",
 		"@vitest/browser-webdriverio": "4.0.7",
 		"eslint": "9.19.0",
 		"react": "19.0.0",
 		"react-dom": "19.0.0",
-		"vitest": "4.0.7",
+		"vitest": "4.0.9",
 		"webdriverio": "9.19.2"
 	},
 	"keywords": [],

package/dist/video-extraction/to-video-frame-fixed-rotation.d.ts

@@ -1,14 +0,0 @@
-import type { VideoSample } from 'mediabunny';
-/**
- * Once we convert a VideoSample to a VideoFrame, we lose the rotation
- * https://github.com/Vanilagy/mediabunny/pull/212
- * This will be fixed in Mediabunny v2, but for now, we need to manually fix it.
- *
- * I'm actually wondering if your PR is actually a breaking change
-  I would say it kinda is actually
-  Because, previously only the VideoSample had rotation but the video frame you got from .toVideoFrame() was unrotated. Now, the resulting VideoFrame will be rotated, so drawing it to a canvas will behave differently. To me, this is a breaking change
-  People's old code that manually handled the rotation will break here
-  So I think this is actually a PR for v2
-  And for Remotion, you can do a temporary workaround fix by cloning the VideoFrame and overriding rotation that way, then closing the old frame, then transferring the cloned frame
- */
-export declare const toVideoFrameFixedRotation: (videoSample: VideoSample) => VideoFrame;

package/dist/video-extraction/to-video-frame-fixed-rotation.js

@@ -1,41 +0,0 @@
-/**
- * Once we convert a VideoSample to a VideoFrame, we lose the rotation
- * https://github.com/Vanilagy/mediabunny/pull/212
- * This will be fixed in Mediabunny v2, but for now, we need to manually fix it.
- *
- * I'm actually wondering if your PR is actually a breaking change
-  I would say it kinda is actually
-  Because, previously only the VideoSample had rotation but the video frame you got from .toVideoFrame() was unrotated. Now, the resulting VideoFrame will be rotated, so drawing it to a canvas will behave differently. To me, this is a breaking change
-  People's old code that manually handled the rotation will break here
-  So I think this is actually a PR for v2
-  And for Remotion, you can do a temporary workaround fix by cloning the VideoFrame and overriding rotation that way, then closing the old frame, then transferring the cloned frame
- */
-export const toVideoFrameFixedRotation = (videoSample) => {
-    const frame = videoSample.toVideoFrame();
-    if (videoSample.rotation === 0) {
-        return frame;
-    }
-    const canvas = new OffscreenCanvas(width, height);
-    const ctx = canvas.getContext('2d');
-    if (!ctx) {
-        throw new Error('Could not get 2d context');
-    }
-    canvas.width = width;
-    canvas.height = height;
-    if (canvasRotationToApply === 90) {
-        ctx.translate(width, 0);
-    }
-    else if (canvasRotationToApply === 180) {
-        ctx.translate(width, height);
-    }
-    else if (canvasRotationToApply === 270) {
-        ctx.translate(0, height);
-    }
-    console.log('sample rotation', videoSample.rotation);
-    // @ts-expect-error - rotation is not a known property of VideoFrameInit
-    const fixedFrame = new VideoFrame(frame, { rotation: videoSample.rotation });
-    frame.close();
-    // @ts-expect-error - rotation is not a known property of VideoFrameInit
-    console.log('fixed frame rotation', fixedFrame.rotation);
-    return fixedFrame;
-};