@remotion/media 4.0.351

package/dist/keyframe-manager.js

@@ -0,0 +1,170 @@
+import { getFramesSinceKeyframe } from './get-frames-since-keyframe';
+import { Log } from './log';
+const MAX_CACHE_SIZE = 1000 * 1000 * 1000; // 1GB
+export const makeKeyframeManager = () => {
+    // src => {[startTimestampInSeconds]: KeyframeBank
+    const sources = {};
+    const addKeyframeBank = ({ src, bank, startTimestampInSeconds, }) => {
+        sources[src] = sources[src] ?? {};
+        sources[src][startTimestampInSeconds] = bank;
+    };
+    const logCacheStats = async (logLevel) => {
+        let count = 0;
+        let totalSize = 0;
+        for (const src in sources) {
+            for (const bank in sources[src]) {
+                const v = await sources[src][bank];
+                const { size, timestamps } = v.getOpenFrameCount();
+                count += timestamps.length;
+                totalSize += size;
+                if (size === 0) {
+                    continue;
+                }
+                Log.verbose(logLevel, `[Video] Open frames for src ${src}: ${timestamps.join(', ')}}`);
+            }
+        }
+        Log.verbose(logLevel, `[Video] Cache stats: ${count} open frames, ${totalSize} bytes`);
+    };
+    const getCacheStats = async () => {
+        let count = 0;
+        let totalSize = 0;
+        for (const src in sources) {
+            for (const bank in sources[src]) {
+                const v = await sources[src][bank];
+                const { timestamps, size } = v.getOpenFrameCount();
+                count += timestamps.length;
+                totalSize += size;
+                if (size === 0) {
+                    continue;
+                }
+            }
+        }
+        return { count, totalSize };
+    };
+    const getTheKeyframeBankMostInThePast = async () => {
+        let mostInThePast = null;
+        let mostInThePastBank = null;
+        for (const src in sources) {
+            for (const b in sources[src]) {
+                const bank = await sources[src][b];
+                const lastUsed = bank.getLastUsed();
+                if (mostInThePast === null || lastUsed < mostInThePast) {
+                    mostInThePast = lastUsed;
+                    mostInThePastBank = { src, bank };
+                }
+            }
+        }
+        if (!mostInThePastBank) {
+            throw new Error('No keyframe bank found');
+        }
+        return mostInThePastBank;
+    };
+    const ensureToStayUnderMaxCacheSize = async (logLevel) => {
+        let cacheStats = await getCacheStats();
+        while (cacheStats.totalSize > MAX_CACHE_SIZE) {
+            const { bank: mostInThePastBank, src: mostInThePastSrc } = await getTheKeyframeBankMostInThePast();
+            if (mostInThePastBank) {
+                await mostInThePastBank.prepareForDeletion();
+                delete sources[mostInThePastSrc][mostInThePastBank.startTimestampInSeconds];
+                Log.verbose(logLevel, `[Video] Deleted frames for src ${mostInThePastSrc} from ${mostInThePastBank.startTimestampInSeconds}sec to ${mostInThePastBank.endTimestampInSeconds}sec to free up memory.`);
+            }
+            cacheStats = await getCacheStats();
+        }
+    };
+    const clearKeyframeBanksBeforeTime = async ({ timestampInSeconds, src, logLevel, }) => {
+        // TODO: make it dependent on the fps and concurrency
+        const SAFE_BACK_WINDOW_IN_SECONDS = 1;
+        const threshold = timestampInSeconds - SAFE_BACK_WINDOW_IN_SECONDS;
+        if (!sources[src]) {
+            return;
+        }
+        const banks = Object.keys(sources[src]);
+        for (const startTimeInSeconds of banks) {
+            const bank = await sources[src][startTimeInSeconds];
+            const { endTimestampInSeconds, startTimestampInSeconds } = bank;
+            if (endTimestampInSeconds < threshold) {
+                await bank.prepareForDeletion();
+                Log.verbose(logLevel, `[Video] Cleared frames for src ${src} from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
+                delete sources[src][startTimeInSeconds];
+            }
+            else {
+                bank.deleteFramesBeforeTimestamp({
+                    timestampInSeconds: threshold,
+                    logLevel,
+                    src,
+                });
+            }
+        }
+        await logCacheStats(logLevel);
+    };
+    const getKeyframeBankOrRefetch = async ({ packetSink, timestamp, videoSampleSink, src, logLevel, }) => {
+        const startPacket = await packetSink.getKeyPacket(timestamp, {
+            verifyKeyPackets: true,
+        });
+        if (!startPacket) {
+            throw new Error(`No key packet found for timestamp ${timestamp}`);
+        }
+        const startTimestampInSeconds = startPacket.timestamp;
+        const existingBank = sources[src]?.[startTimestampInSeconds];
+        // Bank does not yet exist, we need to fetch
+        if (!existingBank) {
+            const newKeyframeBank = getFramesSinceKeyframe({
+                packetSink,
+                videoSampleSink,
+                startPacket,
+            });
+            addKeyframeBank({ src, bank: newKeyframeBank, startTimestampInSeconds });
+            return newKeyframeBank;
+        }
+        // Bank exists and still has the frame we want
+        if (await (await existingBank).hasTimestampInSecond(timestamp)) {
+            return existingBank;
+        }
+        Log.verbose(logLevel, `[Video] Bank exists but frames have already been evicted!`);
+        // Bank exists but frames have already been evicted!
+        // First delete it entirely
+        await (await existingBank).prepareForDeletion();
+        delete sources[src][startTimestampInSeconds];
+        // Then refetch
+        const replacementKeybank = getFramesSinceKeyframe({
+            packetSink,
+            videoSampleSink,
+            startPacket,
+        });
+        addKeyframeBank({ src, bank: replacementKeybank, startTimestampInSeconds });
+        return replacementKeybank;
+    };
+    const requestKeyframeBank = async ({ packetSink, timestamp, videoSampleSink, src, logLevel, }) => {
+        await ensureToStayUnderMaxCacheSize(logLevel);
+        await clearKeyframeBanksBeforeTime({
+            timestampInSeconds: timestamp,
+            src,
+            logLevel,
+        });
+        const keyframeBank = await getKeyframeBankOrRefetch({
+            packetSink,
+            timestamp,
+            videoSampleSink,
+            src,
+            logLevel,
+        });
+        return keyframeBank;
+    };
+    const clearAll = async () => {
+        const srcs = Object.keys(sources);
+        for (const src of srcs) {
+            const banks = Object.keys(sources[src]);
+            for (const startTimeInSeconds of banks) {
+                const bank = await sources[src][startTimeInSeconds];
+                await bank.prepareForDeletion();
+                delete sources[src][startTimeInSeconds];
+            }
+        }
+    };
+    return {
+        requestKeyframeBank,
+        addKeyframeBank,
+        getCacheStats,
+        clearAll,
+    };
+};

package/dist/log.d.ts

@@ -0,0 +1,10 @@
+export declare const logLevels: readonly ["trace", "verbose", "info", "warn", "error"];
+export type LogLevel = (typeof logLevels)[number];
+export declare const isEqualOrBelowLogLevel: (currentLevel: LogLevel, level: LogLevel) => boolean;
+export declare const Log: {
+    trace: (logLevel: LogLevel, message?: any, ...optionalParams: any[]) => void;
+    verbose: (logLevel: LogLevel, message?: any, ...optionalParams: any[]) => void;
+    info: (logLevel: LogLevel, message?: any, ...optionalParams: any[]) => void;
+    warn: (logLevel: LogLevel, message?: any, ...optionalParams: any[]) => void;
+    error: (message?: any, ...optionalParams: any[]) => void;
+};

package/dist/log.js

@@ -0,0 +1,33 @@
+/* eslint-disable no-console */
+export const logLevels = ['trace', 'verbose', 'info', 'warn', 'error'];
+const getNumberForLogLevel = (level) => {
+    return logLevels.indexOf(level);
+};
+export const isEqualOrBelowLogLevel = (currentLevel, level) => {
+    return getNumberForLogLevel(currentLevel) <= getNumberForLogLevel(level);
+};
+export const Log = {
+    trace: (logLevel, ...args) => {
+        if (isEqualOrBelowLogLevel(logLevel, 'trace')) {
+            return console.log(...args);
+        }
+    },
+    verbose: (logLevel, ...args) => {
+        if (isEqualOrBelowLogLevel(logLevel, 'verbose')) {
+            return console.log(...args);
+        }
+    },
+    info: (logLevel, ...args) => {
+        if (isEqualOrBelowLogLevel(logLevel, 'info')) {
+            return console.log(...args);
+        }
+    },
+    warn: (logLevel, ...args) => {
+        if (isEqualOrBelowLogLevel(logLevel, 'warn')) {
+            return console.warn(...args);
+        }
+    },
+    error: (...args) => {
+        return console.error(...args);
+    },
+};

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { VideoProps } from './props';
+export declare const VideoForRendering: React.FC<VideoProps>;

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

@@ -0,0 +1,108 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { cancelRender, Internals, useCurrentFrame, useDelayRender, useRemotionEnvironment, } from 'remotion';
+import { extractFrameViaBroadcastChannel } from './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, }) => {
+    const absoluteFrame = Internals.useTimelinePosition();
+    const videoConfig = Internals.useUnsafeVideoConfig();
+    const canvasRef = useRef(null);
+    const { registerRenderAsset, unregisterRenderAsset } = useContext(Internals.RenderAssetManager);
+    const frame = useCurrentFrame();
+    const volumePropsFrame = Internals.useFrameForVolumeProp(loopVolumeCurveBehavior ?? 'repeat');
+    const environment = useRemotionEnvironment();
+    const [id] = useState(() => `${Math.random()}`.replace('0.', ''));
+    if (!videoConfig) {
+        throw new Error('No video config found');
+    }
+    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 { fps } = videoConfig;
+    const { delayRender, continueRender } = useDelayRender();
+    useLayoutEffect(() => {
+        if (!canvasRef.current) {
+            return;
+        }
+        const actualFps = playbackRate ? fps / playbackRate : fps;
+        const timestamp = frame / actualFps;
+        const durationInSeconds = 1 / actualFps;
+        const newHandle = delayRender(`Extracting frame number ${frame}`, {
+            retries: delayRenderRetries ?? undefined,
+            timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined,
+        });
+        extractFrameViaBroadcastChannel({
+            src,
+            timeInSeconds: timestamp,
+            durationInSeconds,
+            logLevel: logLevel ?? 'info',
+            shouldRenderAudio,
+            isClientSideRendering: environment.isClientSideRendering,
+        })
+            .then(({ frame: imageBitmap, audio }) => {
+            if (!imageBitmap) {
+                cancelRender(new Error('No video frame found'));
+            }
+            onVideoFrame?.(imageBitmap);
+            canvasRef.current?.getContext('2d')?.drawImage(imageBitmap, 0, 0);
+            imageBitmap.close();
+            if (audio) {
+                registerRenderAsset({
+                    type: 'inline-audio',
+                    id,
+                    audio: Array.from(audio.data),
+                    sampleRate: audio.sampleRate,
+                    numberOfChannels: audio.numberOfChannels,
+                    frame: absoluteFrame,
+                    timestamp: audio.timestamp,
+                    duration: (audio.numberOfFrames / audio.sampleRate) * 1000000,
+                });
+            }
+            continueRender(newHandle);
+        })
+            .catch((error) => {
+            cancelRender(error);
+        });
+        return () => {
+            continueRender(newHandle);
+            unregisterRenderAsset(id);
+        };
+    }, [
+        absoluteFrame,
+        continueRender,
+        delayRender,
+        delayRenderRetries,
+        delayRenderTimeoutInMilliseconds,
+        environment.isClientSideRendering,
+        fps,
+        frame,
+        id,
+        logLevel,
+        onVideoFrame,
+        playbackRate,
+        registerRenderAsset,
+        shouldRenderAudio,
+        src,
+        unregisterRenderAsset,
+    ]);
+    return (_jsx("canvas", { ref: canvasRef, width: videoConfig.width, height: videoConfig.height }));
+};

package/dist/new-video.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { VideoProps } from './props';
+export declare const Video: React.FC<VideoProps>;

package/dist/new-video.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { Internals, Sequence, useRemotionEnvironment } from 'remotion';
+import { VideoForRendering } from './new-video-for-rendering';
+const { validateMediaTrimProps, resolveTrimProps, validateMediaProps, VideoForPreview, } = Internals;
+export const Video = (props) => {
+    // Should only destruct `startFrom` and `endAt` from props,
+    // rest gets drilled down
+    const { trimBefore, trimAfter, name, pauseWhenBuffering, stack, showInTimeline, ...otherProps } = props;
+    const environment = useRemotionEnvironment();
+    const onDuration = useCallback(() => undefined, []);
+    if (typeof props.src !== 'string') {
+        throw new TypeError(`The \`<Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
+    }
+    validateMediaTrimProps({
+        startFrom: undefined,
+        endAt: undefined,
+        trimBefore,
+        trimAfter,
+    });
+    const { trimBeforeValue, trimAfterValue } = resolveTrimProps({
+        startFrom: undefined,
+        endAt: undefined,
+        trimBefore,
+        trimAfter,
+    });
+    if (typeof trimBeforeValue !== 'undefined' ||
+        typeof trimAfterValue !== 'undefined') {
+        return (_jsx(Sequence, { layout: "none", from: 0 - (trimBeforeValue ?? 0), showInTimeline: false, durationInFrames: trimAfterValue, name: name, children: _jsx(Video, { pauseWhenBuffering: pauseWhenBuffering ?? false, ...otherProps }) }));
+    }
+    validateMediaProps(props, 'Video');
+    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 }));
+};

package/dist/props.d.ts

@@ -0,0 +1,29 @@
+import type { LoopVolumeCurveBehavior, VolumeProp } from 'remotion';
+import type { LogLevel } from './log';
+export type AudioProps = {
+    src: string;
+    trimBefore?: number;
+    trimAfter?: number;
+    volume?: VolumeProp;
+    loopVolumeCurveBehavior?: LoopVolumeCurveBehavior;
+    name?: string;
+    pauseWhenBuffering?: boolean;
+    showInTimeline?: boolean;
+    onAutoPlayError?: null | (() => void);
+    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
+     */
+    stack?: string;
+    logLevel?: LogLevel;
+    loop?: boolean;
+    _remotionInternalNativeLoopPassed?: boolean;
+};

package/dist/props.js

@@ -0,0 +1 @@
+export {};

package/dist/remember-actual-matroska-timestamps.d.ts

@@ -0,0 +1,4 @@
+export declare const rememberActualMatroskaTimestamps: (isMatroska: boolean) => {
+    observeTimestamp: (startTime: number) => void;
+    getRealTimestamp: (observedTimestamp: number) => number | null;
+};

package/dist/remember-actual-matroska-timestamps.js

@@ -0,0 +1,19 @@
+export const rememberActualMatroskaTimestamps = (isMatroska) => {
+    const observations = [];
+    const observeTimestamp = (startTime) => {
+        if (!isMatroska) {
+            return;
+        }
+        observations.push(startTime);
+    };
+    const getRealTimestamp = (observedTimestamp) => {
+        if (!isMatroska) {
+            return observedTimestamp;
+        }
+        return (observations.find((observation) => Math.abs(observedTimestamp - observation) < 0.001) ?? null);
+    };
+    return {
+        observeTimestamp,
+        getRealTimestamp,
+    };
+};

package/dist/serialize-videoframe.js

@@ -0,0 +1 @@
+"use strict";

package/dist/video/props.d.ts

@@ -0,0 +1,28 @@
+import type { LogLevel, LoopVolumeCurveBehavior, OnVideoFrame, VolumeProp } from 'remotion';
+export type VideoProps = {
+    src: string;
+    trimBefore?: number;
+    trimAfter?: number;
+    volume?: VolumeProp;
+    loopVolumeCurveBehavior?: LoopVolumeCurveBehavior;
+    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
+     */
+    stack?: string;
+    logLevel?: LogLevel;
+    loop?: boolean;
+};

package/dist/video/props.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { VideoProps } from './props';
+export declare const VideoForRendering: React.FC<VideoProps>;

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

@@ -0,0 +1,115 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { cancelRender, Internals, useCurrentFrame, useDelayRender, useRemotionEnvironment, } from 'remotion';
+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, }) => {
+    const absoluteFrame = Internals.useTimelinePosition();
+    const videoConfig = Internals.useUnsafeVideoConfig();
+    const canvasRef = useRef(null);
+    const { registerRenderAsset, unregisterRenderAsset } = useContext(Internals.RenderAssetManager);
+    const frame = useCurrentFrame();
+    const volumePropsFrame = Internals.useFrameForVolumeProp(loopVolumeCurveBehavior ?? 'repeat');
+    const environment = useRemotionEnvironment();
+    const [id] = useState(() => `${Math.random()}`.replace('0.', ''));
+    if (!videoConfig) {
+        throw new Error('No video config found');
+    }
+    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 { fps } = videoConfig;
+    const { delayRender, continueRender } = useDelayRender();
+    useLayoutEffect(() => {
+        if (!canvasRef.current) {
+            return;
+        }
+        const actualFps = playbackRate ? fps / playbackRate : fps;
+        const timestamp = frame / actualFps;
+        const durationInSeconds = 1 / actualFps;
+        const newHandle = delayRender(`Extracting frame number ${frame}`, {
+            retries: delayRenderRetries ?? undefined,
+            timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined,
+        });
+        extractFrameViaBroadcastChannel({
+            src,
+            timeInSeconds: timestamp,
+            durationInSeconds,
+            logLevel: logLevel ?? 'info',
+            includeAudio: shouldRenderAudio,
+            includeVideo: window.remotion_videoEnabled,
+            isClientSideRendering: environment.isClientSideRendering,
+            volume,
+            loop: loop ?? false,
+        })
+            .then(({ frame: imageBitmap, audio }) => {
+            if (imageBitmap) {
+                onVideoFrame?.(imageBitmap);
+                canvasRef.current?.getContext('2d')?.drawImage(imageBitmap, 0, 0);
+                imageBitmap.close();
+            }
+            else if (window.remotion_videoEnabled) {
+                cancelRender(new Error('No video frame found'));
+            }
+            if (audio) {
+                registerRenderAsset({
+                    type: 'inline-audio',
+                    id,
+                    audio: Array.from(audio.data),
+                    sampleRate: audio.sampleRate,
+                    numberOfChannels: audio.numberOfChannels,
+                    frame: absoluteFrame,
+                    timestamp: audio.timestamp,
+                    duration: (audio.numberOfFrames / audio.sampleRate) * 1000000,
+                });
+            }
+            continueRender(newHandle);
+        })
+            .catch((error) => {
+            cancelRender(error);
+        });
+        return () => {
+            continueRender(newHandle);
+            unregisterRenderAsset(id);
+        };
+    }, [
+        absoluteFrame,
+        continueRender,
+        delayRender,
+        delayRenderRetries,
+        delayRenderTimeoutInMilliseconds,
+        environment.isClientSideRendering,
+        fps,
+        frame,
+        id,
+        logLevel,
+        onVideoFrame,
+        playbackRate,
+        registerRenderAsset,
+        shouldRenderAudio,
+        src,
+        unregisterRenderAsset,
+        volume,
+        loop,
+    ]);
+    return (_jsx("canvas", { ref: canvasRef, style: style, width: videoConfig.width, height: videoConfig.height }));
+};

package/dist/video/video.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { VideoProps } from './props';
+export declare const Video: React.FC<VideoProps>;

package/dist/video/video.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { Internals, Sequence, useRemotionEnvironment } from 'remotion';
+import { VideoForRendering } from './video-for-rendering';
+const { validateMediaTrimProps, resolveTrimProps, validateMediaProps, VideoForPreview, } = Internals;
+export const Video = (props) => {
+    // Should only destruct `trimBefore` and `trimAfter` from props,
+    // rest gets drilled down
+    const { trimBefore, trimAfter, name, pauseWhenBuffering, stack, showInTimeline, ...otherProps } = props;
+    const environment = useRemotionEnvironment();
+    const onDuration = useCallback(() => undefined, []);
+    if (typeof props.src !== 'string') {
+        throw new TypeError(`The \`<Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
+    }
+    validateMediaTrimProps({
+        startFrom: undefined,
+        endAt: undefined,
+        trimBefore,
+        trimAfter,
+    });
+    const { trimBeforeValue, trimAfterValue } = resolveTrimProps({
+        startFrom: undefined,
+        endAt: undefined,
+        trimBefore,
+        trimAfter,
+    });
+    if (typeof trimBeforeValue !== 'undefined' ||
+        typeof trimAfterValue !== 'undefined') {
+        return (_jsx(Sequence, { layout: "none", from: 0 - (trimBeforeValue ?? 0), showInTimeline: false, durationInFrames: trimAfterValue, name: name, children: _jsx(Video, { pauseWhenBuffering: pauseWhenBuffering ?? false, ...otherProps }) }));
+    }
+    validateMediaProps(props, 'Video');
+    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 }));
+};

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

@@ -0,0 +1,16 @@
+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, }: {
+    src: string;
+    timeInSeconds: number;
+    durationInSeconds: number;
+    logLevel: LogLevel;
+    includeAudio: boolean;
+    includeVideo: boolean;
+    isClientSideRendering: boolean;
+    volume: number;
+    loop: boolean;
+}) => Promise<{
+    frame: ImageBitmap | VideoFrame | null;
+    audio: PcmS16AudioData | null;
+}>;