@remotion/media 4.0.354 → 4.0.356

package/dist/extract-frame.js

@@ -1,21 +0,0 @@
-import { getSinks, } from './video-extraction/get-frames-since-keyframe';
-import { makeKeyframeManager } from './video-extraction/keyframe-manager';
-export const keyframeManager = makeKeyframeManager();
-export const sinkPromises = {};
-export const extractFrame = async ({ src, timeInSeconds, logLevel, }) => {
-    console.time('extractFrame');
-    if (!sinkPromises[src]) {
-        sinkPromises[src] = getSinks(src);
-    }
-    const { video } = await sinkPromises[src];
-    const keyframeBank = await keyframeManager.requestKeyframeBank({
-        packetSink: video.packetSink,
-        videoSampleSink: video.sampleSink,
-        timestamp: timeInSeconds,
-        src,
-        logLevel,
-    });
-    const frame = await keyframeBank.getFrameFromTimestamp(timeInSeconds);
-    console.timeEnd('extractFrame');
-    return frame;
-};

package/dist/extrct-audio.d.ts

@@ -1,7 +0,0 @@
-import type { PcmS16AudioData } from './convert-audiodata/convert-audiodata';
-export declare const extractAudio: ({ src, timeInSeconds, durationInSeconds, volume, }: {
-    src: string;
-    timeInSeconds: number;
-    durationInSeconds: number;
-    volume: number;
-}) => Promise<PcmS16AudioData | null>;

package/dist/extrct-audio.js

@@ -1,94 +0,0 @@
-import { combineAudioDataAndClosePrevious } from './convert-audiodata/combine-audiodata';
-import { convertAudioData } from './convert-audiodata/convert-audiodata';
-import { TARGET_NUMBER_OF_CHANNELS, TARGET_SAMPLE_RATE, } from './convert-audiodata/resample-audiodata';
-import { sinkPromises } from './extract-frame';
-import { getSinks } from './get-frames-since-keyframe';
-export const extractAudio = async ({ src, timeInSeconds, durationInSeconds, volume, }) => {
-    if (!sinkPromises[src]) {
-        sinkPromises[src] = getSinks(src);
-    }
-    const { audio, actualMatroskaTimestamps, isMatroska } = await sinkPromises[src];
-    if (audio === null) {
-        return null;
-    }
-    // https://discord.com/channels/@me/1409810025844838481/1415028953093111870
-    // Audio frames might have dependencies on previous and next frames so we need to decode a bit more
-    // and then discard it.
-    // The worst case seems to be FLAC files with a 65'535 sample window, which would be 1486.0ms at 44.1Khz.
-    // So let's set a threshold of 1.5 seconds.
-    const extraThreshold = 1.5;
-    // Matroska timestamps are not accurate unless we start from the beginning
-    // So for matroska, we need to decode all samples :(
-    // https://github.com/Vanilagy/mediabunny/issues/105
-    const sampleIterator = audio.sampleSink.samples(isMatroska ? 0 : Math.max(0, timeInSeconds - extraThreshold), timeInSeconds + durationInSeconds);
-    const samples = [];
-    for await (const sample of sampleIterator) {
-        const realTimestamp = actualMatroskaTimestamps.getRealTimestamp(sample.timestamp);
-        if (realTimestamp !== null && realTimestamp !== sample.timestamp) {
-            sample.setTimestamp(realTimestamp);
-        }
-        actualMatroskaTimestamps.observeTimestamp(sample.timestamp);
-        actualMatroskaTimestamps.observeTimestamp(sample.timestamp + sample.duration);
-        if (sample.timestamp + sample.duration - 0.0000000001 <= timeInSeconds) {
-            continue;
-        }
-        if (sample.timestamp >= timeInSeconds + durationInSeconds - 0.0000000001) {
-            continue;
-        }
-        samples.push(sample);
-    }
-    const audioDataArray = [];
-    for (let i = 0; i < samples.length; i++) {
-        const sample = samples[i];
-        // Less than 1 sample would be included - we did not need it after all!
-        if (Math.abs(sample.timestamp - (timeInSeconds + durationInSeconds)) *
-            sample.sampleRate <
-            1) {
-            sample.close();
-            continue;
-        }
-        // Less than 1 sample would be included - we did not need it after all!
-        if (sample.timestamp + sample.duration <= timeInSeconds) {
-            sample.close();
-            continue;
-        }
-        const isFirstSample = i === 0;
-        const isLastSample = i === samples.length - 1;
-        const audioDataRaw = sample.toAudioData();
-        // amount of samples to shave from start and end
-        let trimStartInSeconds = 0;
-        let trimEndInSeconds = 0;
-        // TODO: Apply playback rate
-        // TODO: Apply tone frequency
-        if (isFirstSample) {
-            trimStartInSeconds = timeInSeconds - sample.timestamp;
-        }
-        if (isLastSample) {
-            trimEndInSeconds =
-                // clamp to 0 in case the audio ends early
-                Math.max(0, sample.timestamp +
-                    sample.duration -
-                    (timeInSeconds + durationInSeconds));
-        }
-        const audioData = convertAudioData({
-            audioData: audioDataRaw,
-            newSampleRate: TARGET_SAMPLE_RATE,
-            trimStartInSeconds,
-            trimEndInSeconds,
-            targetNumberOfChannels: TARGET_NUMBER_OF_CHANNELS,
-            volume,
-        });
-        audioDataRaw.close();
-        if (audioData.numberOfFrames === 0) {
-            sample.close();
-            continue;
-        }
-        audioDataArray.push(audioData);
-        sample.close();
-    }
-    if (audioDataArray.length === 0) {
-        return null;
-    }
-    const combined = combineAudioDataAndClosePrevious(audioDataArray);
-    return combined;
-};

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

@@ -1,22 +0,0 @@
-import type { EncodedPacket } from 'mediabunny';
-import { AudioSampleSink, EncodedPacketSink, VideoSampleSink } from 'mediabunny';
-export declare const getSinks: (src: string) => Promise<{
-    video: {
-        sampleSink: VideoSampleSink;
-        packetSink: EncodedPacketSink;
-    };
-    audio: {
-        sampleSink: AudioSampleSink;
-    } | null;
-    actualMatroskaTimestamps: {
-        observeTimestamp: (startTime: number) => void;
-        getRealTimestamp: (observedTimestamp: number) => number | null;
-    };
-    isMatroska: boolean;
-}>;
-export type GetSink = Awaited<ReturnType<typeof getSinks>>;
-export declare const getFramesSinceKeyframe: ({ packetSink, videoSampleSink, startPacket, }: {
-    packetSink: EncodedPacketSink;
-    videoSampleSink: VideoSampleSink;
-    startPacket: EncodedPacket;
-}) => Promise<any>;

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

@@ -1,41 +0,0 @@
-import { ALL_FORMATS, AudioSampleSink, EncodedPacketSink, Input, MATROSKA, UrlSource, VideoSampleSink, } from 'mediabunny';
-import { makeKeyframeBank } from './keyframe-bank';
-import { rememberActualMatroskaTimestamps } from './remember-actual-matroska-timestamps';
-export const getSinks = async (src) => {
-    const input = new Input({
-        formats: ALL_FORMATS,
-        source: new UrlSource(src),
-    });
-    const format = await input.getFormat();
-    const videoTrack = await input.getPrimaryVideoTrack();
-    if (!videoTrack) {
-        throw new Error(`No video track found for ${src}`);
-    }
-    const audioTrack = await input.getPrimaryAudioTrack();
-    const isMatroska = format === MATROSKA;
-    return {
-        video: {
-            sampleSink: new VideoSampleSink(videoTrack),
-            packetSink: new EncodedPacketSink(videoTrack),
-        },
-        audio: audioTrack
-            ? {
-                sampleSink: new AudioSampleSink(audioTrack),
-            }
-            : null,
-        actualMatroskaTimestamps: rememberActualMatroskaTimestamps(isMatroska),
-        isMatroska,
-    };
-};
-export const getFramesSinceKeyframe = async ({ packetSink, videoSampleSink, startPacket, }) => {
-    const nextKeyPacket = await packetSink.getNextKeyPacket(startPacket, {
-        verifyKeyPackets: false,
-    });
-    const sampleIterator = videoSampleSink.samples(startPacket.timestamp, nextKeyPacket ? nextKeyPacket.timestamp : Infinity);
-    const keyframeBank = makeKeyframeBank({
-        startTimestampInSeconds: startPacket.timestamp,
-        endTimestampInSeconds: nextKeyPacket ? nextKeyPacket.timestamp : Infinity,
-        sampleIterator,
-    });
-    return keyframeBank;
-};

package/dist/keyframe-bank.d.ts

@@ -1,25 +0,0 @@
-import type { VideoSample } from 'mediabunny';
-import type { LogLevel } from './log';
-export type KeyframeBank = {
-    startTimestampInSeconds: number;
-    endTimestampInSeconds: number;
-    getFrameFromTimestamp: (timestamp: number) => Promise<VideoSample | null>;
-    prepareForDeletion: () => Promise<void>;
-    deleteFramesBeforeTimestamp: ({ logLevel, src, timestampInSeconds, }: {
-        timestampInSeconds: number;
-        logLevel: LogLevel;
-        src: string;
-    }) => void;
-    hasTimestampInSecond: (timestamp: number) => Promise<boolean>;
-    addFrame: (frame: VideoSample) => void;
-    getOpenFrameCount: () => {
-        size: number;
-        timestamps: number[];
-    };
-    getLastUsed: () => number;
-};
-export declare const makeKeyframeBank: ({ startTimestampInSeconds, endTimestampInSeconds, sampleIterator, }: {
-    startTimestampInSeconds: number;
-    endTimestampInSeconds: number;
-    sampleIterator: AsyncGenerator<VideoSample, void, unknown>;
-}) => KeyframeBank;

package/dist/keyframe-bank.js

@@ -1,120 +0,0 @@
-import { Log } from './log';
-// Round to only 4 digits, because WebM has a timescale of 1_000, e.g. framer.webm
-const roundTo4Digits = (timestamp) => {
-    return Math.round(timestamp * 1000) / 1000;
-};
-export const makeKeyframeBank = ({ startTimestampInSeconds, endTimestampInSeconds, sampleIterator, }) => {
-    const frames = {};
-    const frameTimestamps = [];
-    let lastUsed = Date.now();
-    let alloctionSize = 0;
-    const hasDecodedEnoughForTimestamp = (timestamp) => {
-        const lastFrameTimestamp = frameTimestamps[frameTimestamps.length - 1];
-        if (!lastFrameTimestamp) {
-            return false;
-        }
-        const lastFrame = frames[lastFrameTimestamp];
-        // Don't decode more, will probably have to re-decode everything
-        if (!lastFrame) {
-            return true;
-        }
-        return (roundTo4Digits(lastFrame.timestamp + lastFrame.duration) >
-            roundTo4Digits(timestamp));
-    };
-    const addFrame = (frame) => {
-        frames[frame.timestamp] = frame;
-        frameTimestamps.push(frame.timestamp);
-        alloctionSize += frame.allocationSize();
-        lastUsed = Date.now();
-    };
-    const ensureEnoughFramesForTimestamp = async (timestamp) => {
-        while (!hasDecodedEnoughForTimestamp(timestamp)) {
-            const sample = await sampleIterator.next();
-            if (sample.value) {
-                addFrame(sample.value);
-            }
-            if (sample.done) {
-                break;
-            }
-        }
-        lastUsed = Date.now();
-    };
-    const getFrameFromTimestamp = async (timestampInSeconds) => {
-        lastUsed = Date.now();
-        if (timestampInSeconds < startTimestampInSeconds) {
-            return Promise.reject(new Error(`Timestamp is before start timestamp (requested: ${timestampInSeconds}sec, start: ${startTimestampInSeconds})`));
-        }
-        if (timestampInSeconds > endTimestampInSeconds) {
-            return Promise.reject(new Error(`Timestamp is after end timestamp (requested: ${timestampInSeconds}sec, end: ${endTimestampInSeconds})`));
-        }
-        await ensureEnoughFramesForTimestamp(timestampInSeconds);
-        for (let i = frameTimestamps.length - 1; i >= 0; i--) {
-            const sample = frames[frameTimestamps[i]];
-            if (!sample) {
-                return null;
-            }
-            if (roundTo4Digits(sample.timestamp) <= roundTo4Digits(timestampInSeconds)) {
-                return sample;
-            }
-        }
-        throw new Error('No frame found for timestamp ' + timestampInSeconds);
-    };
-    const hasTimestampInSecond = async (timestamp) => {
-        return (await getFrameFromTimestamp(timestamp)) !== null;
-    };
-    const prepareForDeletion = async () => {
-        // Cleanup frames that have been extracted that might not have been retrieved yet
-        const { value } = await sampleIterator.return();
-        if (value) {
-            value.close();
-        }
-        for (const frameTimestamp of frameTimestamps) {
-            if (!frames[frameTimestamp]) {
-                continue;
-            }
-            alloctionSize -= frames[frameTimestamp].allocationSize();
-            frames[frameTimestamp].close();
-            delete frames[frameTimestamp];
-        }
-        frameTimestamps.length = 0;
-    };
-    const deleteFramesBeforeTimestamp = ({ logLevel, src, timestampInSeconds, }) => {
-        for (const frameTimestamp of frameTimestamps) {
-            const isLast = frameTimestamp === frameTimestamps[frameTimestamps.length - 1];
-            // Don't delete the last frame, since it may be the last one in the video!
-            if (isLast) {
-                continue;
-            }
-            if (frameTimestamp < timestampInSeconds) {
-                if (!frames[frameTimestamp]) {
-                    continue;
-                }
-                alloctionSize -= frames[frameTimestamp].allocationSize();
-                frames[frameTimestamp].close();
-                delete frames[frameTimestamp];
-                Log.verbose(logLevel, `[Video] Deleted frame ${frameTimestamp} for src ${src}`);
-            }
-        }
-    };
-    const getOpenFrameCount = () => {
-        return {
-            size: alloctionSize,
-            timestamps: frameTimestamps,
-        };
-    };
-    const getLastUsed = () => {
-        return lastUsed;
-    };
-    const keyframeBank = {
-        startTimestampInSeconds,
-        endTimestampInSeconds,
-        getFrameFromTimestamp,
-        prepareForDeletion,
-        hasTimestampInSecond,
-        addFrame,
-        deleteFramesBeforeTimestamp,
-        getOpenFrameCount,
-        getLastUsed,
-    };
-    return keyframeBank;
-};

package/dist/keyframe-manager.d.ts

@@ -1,23 +0,0 @@
-import type { EncodedPacketSink, VideoSampleSink } from 'mediabunny';
-import { type KeyframeBank } from './keyframe-bank';
-import type { LogLevel } from './log';
-export declare const makeKeyframeManager: () => {
-    requestKeyframeBank: ({ packetSink, timestamp, videoSampleSink, src, logLevel, }: {
-        timestamp: number;
-        packetSink: EncodedPacketSink;
-        videoSampleSink: VideoSampleSink;
-        src: string;
-        logLevel: LogLevel;
-    }) => Promise<KeyframeBank>;
-    addKeyframeBank: ({ src, bank, startTimestampInSeconds, }: {
-        src: string;
-        bank: Promise<KeyframeBank>;
-        startTimestampInSeconds: number;
-    }) => void;
-    getCacheStats: () => Promise<{
-        count: number;
-        totalSize: number;
-    }>;
-    clearAll: () => Promise<void>;
-};
-export type KeyframeManager = Awaited<ReturnType<typeof makeKeyframeManager>>;

package/dist/keyframe-manager.js

@@ -1,170 +0,0 @@
-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/new-video-for-rendering.d.ts

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

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

@@ -1,108 +0,0 @@
-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

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