@remotion/media 4.0.386 → 4.0.388

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

@@ -69,6 +69,10 @@ const AudioForPreviewAssertedShowing = ({ src, playbackRate, logLevel, muted, vo
         throw new Error('useMediaPlayback must be used inside a <BufferingContext>');
     }
     const isPlayerBuffering = Internals.useIsPlayerBuffering(bufferingContext);
+    const initialIsPremounting = useRef(isPremounting);
+    const initialIsPostmounting = useRef(isPostmounting);
+    const initialGlobalPlaybackRate = useRef(globalPlaybackRate);
+    const initialPlaybackRate = useRef(playbackRate);
     useEffect(() => {
         if (!sharedAudioContext)
             return;
@@ -84,13 +88,14 @@ const AudioForPreviewAssertedShowing = ({ src, playbackRate, logLevel, muted, vo
                 trimBefore: initialTrimBeforeRef.current,
                 fps: videoConfig.fps,
                 canvas: null,
-                playbackRate,
+                playbackRate: initialPlaybackRate.current,
                 audioStreamIndex: audioStreamIndex ?? 0,
                 debugOverlay: false,
                 bufferState: buffer,
-                isPostmounting,
-                isPremounting,
-                globalPlaybackRate,
+                isPostmounting: initialIsPostmounting.current,
+                isPremounting: initialIsPremounting.current,
+                globalPlaybackRate: initialGlobalPlaybackRate.current,
+                onVideoFrameCallback: null,
             });
             mediaPlayerRef.current = player;
             player
@@ -161,14 +166,10 @@ const AudioForPreviewAssertedShowing = ({ src, playbackRate, logLevel, muted, vo
         sharedAudioContext,
         currentTimeRef,
         loop,
-        playbackRate,
         videoConfig.fps,
         audioStreamIndex,
         disallowFallbackToHtml5Audio,
         buffer,
-        isPremounting,
-        isPostmounting,
-        globalPlaybackRate,
     ]);
     useLayoutEffect(() => {
         const audioPlayer = mediaPlayerRef.current;

package/dist/esm/index.mjs

@@ -705,21 +705,25 @@ var videoIteratorManager = ({
   let videoIteratorsCreated = 0;
   let videoFrameIterator = null;
   let framesRendered = 0;
-  canvas.width = videoTrack.displayWidth;
-  canvas.height = videoTrack.displayHeight;
+  if (canvas) {
+    canvas.width = videoTrack.displayWidth;
+    canvas.height = videoTrack.displayHeight;
+  }
   const canvasSink = new CanvasSink(videoTrack, {
     poolSize: 2,
     fit: "contain",
     alpha: true
   });
   const drawFrame = (frame) => {
-    context.clearRect(0, 0, canvas.width, canvas.height);
-    context.drawImage(frame.canvas, 0, 0);
+    if (context && canvas) {
+      context.clearRect(0, 0, canvas.width, canvas.height);
+      context.drawImage(frame.canvas, 0, 0);
+    }
     framesRendered++;
     drawDebugOverlay();
     const callback = getOnVideoFrameCallback();
     if (callback) {
-      callback(canvas);
+      callback(frame.canvas);
     }
     Internals2.Log.trace({ logLevel, tag: "@remotion/media" }, `[MediaPlayer] Drew frame ${frame.timestamp.toFixed(3)}s`);
   };
@@ -765,7 +769,9 @@ var videoIteratorManager = ({
     seek,
     destroy: () => {
       videoFrameIterator?.destroy();
-      context.clearRect(0, 0, canvas.width, canvas.height);
+      if (context && canvas) {
+        context.clearRect(0, 0, canvas.width, canvas.height);
+      }
       videoFrameIterator = null;
     },
     getVideoFrameIterator: () => videoFrameIterator,
@@ -816,7 +822,8 @@ class MediaPlayer {
     debugOverlay,
     bufferState,
     isPremounting,
-    isPostmounting
+    isPostmounting,
+    onVideoFrameCallback
   }) {
     this.canvas = canvas ?? null;
     this.src = src;
@@ -834,6 +841,7 @@ class MediaPlayer {
     this.isPremounting = isPremounting;
     this.isPostmounting = isPostmounting;
     this.nonceManager = makeNonceManager();
+    this.onVideoFrameCallback = onVideoFrameCallback;
     this.input = new Input({
       source: new UrlSource(this.src),
       formats: ALL_FORMATS
@@ -891,7 +899,7 @@ class MediaPlayer {
       if (!videoTrack && !audioTrack) {
         return { type: "no-tracks" };
       }
-      if (videoTrack && this.canvas && this.context) {
+      if (videoTrack) {
         const canDecode = await videoTrack.canDecode();
         if (!canDecode) {
           return { type: "cannot-decode" };
@@ -1429,6 +1437,10 @@ var AudioForPreviewAssertedShowing = ({
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
   const isPlayerBuffering = Internals6.useIsPlayerBuffering(bufferingContext);
+  const initialIsPremounting = useRef(isPremounting);
+  const initialIsPostmounting = useRef(isPostmounting);
+  const initialGlobalPlaybackRate = useRef(globalPlaybackRate);
+  const initialPlaybackRate = useRef(playbackRate);
   useEffect2(() => {
     if (!sharedAudioContext)
       return;
@@ -1444,13 +1456,14 @@ var AudioForPreviewAssertedShowing = ({
         trimBefore: initialTrimBeforeRef.current,
         fps: videoConfig.fps,
         canvas: null,
-        playbackRate,
+        playbackRate: initialPlaybackRate.current,
         audioStreamIndex: audioStreamIndex ?? 0,
         debugOverlay: false,
         bufferState: buffer,
-        isPostmounting,
-        isPremounting,
-        globalPlaybackRate
+        isPostmounting: initialIsPostmounting.current,
+        isPremounting: initialIsPremounting.current,
+        globalPlaybackRate: initialGlobalPlaybackRate.current,
+        onVideoFrameCallback: null
       });
       mediaPlayerRef.current = player;
       player.initialize(currentTimeRef.current).then((result) => {
@@ -1517,14 +1530,10 @@ var AudioForPreviewAssertedShowing = ({
     sharedAudioContext,
     currentTimeRef,
     loop,
-    playbackRate,
     videoConfig.fps,
     audioStreamIndex,
     disallowFallbackToHtml5Audio,
-    buffer,
-    isPremounting,
-    isPostmounting,
-    globalPlaybackRate
+    buffer
   ]);
   useLayoutEffect(() => {
     const audioPlayer = mediaPlayerRef.current;
@@ -3700,7 +3709,8 @@ var VideoForPreviewAssertedShowing = ({
   disallowFallbackToOffthreadVideo,
   fallbackOffthreadVideoProps,
   audioStreamIndex,
-  debugOverlay
+  debugOverlay,
+  headless
 }) => {
   const src = usePreload2(unpreloadedSrc);
   const canvasRef = useRef2(null);
@@ -3709,6 +3719,7 @@ var VideoForPreviewAssertedShowing = ({
   const mediaPlayerRef = useRef2(null);
   const initialTrimBeforeRef = useRef2(trimBefore);
   const initialTrimAfterRef = useRef2(trimAfter);
+  const initialOnVideoFrameRef = useRef2(onVideoFrame);
   const [mediaPlayerReady, setMediaPlayerReady] = useState4(false);
   const [shouldFallbackToNativeVideo, setShouldFallbackToNativeVideo] = useState4(false);
   const [playing] = Timeline2.usePlayingState();
@@ -3765,9 +3776,11 @@ var VideoForPreviewAssertedShowing = ({
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
   const isPlayerBuffering = Internals15.useIsPlayerBuffering(buffering);
+  const initialIsPremounting = useRef2(isPremounting);
+  const initialIsPostmounting = useRef2(isPostmounting);
+  const initialGlobalPlaybackRate = useRef2(globalPlaybackRate);
+  const initialPlaybackRate = useRef2(playbackRate);
   useEffect3(() => {
-    if (!canvasRef.current)
-      return;
     if (!sharedAudioContext)
       return;
     if (!sharedAudioContext.audioContext)
@@ -3782,13 +3795,14 @@ var VideoForPreviewAssertedShowing = ({
         trimAfter: initialTrimAfterRef.current,
         trimBefore: initialTrimBeforeRef.current,
         fps: videoConfig.fps,
-        playbackRate,
+        playbackRate: initialPlaybackRate.current,
         audioStreamIndex,
         debugOverlay,
         bufferState: buffer,
-        isPremounting,
-        isPostmounting,
-        globalPlaybackRate
+        isPremounting: initialIsPremounting.current,
+        isPostmounting: initialIsPostmounting.current,
+        globalPlaybackRate: initialGlobalPlaybackRate.current,
+        onVideoFrameCallback: initialOnVideoFrameRef.current ?? null
       });
       mediaPlayerRef.current = player;
       player.initialize(currentTimeRef.current).then((result) => {
@@ -3849,19 +3863,15 @@ var VideoForPreviewAssertedShowing = ({
       setShouldFallbackToNativeVideo(false);
     };
   }, [
-    preloadedSrc,
-    logLevel,
-    sharedAudioContext,
-    loop,
-    videoConfig.fps,
-    playbackRate,
-    disallowFallbackToOffthreadVideo,
     audioStreamIndex,
-    debugOverlay,
     buffer,
-    isPremounting,
-    isPostmounting,
-    globalPlaybackRate
+    debugOverlay,
+    disallowFallbackToOffthreadVideo,
+    logLevel,
+    loop,
+    preloadedSrc,
+    sharedAudioContext,
+    videoConfig.fps
   ]);
   const classNameValue = useMemo4(() => {
     return [Internals15.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals15.truthy).join(" ");
@@ -3991,6 +4001,9 @@ var VideoForPreviewAssertedShowing = ({
       ...fallbackOffthreadVideoProps
     });
   }
+  if (headless) {
+    return null;
+  }
   return /* @__PURE__ */ jsx4("canvas", {
     ref: canvasRef,
     width: videoConfig.width,
@@ -4070,7 +4083,8 @@ var VideoForRendering = ({
   stack,
   toneFrequency,
   trimAfterValue,
-  trimBeforeValue
+  trimBeforeValue,
+  headless
 }) => {
   if (!src) {
     throw new TypeError("No `src` was passed to <Video>.");
@@ -4099,13 +4113,13 @@ var VideoForRendering = ({
     throw error;
   }
   useLayoutEffect4(() => {
-    if (!canvasRef.current) {
+    if (!canvasRef.current && !headless) {
       return;
     }
     if (replaceWithOffthreadVideo) {
       return;
     }
-    if (!canvasRef.current?.getContext) {
+    if (!canvasRef.current?.getContext && !headless) {
       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;
@@ -4193,13 +4207,12 @@ var VideoForRendering = ({
         const context = canvasRef.current?.getContext("2d", {
           alpha: true
         });
-        if (!context) {
-          return;
+        if (context) {
+          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);
         }
-        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();
       } else if (videoEnabled) {
         const context = canvasRef.current?.getContext("2d", {
@@ -4273,7 +4286,8 @@ var VideoForRendering = ({
     audioEnabled,
     videoEnabled,
     maxCacheSize,
-    cancelRender3
+    cancelRender3,
+    headless
   ]);
   const classNameValue = useMemo5(() => {
     return [Internals16.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals16.truthy).join(" ");
@@ -4332,6 +4346,9 @@ var VideoForRendering = ({
     }
     return fallback;
   }
+  if (headless) {
+    return null;
+  }
   return /* @__PURE__ */ jsx5("canvas", {
     ref: canvasRef,
     style,
@@ -4364,7 +4381,8 @@ var InnerVideo = ({
   stack,
   toneFrequency,
   showInTimeline,
-  debugOverlay
+  debugOverlay,
+  headless
 }) => {
   const environment = useRemotionEnvironment4();
   if (typeof src !== "string") {
@@ -4404,7 +4422,8 @@ var InnerVideo = ({
       volume,
       toneFrequency,
       trimAfterValue,
-      trimBeforeValue
+      trimBeforeValue,
+      headless
     });
   }
   return /* @__PURE__ */ jsx6(VideoForPreview, {
@@ -4426,7 +4445,8 @@ var InnerVideo = ({
     stack: stack ?? null,
     disallowFallbackToOffthreadVideo,
     fallbackOffthreadVideoProps,
-    debugOverlay: debugOverlay ?? false
+    debugOverlay: debugOverlay ?? false,
+    headless: headless ?? false
   });
 };
 var Video = ({
@@ -4451,7 +4471,8 @@ var Video = ({
   volume,
   stack,
   toneFrequency,
-  debugOverlay
+  debugOverlay,
+  headless
 }) => {
   return /* @__PURE__ */ jsx6(InnerVideo, {
     audioStreamIndex: audioStreamIndex ?? 0,
@@ -4475,7 +4496,8 @@ var Video = ({
     volume: volume ?? 1,
     toneFrequency: toneFrequency ?? 1,
     stack,
-    debugOverlay: debugOverlay ?? false
+    debugOverlay: debugOverlay ?? false,
+    headless: headless ?? false
   });
 };
 Internals17.addSequenceStackTraces(Video);

package/dist/media-player.d.ts

@@ -42,7 +42,7 @@ export declare class MediaPlayer {
     private isPremounting;
     private isPostmounting;
     private seekPromiseChain;
-    constructor({ canvas, src, logLevel, sharedAudioContext, loop, trimBefore, trimAfter, playbackRate, globalPlaybackRate, audioStreamIndex, fps, debugOverlay, bufferState, isPremounting, isPostmounting, }: {
+    constructor({ canvas, src, logLevel, sharedAudioContext, loop, trimBefore, trimAfter, playbackRate, globalPlaybackRate, audioStreamIndex, fps, debugOverlay, bufferState, isPremounting, isPostmounting, onVideoFrameCallback, }: {
         canvas: HTMLCanvasElement | OffscreenCanvas | null;
         src: string;
         logLevel: LogLevel;
@@ -58,6 +58,7 @@ export declare class MediaPlayer {
         bufferState: ReturnType<typeof useBufferState>;
         isPremounting: boolean;
         isPostmounting: boolean;
+        onVideoFrameCallback: null | ((frame: CanvasImageSource) => void);
     });
     private input;
     private isDisposalError;

package/dist/media-player.js

@@ -8,7 +8,7 @@ import { isNetworkError } from './is-type-of-error';
 import { makeNonceManager } from './nonce-manager';
 import { videoIteratorManager } from './video-iterator-manager';
 export class MediaPlayer {
-    constructor({ canvas, src, logLevel, sharedAudioContext, loop, trimBefore, trimAfter, playbackRate, globalPlaybackRate, audioStreamIndex, fps, debugOverlay, bufferState, isPremounting, isPostmounting, }) {
+    constructor({ canvas, src, logLevel, sharedAudioContext, loop, trimBefore, trimAfter, playbackRate, globalPlaybackRate, audioStreamIndex, fps, debugOverlay, bufferState, isPremounting, isPostmounting, onVideoFrameCallback, }) {
         this.audioIteratorManager = null;
         this.videoIteratorManager = null;
         // this is the time difference between Web Audio timeline
@@ -70,6 +70,7 @@ export class MediaPlayer {
         this.isPremounting = isPremounting;
         this.isPostmounting = isPostmounting;
         this.nonceManager = makeNonceManager();
+        this.onVideoFrameCallback = onVideoFrameCallback;
         this.input = new Input({
             source: new UrlSource(this.src),
             formats: ALL_FORMATS,
@@ -128,7 +129,7 @@ export class MediaPlayer {
             if (!videoTrack && !audioTrack) {
                 return { type: 'no-tracks' };
             }
-            if (videoTrack && this.canvas && this.context) {
+            if (videoTrack) {
                 const canDecode = await videoTrack.canDecode();
                 if (!canDecode) {
                     return { type: 'cannot-decode' };

package/dist/video/props.d.ts

@@ -38,6 +38,7 @@ type OptionalVideoProps = {
     toneFrequency: number;
     showInTimeline: boolean;
     debugOverlay: boolean;
+    headless: boolean;
 };
 export type InnerVideoProps = MandatoryVideoProps & OuterVideoProps & OptionalVideoProps;
 export type VideoProps = MandatoryVideoProps & Partial<OuterVideoProps> & Partial<OptionalVideoProps>;

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

@@ -21,6 +21,7 @@ type VideoForPreviewProps = {
     readonly fallbackOffthreadVideoProps: FallbackOffthreadVideoProps;
     readonly audioStreamIndex: number;
     readonly debugOverlay: boolean;
+    readonly headless: boolean;
 };
 export declare const VideoForPreview: React.FC<VideoForPreviewProps>;
 export {};

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

@@ -6,7 +6,7 @@ import { MediaPlayer } from '../media-player';
 import { useLoopDisplay } from '../show-in-timeline';
 import { useMediaInTimeline } from '../use-media-in-timeline';
 const { useUnsafeVideoConfig, Timeline, SharedAudioContext, useMediaMutedState, useMediaVolumeState, useFrameForVolumeProp, evaluateVolume, warnAboutTooHighVolume, usePreload, SequenceContext, SequenceVisibilityToggleContext, } = Internals;
-const VideoForPreviewAssertedShowing = ({ src: unpreloadedSrc, style, playbackRate, logLevel, className, muted, volume, loopVolumeCurveBehavior, onVideoFrame, showInTimeline, loop, name, trimAfter, trimBefore, stack, disallowFallbackToOffthreadVideo, fallbackOffthreadVideoProps, audioStreamIndex, debugOverlay, }) => {
+const VideoForPreviewAssertedShowing = ({ src: unpreloadedSrc, style, playbackRate, logLevel, className, muted, volume, loopVolumeCurveBehavior, onVideoFrame, showInTimeline, loop, name, trimAfter, trimBefore, stack, disallowFallbackToOffthreadVideo, fallbackOffthreadVideoProps, audioStreamIndex, debugOverlay, headless, }) => {
     const src = usePreload(unpreloadedSrc);
     const canvasRef = useRef(null);
     const videoConfig = useUnsafeVideoConfig();
@@ -14,6 +14,7 @@ const VideoForPreviewAssertedShowing = ({ src: unpreloadedSrc, style, playbackRa
     const mediaPlayerRef = useRef(null);
     const initialTrimBeforeRef = useRef(trimBefore);
     const initialTrimAfterRef = useRef(trimAfter);
+    const initialOnVideoFrameRef = useRef(onVideoFrame);
     const [mediaPlayerReady, setMediaPlayerReady] = useState(false);
     const [shouldFallbackToNativeVideo, setShouldFallbackToNativeVideo] = useState(false);
     const [playing] = Timeline.usePlayingState();
@@ -70,9 +71,11 @@ const VideoForPreviewAssertedShowing = ({ src: unpreloadedSrc, style, playbackRa
         throw new Error('useMediaPlayback must be used inside a <BufferingContext>');
     }
     const isPlayerBuffering = Internals.useIsPlayerBuffering(buffering);
+    const initialIsPremounting = useRef(isPremounting);
+    const initialIsPostmounting = useRef(isPostmounting);
+    const initialGlobalPlaybackRate = useRef(globalPlaybackRate);
+    const initialPlaybackRate = useRef(playbackRate);
     useEffect(() => {
-        if (!canvasRef.current)
-            return;
         if (!sharedAudioContext)
             return;
         if (!sharedAudioContext.audioContext)
@@ -87,13 +90,14 @@ const VideoForPreviewAssertedShowing = ({ src: unpreloadedSrc, style, playbackRa
                 trimAfter: initialTrimAfterRef.current,
                 trimBefore: initialTrimBeforeRef.current,
                 fps: videoConfig.fps,
-                playbackRate,
+                playbackRate: initialPlaybackRate.current,
                 audioStreamIndex,
                 debugOverlay,
                 bufferState: buffer,
-                isPremounting,
-                isPostmounting,
-                globalPlaybackRate,
+                isPremounting: initialIsPremounting.current,
+                isPostmounting: initialIsPostmounting.current,
+                globalPlaybackRate: initialGlobalPlaybackRate.current,
+                onVideoFrameCallback: initialOnVideoFrameRef.current ?? null,
             });
             mediaPlayerRef.current = player;
             player
@@ -158,19 +162,15 @@ const VideoForPreviewAssertedShowing = ({ src: unpreloadedSrc, style, playbackRa
             setShouldFallbackToNativeVideo(false);
         };
     }, [
-        preloadedSrc,
+        audioStreamIndex,
+        buffer,
+        debugOverlay,
+        disallowFallbackToOffthreadVideo,
         logLevel,
-        sharedAudioContext,
         loop,
+        preloadedSrc,
+        sharedAudioContext,
         videoConfig.fps,
-        playbackRate,
-        disallowFallbackToOffthreadVideo,
-        audioStreamIndex,
-        debugOverlay,
-        buffer,
-        isPremounting,
-        isPostmounting,
-        globalPlaybackRate,
     ]);
     const classNameValue = useMemo(() => {
         return [Internals.OBJECTFIT_CONTAIN_CLASS_NAME, className]
@@ -292,6 +292,9 @@ const VideoForPreviewAssertedShowing = ({ src: unpreloadedSrc, style, playbackRa
         // not using <OffthreadVideo> because it does not support looping
         return (_jsx(Html5Video, { src: src, style: actualStyle, className: className, muted: muted, volume: volume, trimAfter: trimAfter, trimBefore: trimBefore, playbackRate: playbackRate, loopVolumeCurveBehavior: loopVolumeCurveBehavior, name: name, loop: loop, showInTimeline: showInTimeline, stack: stack ?? undefined, ...fallbackOffthreadVideoProps }));
     }
+    if (headless) {
+        return null;
+    }
     return (_jsx("canvas", { ref: canvasRef, width: videoConfig.width, height: videoConfig.height, style: actualStyle, className: classNameValue }));
 };
 export const VideoForPreview = (props) => {

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

@@ -22,6 +22,7 @@ type InnerVideoProps = {
     readonly toneFrequency: number;
     readonly trimBeforeValue: number | undefined;
     readonly trimAfterValue: number | undefined;
+    readonly headless: boolean;
 };
 export declare const VideoForRendering: React.FC<InnerVideoProps>;
 export {};

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

@@ -6,7 +6,7 @@ import { applyVolume } from '../convert-audiodata/apply-volume';
 import { TARGET_SAMPLE_RATE } from '../convert-audiodata/resample-audiodata';
 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, onVideoFrame, logLevel, loop, style, className, fallbackOffthreadVideoProps, audioStreamIndex, name, disallowFallbackToOffthreadVideo, stack, toneFrequency, trimAfterValue, trimBeforeValue, }) => {
+export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted, loopVolumeCurveBehavior, delayRenderRetries, delayRenderTimeoutInMilliseconds, onVideoFrame, logLevel, loop, style, className, fallbackOffthreadVideoProps, audioStreamIndex, name, disallowFallbackToOffthreadVideo, stack, toneFrequency, trimAfterValue, trimBeforeValue, headless, }) => {
     if (!src) {
         throw new TypeError('No `src` was passed to <Video>.');
     }
@@ -36,13 +36,13 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
         throw error;
     }
     useLayoutEffect(() => {
-        if (!canvasRef.current) {
+        if (!canvasRef.current && !headless) {
             return;
         }
         if (replaceWithOffthreadVideo) {
             return;
         }
-        if (!canvasRef.current?.getContext) {
+        if (!canvasRef.current?.getContext && !headless) {
             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;
@@ -127,13 +127,13 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
                 const context = canvasRef.current?.getContext('2d', {
                     alpha: true,
                 });
-                if (!context) {
-                    return;
+                // Could be in headless mode
+                if (context) {
+                    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);
                 }
-                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();
             }
             else if (videoEnabled) {
@@ -214,6 +214,7 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
         videoEnabled,
         maxCacheSize,
         cancelRender,
+        headless,
     ]);
     const classNameValue = useMemo(() => {
         return [Internals.OBJECTFIT_CONTAIN_CLASS_NAME, className]
@@ -239,5 +240,8 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
         }
         return fallback;
     }
+    if (headless) {
+        return null;
+    }
     return _jsx("canvas", { ref: canvasRef, style: style, className: classNameValue });
 };

package/dist/video/video.js

@@ -3,7 +3,7 @@ import { Internals, useRemotionEnvironment } from 'remotion';
 import { VideoForPreview } from './video-for-preview';
 import { VideoForRendering } from './video-for-rendering';
 const { validateMediaTrimProps, resolveTrimProps, validateMediaProps } = Internals;
-const InnerVideo = ({ src, audioStreamIndex, className, delayRenderRetries, delayRenderTimeoutInMilliseconds, disallowFallbackToOffthreadVideo, fallbackOffthreadVideoProps, logLevel, loop, loopVolumeCurveBehavior, muted, name, onVideoFrame, playbackRate, style, trimAfter, trimBefore, volume, stack, toneFrequency, showInTimeline, debugOverlay, }) => {
+const InnerVideo = ({ src, audioStreamIndex, className, delayRenderRetries, delayRenderTimeoutInMilliseconds, disallowFallbackToOffthreadVideo, fallbackOffthreadVideoProps, logLevel, loop, loopVolumeCurveBehavior, muted, name, onVideoFrame, playbackRate, style, trimAfter, trimBefore, volume, stack, toneFrequency, showInTimeline, debugOverlay, headless, }) => {
     const environment = useRemotionEnvironment();
     if (typeof src !== 'string') {
         throw new TypeError(`The \`<Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(src)} instead.`);
@@ -22,14 +22,14 @@ const InnerVideo = ({ src, audioStreamIndex, className, delayRenderRetries, dela
     });
     validateMediaProps({ playbackRate, volume }, 'Video');
     if (environment.isRendering) {
-        return (_jsx(VideoForRendering, { audioStreamIndex: audioStreamIndex ?? 0, className: className, delayRenderRetries: delayRenderRetries ?? null, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? null, disallowFallbackToOffthreadVideo: disallowFallbackToOffthreadVideo ?? false, name: name, fallbackOffthreadVideoProps: fallbackOffthreadVideoProps, logLevel: logLevel, loop: loop, loopVolumeCurveBehavior: loopVolumeCurveBehavior, muted: muted, onVideoFrame: onVideoFrame, playbackRate: playbackRate, src: src, stack: stack, style: style, volume: volume, toneFrequency: toneFrequency, trimAfterValue: trimAfterValue, trimBeforeValue: trimBeforeValue }));
+        return (_jsx(VideoForRendering, { audioStreamIndex: audioStreamIndex ?? 0, className: className, delayRenderRetries: delayRenderRetries ?? null, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? null, disallowFallbackToOffthreadVideo: disallowFallbackToOffthreadVideo ?? false, name: name, fallbackOffthreadVideoProps: fallbackOffthreadVideoProps, logLevel: logLevel, loop: loop, loopVolumeCurveBehavior: loopVolumeCurveBehavior, muted: muted, onVideoFrame: onVideoFrame, playbackRate: playbackRate, src: src, stack: stack, style: style, volume: volume, toneFrequency: toneFrequency, trimAfterValue: trimAfterValue, trimBeforeValue: trimBeforeValue, headless: headless }));
     }
-    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 }));
+    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, }) => {
+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 }));
+                : '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 }));
 };
 Internals.addSequenceStackTraces(Video);

package/dist/video-iterator-manager.d.ts

@@ -6,8 +6,8 @@ export declare const videoIteratorManager: ({ delayPlaybackHandleIfNotPremountin
     delayPlaybackHandleIfNotPremounting: () => {
         unblock: () => void;
     };
-    context: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D;
-    canvas: OffscreenCanvas | HTMLCanvasElement;
+    context: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D | null;
+    canvas: OffscreenCanvas | HTMLCanvasElement | null;
     getOnVideoFrameCallback: () => null | ((frame: CanvasImageSource) => void);
     logLevel: LogLevel;
     drawDebugOverlay: () => void;

package/dist/video-iterator-manager.js

@@ -5,21 +5,25 @@ export const videoIteratorManager = ({ delayPlaybackHandleIfNotPremounting, canv
     let videoIteratorsCreated = 0;
     let videoFrameIterator = null;
     let framesRendered = 0;
-    canvas.width = videoTrack.displayWidth;
-    canvas.height = videoTrack.displayHeight;
+    if (canvas) {
+        canvas.width = videoTrack.displayWidth;
+        canvas.height = videoTrack.displayHeight;
+    }
     const canvasSink = new CanvasSink(videoTrack, {
         poolSize: 2,
         fit: 'contain',
         alpha: true,
     });
     const drawFrame = (frame) => {
-        context.clearRect(0, 0, canvas.width, canvas.height);
-        context.drawImage(frame.canvas, 0, 0);
+        if (context && canvas) {
+            context.clearRect(0, 0, canvas.width, canvas.height);
+            context.drawImage(frame.canvas, 0, 0);
+        }
         framesRendered++;
         drawDebugOverlay();
         const callback = getOnVideoFrameCallback();
         if (callback) {
-            callback(canvas);
+            callback(frame.canvas);
         }
         Internals.Log.trace({ logLevel, tag: '@remotion/media' }, `[MediaPlayer] Drew frame ${frame.timestamp.toFixed(3)}s`);
     };
@@ -73,7 +77,9 @@ export const videoIteratorManager = ({ delayPlaybackHandleIfNotPremounting, canv
         seek,
         destroy: () => {
             videoFrameIterator?.destroy();
-            context.clearRect(0, 0, canvas.width, canvas.height);
+            if (context && canvas) {
+                context.clearRect(0, 0, canvas.width, canvas.height);
+            }
             videoFrameIterator = null;
         },
         getVideoFrameIterator: () => videoFrameIterator,