@remotion/media 4.0.428 → 4.0.430

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

@@ -0,0 +1,122 @@
+import { roundTo4Digits } from '../helpers/round-to-4-digits';
+export const createVideoIterator = (timeToSeek, cache) => {
+    let destroyed = false;
+    const iterator = cache.makeIteratorOrUsePrewarmed(timeToSeek);
+    let lastReturnedFrame = null;
+    let iteratorEnded = false;
+    const getNextOrNullIfNotAvailable = async () => {
+        const next = iterator.next();
+        const result = await Promise.race([
+            next,
+            new Promise((resolve) => {
+                Promise.resolve().then(() => resolve());
+            }),
+        ]);
+        if (!result) {
+            return {
+                type: 'need-to-wait-for-it',
+                waitPromise: async () => {
+                    const res = await next;
+                    if (res.value) {
+                        lastReturnedFrame = res.value;
+                    }
+                    else {
+                        iteratorEnded = true;
+                    }
+                    return res.value;
+                },
+            };
+        }
+        if (result.value) {
+            lastReturnedFrame = result.value;
+        }
+        else {
+            iteratorEnded = true;
+        }
+        return {
+            type: 'got-frame-or-end',
+            frame: result.value ?? null,
+        };
+    };
+    const destroy = () => {
+        destroyed = true;
+        lastReturnedFrame = null;
+        iterator.return().catch(() => undefined);
+    };
+    const tryToSatisfySeek = async (time) => {
+        if (lastReturnedFrame) {
+            const frameTimestamp = roundTo4Digits(lastReturnedFrame.timestamp);
+            if (roundTo4Digits(time) < frameTimestamp) {
+                return {
+                    type: 'not-satisfied',
+                    reason: `iterator is too far, most recently returned ${frameTimestamp}`,
+                };
+            }
+            const frameEndTimestamp = roundTo4Digits(lastReturnedFrame.timestamp + lastReturnedFrame.duration);
+            const timestamp = roundTo4Digits(time);
+            if (frameTimestamp <= timestamp && frameEndTimestamp > timestamp) {
+                return {
+                    type: 'satisfied',
+                    frame: lastReturnedFrame,
+                };
+            }
+        }
+        if (iteratorEnded) {
+            if (lastReturnedFrame) {
+                return {
+                    type: 'satisfied',
+                    frame: lastReturnedFrame,
+                };
+            }
+            return {
+                type: 'not-satisfied',
+                reason: 'iterator ended',
+            };
+        }
+        while (true) {
+            const frame = await getNextOrNullIfNotAvailable();
+            if (frame.type === 'need-to-wait-for-it') {
+                return {
+                    type: 'not-satisfied',
+                    reason: 'iterator did not have frame ready',
+                };
+            }
+            if (frame.type === 'got-frame-or-end') {
+                if (frame.frame === null) {
+                    iteratorEnded = true;
+                    if (lastReturnedFrame) {
+                        return {
+                            type: 'satisfied',
+                            frame: lastReturnedFrame,
+                        };
+                    }
+                    return {
+                        type: 'not-satisfied',
+                        reason: 'iterator ended and did not have frame ready',
+                    };
+                }
+                const frameTimestamp = roundTo4Digits(frame.frame.timestamp);
+                const frameEndTimestamp = roundTo4Digits(frame.frame.timestamp + frame.frame.duration);
+                const timestamp = roundTo4Digits(time);
+                if (frameTimestamp <= timestamp && frameEndTimestamp > timestamp) {
+                    return {
+                        type: 'satisfied',
+                        frame: frame.frame,
+                    };
+                }
+                continue;
+            }
+            throw new Error('Unreachable');
+        }
+    };
+    return {
+        destroy,
+        getNext: () => {
+            return iterator.next();
+        },
+        isDestroyed: () => {
+            return destroyed;
+        },
+        tryToSatisfySeek,
+    };
+};

package/dist/video/video.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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, 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.`);
+    }
+    validateMediaTrimProps({
+        startFrom: undefined,
+        endAt: undefined,
+        trimBefore,
+        trimAfter,
+    });
+    const { trimBeforeValue, trimAfterValue } = resolveTrimProps({
+        startFrom: undefined,
+        endAt: undefined,
+        trimBefore,
+        trimAfter,
+    });
+    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, 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, headless: headless ?? false }));
+};
+export const Video = ({ src, audioStreamIndex, className, delayRenderRetries, delayRenderTimeoutInMilliseconds, disallowFallbackToOffthreadVideo, fallbackOffthreadVideoProps, logLevel, loop, loopVolumeCurveBehavior, muted, name, onVideoFrame, playbackRate, showInTimeline, style, trimAfter, trimBefore, volume, stack, toneFrequency, debugOverlay, headless, }) => {
+    return (_jsx(InnerVideo, { audioStreamIndex: audioStreamIndex ?? 0, className: className, delayRenderRetries: delayRenderRetries ?? null, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? null, disallowFallbackToOffthreadVideo: disallowFallbackToOffthreadVideo ?? false, fallbackOffthreadVideoProps: fallbackOffthreadVideoProps ?? {}, logLevel: logLevel ??
+            (typeof window !== 'undefined'
+                ? (window.remotion_logLevel ?? 'info')
+                : 'info'), loop: loop ?? false, loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? 'repeat', muted: muted ?? false, name: name, onVideoFrame: onVideoFrame, playbackRate: playbackRate ?? 1, showInTimeline: showInTimeline ?? true, src: src, style: style ?? {}, trimAfter: trimAfter, trimBefore: trimBefore, volume: volume ?? 1, toneFrequency: toneFrequency ?? 1, stack: stack, debugOverlay: debugOverlay ?? false, headless: headless ?? false }));
+};
+Internals.addSequenceStackTraces(Video);

package/dist/video-extraction/add-broadcast-channel-listener.js

@@ -0,0 +1,125 @@
+import { extractFrameAndAudio } from '../extract-frame-and-audio';
+// Send to other channels a message to let them know that the
+// tab was loaded and is ready to receive requests.
+// Emit "readiness" messages for approximately 10 seconds.
+const emitReadiness = (channel) => {
+    channel.postMessage({
+        type: 'main-tab-ready',
+    });
+    let times = 0;
+    const interval = setInterval(() => {
+        channel.postMessage({
+            type: 'main-tab-ready',
+        });
+        times++;
+        if (times > 30) {
+            clearInterval(interval);
+        }
+    }, 300);
+};
+export const addBroadcastChannelListener = () => {
+    // Doesn't exist in studio
+    if (!(typeof window !== 'undefined' &&
+        window.remotion_broadcastChannel &&
+        window.remotion_isMainTab)) {
+        return;
+    }
+    window.remotion_broadcastChannel.addEventListener('message', async (event) => {
+        const data = event.data;
+        if (data.type === 'request') {
+            try {
+                const result = await extractFrameAndAudio({
+                    src: data.src,
+                    timeInSeconds: data.timeInSeconds,
+                    logLevel: data.logLevel,
+                    durationInSeconds: data.durationInSeconds,
+                    playbackRate: data.playbackRate,
+                    includeAudio: data.includeAudio,
+                    includeVideo: data.includeVideo,
+                    loop: data.loop,
+                    audioStreamIndex: data.audioStreamIndex,
+                    trimAfter: data.trimAfter,
+                    trimBefore: data.trimBefore,
+                    fps: data.fps,
+                    maxCacheSize: data.maxCacheSize,
+                });
+                if (result.type === 'cannot-decode') {
+                    const cannotDecodeResponse = {
+                        type: 'response-cannot-decode',
+                        id: data.id,
+                        durationInSeconds: result.durationInSeconds,
+                    };
+                    window.remotion_broadcastChannel.postMessage(cannotDecodeResponse);
+                    return;
+                }
+                if (result.type === 'cannot-decode-alpha') {
+                    const cannotDecodeAlphaResponse = {
+                        type: 'response-cannot-decode-alpha',
+                        id: data.id,
+                        durationInSeconds: result.durationInSeconds,
+                    };
+                    window.remotion_broadcastChannel.postMessage(cannotDecodeAlphaResponse);
+                    return;
+                }
+                if (result.type === 'network-error') {
+                    const networkErrorResponse = {
+                        type: 'response-network-error',
+                        id: data.id,
+                    };
+                    window.remotion_broadcastChannel.postMessage(networkErrorResponse);
+                    return;
+                }
+                if (result.type === 'unknown-container-format') {
+                    const unknownContainerFormatResponse = {
+                        type: 'response-unknown-container-format',
+                        id: data.id,
+                    };
+                    window.remotion_broadcastChannel.postMessage(unknownContainerFormatResponse);
+                    return;
+                }
+                const { frame, audio, durationInSeconds } = result;
+                const imageBitmap = frame ? await createImageBitmap(frame) : null;
+                if (frame) {
+                    frame.close();
+                }
+                const response = {
+                    type: 'response-success',
+                    id: data.id,
+                    frame: imageBitmap,
+                    audio,
+                    durationInSeconds: durationInSeconds ?? null,
+                };
+                window.remotion_broadcastChannel.postMessage(response);
+            }
+            catch (error) {
+                const response = {
+                    type: 'response-error',
+                    id: data.id,
+                    errorStack: error.stack ?? 'No stack trace',
+                };
+                window.remotion_broadcastChannel.postMessage(response);
+            }
+        }
+        else {
+            throw new Error('Invalid message: ' + JSON.stringify(data));
+        }
+    });
+    emitReadiness(window.remotion_broadcastChannel);
+};
+let mainTabIsReadyProm = null;
+export const waitForMainTabToBeReady = (channel) => {
+    if (mainTabIsReadyProm) {
+        return mainTabIsReadyProm;
+    }
+    mainTabIsReadyProm = new Promise((resolve) => {
+        const onMessage = (event) => {
+            const data = event.data;
+            if (data.type === 'main-tab-ready') {
+                resolve();
+                channel.removeEventListener('message', onMessage);
+            }
+        };
+        channel.addEventListener('message', onMessage);
+    });
+    return mainTabIsReadyProm;
+};

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

@@ -0,0 +1,113 @@
+import { extractFrameAndAudio } from '../extract-frame-and-audio';
+import { addBroadcastChannelListener, waitForMainTabToBeReady, } from './add-broadcast-channel-listener';
+addBroadcastChannelListener();
+export const extractFrameViaBroadcastChannel = async ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, isClientSideRendering, loop, audioStreamIndex, trimAfter, trimBefore, fps, maxCacheSize, }) => {
+    if (isClientSideRendering || window.remotion_isMainTab) {
+        return extractFrameAndAudio({
+            logLevel,
+            src,
+            timeInSeconds,
+            durationInSeconds,
+            playbackRate,
+            includeAudio,
+            includeVideo,
+            loop,
+            audioStreamIndex,
+            trimAfter,
+            trimBefore,
+            fps,
+            maxCacheSize,
+        });
+    }
+    await waitForMainTabToBeReady(window.remotion_broadcastChannel);
+    const requestId = crypto.randomUUID();
+    const resolvePromise = new Promise((resolve, reject) => {
+        const onMessage = (event) => {
+            const data = event.data;
+            if (!data) {
+                return;
+            }
+            if (data.type === 'main-tab-ready') {
+                return;
+            }
+            if (data.id !== requestId) {
+                return;
+            }
+            if (data.type === 'response-success') {
+                resolve({
+                    type: 'success',
+                    frame: data.frame ? data.frame : null,
+                    audio: data.audio ? data.audio : null,
+                    durationInSeconds: data.durationInSeconds
+                        ? data.durationInSeconds
+                        : null,
+                });
+                window.remotion_broadcastChannel.removeEventListener('message', onMessage);
+                return;
+            }
+            if (data.type === 'response-error') {
+                reject(data.errorStack);
+                window.remotion_broadcastChannel.removeEventListener('message', onMessage);
+                return;
+            }
+            if (data.type === 'response-cannot-decode') {
+                resolve({
+                    type: 'cannot-decode',
+                    durationInSeconds: data.durationInSeconds,
+                });
+                window.remotion_broadcastChannel.removeEventListener('message', onMessage);
+                return;
+            }
+            if (data.type === 'response-network-error') {
+                resolve({ type: 'network-error' });
+                window.remotion_broadcastChannel.removeEventListener('message', onMessage);
+                return;
+            }
+            if (data.type === 'response-unknown-container-format') {
+                resolve({ type: 'unknown-container-format' });
+                window.remotion_broadcastChannel.removeEventListener('message', onMessage);
+                return;
+            }
+            if (data.type === 'response-cannot-decode-alpha') {
+                resolve({
+                    type: 'cannot-decode-alpha',
+                    durationInSeconds: data.durationInSeconds,
+                });
+                window.remotion_broadcastChannel.removeEventListener('message', onMessage);
+                return;
+            }
+            throw new Error(`Invalid message: ${JSON.stringify(data)}`);
+        };
+        window.remotion_broadcastChannel.addEventListener('message', onMessage);
+    });
+    const request = {
+        type: 'request',
+        src,
+        timeInSeconds,
+        id: requestId,
+        logLevel,
+        durationInSeconds,
+        playbackRate,
+        includeAudio,
+        includeVideo,
+        loop,
+        audioStreamIndex,
+        trimAfter,
+        trimBefore,
+        fps,
+        maxCacheSize,
+    };
+    window.remotion_broadcastChannel.postMessage(request);
+    let timeoutId;
+    return Promise.race([
+        resolvePromise.then((res) => {
+            clearTimeout(timeoutId);
+            return res;
+        }),
+        new Promise((_, reject) => {
+            timeoutId = setTimeout(() => {
+                reject(new Error(`Timeout while extracting frame at time ${timeInSeconds}sec from ${src}`));
+            }, Math.max(3000, window.remotion_puppeteerTimeout - 5000));
+        }),
+    ]);
+};

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

@@ -0,0 +1,85 @@
+import { Internals } from 'remotion';
+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, maxCacheSize, }) => {
+    const sink = await getSink(src, logLevel);
+    const [video, mediaDurationInSecondsRaw] = await Promise.all([
+        sink.getVideo(),
+        loop ? sink.getDuration() : Promise.resolve(null),
+    ]);
+    const mediaDurationInSeconds = loop
+        ? mediaDurationInSecondsRaw
+        : null;
+    if (video === 'no-video-track') {
+        throw new Error(`No video track found for ${src}`);
+    }
+    if (video === 'cannot-decode') {
+        return { type: 'cannot-decode', durationInSeconds: mediaDurationInSeconds };
+    }
+    if (video === 'unknown-container-format') {
+        return { type: 'unknown-container-format' };
+    }
+    if (video === 'network-error') {
+        return { type: 'network-error' };
+    }
+    const timeInSeconds = getTimeInSeconds({
+        loop,
+        mediaDurationInSeconds,
+        unloopedTimeInSeconds,
+        src,
+        trimAfter,
+        playbackRate,
+        trimBefore,
+        fps,
+        ifNoMediaDuration: 'fail',
+    });
+    if (timeInSeconds === null) {
+        return {
+            type: 'success',
+            frame: null,
+            durationInSeconds: await sink.getDuration(),
+        };
+    }
+    // Must catch https://github.com/Vanilagy/mediabunny/issues/235
+    // https://discord.com/channels/@me/1127949286789881897/1455728482150518906
+    // Should be able to remove once upgraded to Chrome 145
+    try {
+        const keyframeBank = await keyframeManager.requestKeyframeBank({
+            packetSink: video.packetSink,
+            videoSampleSink: video.sampleSink,
+            timestamp: timeInSeconds,
+            src,
+            logLevel,
+            maxCacheSize,
+        });
+        if (keyframeBank === 'has-alpha') {
+            return {
+                type: 'cannot-decode-alpha',
+                durationInSeconds: await sink.getDuration(),
+            };
+        }
+        if (!keyframeBank) {
+            return {
+                type: 'success',
+                frame: null,
+                durationInSeconds: await sink.getDuration(),
+            };
+        }
+        const frame = await keyframeBank.getFrameFromTimestamp(timeInSeconds);
+        return {
+            type: 'success',
+            frame,
+            durationInSeconds: await sink.getDuration(),
+        };
+    }
+    catch (err) {
+        Internals.Log.info({ logLevel, tag: '@remotion/media' }, `Error decoding ${src} at time ${timeInSeconds}: ${err}`, err);
+        return { type: 'cannot-decode', durationInSeconds: mediaDurationInSeconds };
+    }
+};
+let queue = Promise.resolve(undefined);
+export const extractFrame = (params) => {
+    queue = queue.then(() => extractFrameInternal(params));
+    return queue;
+};

package/dist/video-extraction/get-allocation-size.js

@@ -0,0 +1,6 @@
+export const getAllocationSize = (sample) => {
+    if (sample.format === null) {
+        return sample.codedHeight * sample.codedWidth * 4;
+    }
+    return sample.allocationSize();
+};

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

@@ -0,0 +1,108 @@
+import { ALL_FORMATS, AudioSampleSink, EncodedPacketSink, Input, MATROSKA, UrlSource, VideoSampleSink, WEBM, } from 'mediabunny';
+import { isNetworkError } from '../is-type-of-error';
+import { makeKeyframeBank } from './keyframe-bank';
+import { rememberActualMatroskaTimestamps } from './remember-actual-matroska-timestamps';
+const getRetryDelay = (() => {
+    return null;
+});
+const getFormatOrNullOrNetworkError = async (input) => {
+    try {
+        return await input.getFormat();
+    }
+    catch (err) {
+        if (isNetworkError(err)) {
+            return 'network-error';
+        }
+        return null;
+    }
+};
+export const getSinks = async (src) => {
+    const input = new Input({
+        formats: ALL_FORMATS,
+        source: new UrlSource(src, {
+            getRetryDelay,
+        }),
+    });
+    const format = await getFormatOrNullOrNetworkError(input);
+    const isMatroska = format === MATROSKA || format === WEBM;
+    const getVideoSinks = async () => {
+        if (format === 'network-error') {
+            return 'network-error';
+        }
+        if (format === null) {
+            return 'unknown-container-format';
+        }
+        const videoTrack = await input.getPrimaryVideoTrack();
+        if (!videoTrack) {
+            return 'no-video-track';
+        }
+        const canDecode = await videoTrack.canDecode();
+        if (!canDecode) {
+            return 'cannot-decode';
+        }
+        return {
+            sampleSink: new VideoSampleSink(videoTrack),
+            packetSink: new EncodedPacketSink(videoTrack),
+        };
+    };
+    let videoSinksPromise = null;
+    const getVideoSinksPromise = () => {
+        if (videoSinksPromise) {
+            return videoSinksPromise;
+        }
+        videoSinksPromise = getVideoSinks();
+        return videoSinksPromise;
+    };
+    // audioSinksPromise is now a record indexed by audio track index
+    const audioSinksPromise = {};
+    const getAudioSinks = async (index) => {
+        if (format === null) {
+            return 'unknown-container-format';
+        }
+        if (format === 'network-error') {
+            return 'network-error';
+        }
+        const audioTracks = await input.getAudioTracks();
+        const audioTrack = audioTracks[index];
+        if (!audioTrack) {
+            return 'no-audio-track';
+        }
+        const canDecode = await audioTrack.canDecode();
+        if (!canDecode) {
+            return 'cannot-decode-audio';
+        }
+        return {
+            sampleSink: new AudioSampleSink(audioTrack),
+        };
+    };
+    const getAudioSinksPromise = (index) => {
+        if (audioSinksPromise[index]) {
+            return audioSinksPromise[index];
+        }
+        audioSinksPromise[index] = getAudioSinks(index);
+        return audioSinksPromise[index];
+    };
+    return {
+        getVideo: () => getVideoSinksPromise(),
+        getAudio: (index) => getAudioSinksPromise(index),
+        actualMatroskaTimestamps: rememberActualMatroskaTimestamps(isMatroska),
+        isMatroska,
+        getDuration: () => {
+            return input.computeDuration();
+        },
+    };
+};
+export const getFramesSinceKeyframe = async ({ packetSink, videoSampleSink, startPacket, logLevel, src, }) => {
+    const nextKeyPacket = await packetSink.getNextKeyPacket(startPacket, {
+        verifyKeyPackets: true,
+    });
+    const sampleIterator = videoSampleSink.samples(startPacket.timestamp, nextKeyPacket ? nextKeyPacket.timestamp : Infinity);
+    const keyframeBank = makeKeyframeBank({
+        startTimestampInSeconds: startPacket.timestamp,
+        endTimestampInSeconds: nextKeyPacket ? nextKeyPacket.timestamp : Infinity,
+        sampleIterator,
+        logLevel,
+        src,
+    });
+    return keyframeBank;
+};