@remotion/media 4.0.424 → 4.0.425

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;
+};

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

@@ -0,0 +1,159 @@
+import { Internals } from 'remotion';
+import { SAFE_BACK_WINDOW_IN_SECONDS } from '../caches';
+import { roundTo4Digits } from '../helpers/round-to-4-digits';
+import { renderTimestampRange } from '../render-timestamp-range';
+import { getAllocationSize } from './get-allocation-size';
+export const makeKeyframeBank = ({ startTimestampInSeconds, endTimestampInSeconds, sampleIterator, logLevel: parentLogLevel, src, }) => {
+    Internals.Log.verbose({ logLevel: parentLogLevel, tag: '@remotion/media' }, `Creating keyframe bank from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
+    const frames = {};
+    const frameTimestamps = [];
+    let lastUsed = Date.now();
+    let allocationSize = 0;
+    const deleteFramesBeforeTimestamp = ({ logLevel, timestampInSeconds, }) => {
+        const deletedTimestamps = [];
+        for (const frameTimestamp of frameTimestamps.slice()) {
+            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;
+                }
+                allocationSize -= getAllocationSize(frames[frameTimestamp]);
+                frameTimestamps.splice(frameTimestamps.indexOf(frameTimestamp), 1);
+                frames[frameTimestamp].close();
+                delete frames[frameTimestamp];
+                deletedTimestamps.push(frameTimestamp);
+            }
+        }
+        if (deletedTimestamps.length > 0) {
+            Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `Deleted ${deletedTimestamps.length} frame${deletedTimestamps.length === 1 ? '' : 's'} ${renderTimestampRange(deletedTimestamps)} for src ${src} because it is lower than ${timestampInSeconds}. Remaining: ${renderTimestampRange(frameTimestamps)}`);
+        }
+    };
+    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) + 0.001);
+    };
+    const addFrame = (frame) => {
+        if (frames[frame.timestamp]) {
+            allocationSize -= getAllocationSize(frames[frame.timestamp]);
+            frameTimestamps.splice(frameTimestamps.indexOf(frame.timestamp), 1);
+            frames[frame.timestamp].close();
+            delete frames[frame.timestamp];
+        }
+        frames[frame.timestamp] = frame;
+        frameTimestamps.push(frame.timestamp);
+        allocationSize += getAllocationSize(frame);
+        lastUsed = Date.now();
+    };
+    const ensureEnoughFramesForTimestamp = async (timestampInSeconds) => {
+        while (!hasDecodedEnoughForTimestamp(timestampInSeconds)) {
+            const sample = await sampleIterator.next();
+            if (sample.value) {
+                addFrame(sample.value);
+            }
+            if (sample.done) {
+                break;
+            }
+            deleteFramesBeforeTimestamp({
+                logLevel: parentLogLevel,
+                timestampInSeconds: timestampInSeconds - SAFE_BACK_WINDOW_IN_SECONDS,
+            });
+        }
+        lastUsed = Date.now();
+    };
+    const getFrameFromTimestamp = async (timestampInSeconds) => {
+        lastUsed = Date.now();
+        // If the requested timestamp is before the start of this bank, clamp it to the start.
+        // This matches Chrome's behavior: render the first available frame rather than showing black.
+        // Videos don't always start at timestamp 0 due to encoding artifacts, container format quirks,
+        // and keyframe positioning. Users have no control over this, so we clamp to the first frame.
+        // Test case: https://github.com/remotion-dev/remotion/issues/5915
+        let adjustedTimestamp = timestampInSeconds;
+        if (roundTo4Digits(timestampInSeconds) <
+            roundTo4Digits(startTimestampInSeconds)) {
+            adjustedTimestamp = startTimestampInSeconds;
+        }
+        // If we request a timestamp after the end of the video, return the last frame
+        // same behavior as <video>
+        if (roundTo4Digits(adjustedTimestamp) > roundTo4Digits(endTimestampInSeconds)) {
+            adjustedTimestamp = endTimestampInSeconds;
+        }
+        await ensureEnoughFramesForTimestamp(adjustedTimestamp);
+        for (let i = frameTimestamps.length - 1; i >= 0; i--) {
+            const sample = frames[frameTimestamps[i]];
+            if (!sample) {
+                return null;
+            }
+            if (roundTo4Digits(sample.timestamp) <= roundTo4Digits(adjustedTimestamp) ||
+                // Match 0.3333333333 to 0.33355555
+                // this does not satisfy the previous condition, since one rounds up and one rounds down
+                Math.abs(sample.timestamp - adjustedTimestamp) <= 0.001) {
+                return sample;
+            }
+        }
+        return null;
+    };
+    const hasTimestampInSecond = async (timestamp) => {
+        return (await getFrameFromTimestamp(timestamp)) !== null;
+    };
+    const prepareForDeletion = (logLevel) => {
+        Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `Preparing for deletion of keyframe bank from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
+        // Cleanup frames that have been extracted that might not have been retrieved yet
+        sampleIterator.return().then((result) => {
+            if (result.value) {
+                result.value.close();
+            }
+            return null;
+        });
+        let framesDeleted = 0;
+        for (const frameTimestamp of frameTimestamps) {
+            if (!frames[frameTimestamp]) {
+                continue;
+            }
+            allocationSize -= getAllocationSize(frames[frameTimestamp]);
+            frames[frameTimestamp].close();
+            delete frames[frameTimestamp];
+            framesDeleted++;
+        }
+        frameTimestamps.length = 0;
+        return { framesDeleted };
+    };
+    const getOpenFrameCount = () => {
+        return {
+            size: allocationSize,
+            timestamps: frameTimestamps,
+        };
+    };
+    const getLastUsed = () => {
+        return lastUsed;
+    };
+    let queue = Promise.resolve(undefined);
+    const keyframeBank = {
+        startTimestampInSeconds,
+        endTimestampInSeconds,
+        getFrameFromTimestamp: (timestamp) => {
+            queue = queue.then(() => getFrameFromTimestamp(timestamp));
+            return queue;
+        },
+        prepareForDeletion,
+        hasTimestampInSecond,
+        addFrame,
+        deleteFramesBeforeTimestamp,
+        src,
+        getOpenFrameCount,
+        getLastUsed,
+    };
+    return keyframeBank;
+};

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

@@ -0,0 +1,206 @@
+import { Internals } from 'remotion';
+import { canBrowserUseWebGl2 } from '../browser-can-use-webgl2';
+import { getTotalCacheStats, SAFE_BACK_WINDOW_IN_SECONDS } from '../caches';
+import { renderTimestampRange } from '../render-timestamp-range';
+import { getFramesSinceKeyframe } from './get-frames-since-keyframe';
+export const makeKeyframeManager = () => {
+    // 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;
+                }
+                Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `Open frames for src ${src}: ${renderTimestampRange(timestamps)}`);
+            }
+        }
+        Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `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;
+        let numberOfBanks = 0;
+        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 };
+                }
+                numberOfBanks++;
+            }
+        }
+        if (!mostInThePastBank) {
+            throw new Error('No keyframe bank found');
+        }
+        return { mostInThePastBank, numberOfBanks };
+    };
+    const deleteOldestKeyframeBank = async (logLevel) => {
+        const { mostInThePastBank: { bank: mostInThePastBank, src: mostInThePastSrc }, numberOfBanks, } = await getTheKeyframeBankMostInThePast();
+        if (numberOfBanks < 2) {
+            return { finish: true };
+        }
+        if (mostInThePastBank) {
+            const { framesDeleted } = mostInThePastBank.prepareForDeletion(logLevel);
+            delete sources[mostInThePastSrc][mostInThePastBank.startTimestampInSeconds];
+            Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `Deleted ${framesDeleted} frames for src ${mostInThePastSrc} from ${mostInThePastBank.startTimestampInSeconds}sec to ${mostInThePastBank.endTimestampInSeconds}sec to free up memory.`);
+        }
+        return { finish: false };
+    };
+    const ensureToStayUnderMaxCacheSize = async (logLevel, maxCacheSize) => {
+        let cacheStats = await getTotalCacheStats();
+        while (cacheStats.totalSize > maxCacheSize) {
+            const { finish } = await deleteOldestKeyframeBank(logLevel);
+            if (finish) {
+                break;
+            }
+            Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, 'Deleted oldest keyframe bank to stay under max cache size', (cacheStats.totalSize / 1024 / 1024).toFixed(1), 'out of', (maxCacheSize / 1024 / 1024).toFixed(1));
+            cacheStats = await getTotalCacheStats();
+        }
+    };
+    const clearKeyframeBanksBeforeTime = async ({ timestampInSeconds, src, logLevel, }) => {
+        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) {
+                bank.prepareForDeletion(logLevel);
+                Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `[Video] Cleared frames for src ${src} from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
+                delete sources[src][startTimeInSeconds];
+            }
+            else {
+                bank.deleteFramesBeforeTimestamp({
+                    timestampInSeconds: threshold,
+                    logLevel,
+                });
+            }
+        }
+        await logCacheStats(logLevel);
+    };
+    const getKeyframeBankOrRefetch = async ({ packetSink, timestamp, videoSampleSink, src, logLevel, }) => {
+        // Try to get the keypacket at the requested timestamp.
+        // If it returns null (timestamp is before the first keypacket), fall back to the first packet.
+        // This matches mediabunny's internal behavior and handles videos that don't start at timestamp 0.
+        const startPacket = (await packetSink.getKeyPacket(timestamp, {
+            verifyKeyPackets: true,
+        })) ?? (await packetSink.getFirstPacket({ verifyKeyPackets: true }));
+        const hasAlpha = startPacket?.sideData.alpha;
+        if (hasAlpha && !canBrowserUseWebGl2()) {
+            return 'has-alpha';
+        }
+        if (!startPacket) {
+            // e.g. https://discord.com/channels/809501355504959528/809501355504959531/1424400511070765086
+            // The video has an offset and the first frame is at time 0.033sec
+            // we shall not crash here but handle it gracefully
+            return null;
+        }
+        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,
+                logLevel,
+                src,
+            });
+            addKeyframeBank({ src, bank: newKeyframeBank, startTimestampInSeconds });
+            return newKeyframeBank;
+        }
+        // Bank exists and still has the frame we want
+        if (await (await existingBank).hasTimestampInSecond(timestamp)) {
+            return existingBank;
+        }
+        Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `Keyframe bank exists but frame at time ${timestamp} does not exist anymore.`);
+        // Bank exists but frames have already been evicted!
+        // First delete it entirely
+        await (await existingBank).prepareForDeletion(logLevel);
+        delete sources[src][startTimestampInSeconds];
+        // Then refetch
+        const replacementKeybank = getFramesSinceKeyframe({
+            packetSink,
+            videoSampleSink,
+            startPacket,
+            logLevel,
+            src,
+        });
+        addKeyframeBank({ src, bank: replacementKeybank, startTimestampInSeconds });
+        return replacementKeybank;
+    };
+    const requestKeyframeBank = async ({ packetSink, timestamp, videoSampleSink, src, logLevel, maxCacheSize, }) => {
+        await ensureToStayUnderMaxCacheSize(logLevel, maxCacheSize);
+        await clearKeyframeBanksBeforeTime({
+            timestampInSeconds: timestamp,
+            src,
+            logLevel,
+        });
+        const keyframeBank = await getKeyframeBankOrRefetch({
+            packetSink,
+            timestamp,
+            videoSampleSink,
+            src,
+            logLevel,
+        });
+        return keyframeBank;
+    };
+    const clearAll = async (logLevel) => {
+        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];
+                bank.prepareForDeletion(logLevel);
+                delete sources[src][startTimeInSeconds];
+            }
+        }
+    };
+    let queue = Promise.resolve(undefined);
+    return {
+        requestKeyframeBank: ({ packetSink, timestamp, videoSampleSink, src, logLevel, maxCacheSize, }) => {
+            queue = queue.then(() => requestKeyframeBank({
+                packetSink,
+                timestamp,
+                videoSampleSink,
+                src,
+                logLevel,
+                maxCacheSize,
+            }));
+            return queue;
+        },
+        getCacheStats,
+        clearAll,
+    };
+};

package/dist/video-extraction/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/video-extraction/rotate-frame.js

@@ -0,0 +1,34 @@
+export const rotateFrame = async ({ frame, rotation, }) => {
+    if (rotation === 0) {
+        const directBitmap = await createImageBitmap(frame);
+        frame.close();
+        return directBitmap;
+    }
+    const width = rotation === 90 || rotation === 270
+        ? frame.displayHeight
+        : frame.displayWidth;
+    const height = rotation === 90 || rotation === 270
+        ? frame.displayWidth
+        : frame.displayHeight;
+    const canvas = new OffscreenCanvas(width, height);
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        throw new Error('Could not get 2d context');
+    }
+    canvas.width = width;
+    canvas.height = height;
+    if (rotation === 90) {
+        ctx.translate(width, 0);
+    }
+    else if (rotation === 180) {
+        ctx.translate(width, height);
+    }
+    else if (rotation === 270) {
+        ctx.translate(0, height);
+    }
+    ctx.rotate(rotation * (Math.PI / 180));
+    ctx.drawImage(frame, 0, 0);
+    const bitmap = await createImageBitmap(canvas);
+    frame.close();
+    return bitmap;
+};