@remotion/media 4.0.374 → 4.0.376

package/dist/esm/index.mjs

@@ -91,8 +91,6 @@ var makeAudioIterator = (audioSink, startFromSecond) => {
     }
     queuedAudioNodes.length = 0;
   };
-  let lastReturnedBuffer = null;
-  let iteratorEnded = false;
   const getNextOrNullIfNotAvailable = async (allowWait) => {
     const next = iterator.next();
     const result = allowWait ? await allowWaitRoutine(next, allowWait) : await Promise.race([
@@ -106,50 +104,16 @@ var makeAudioIterator = (audioSink, startFromSecond) => {
         type: "need-to-wait-for-it",
         waitPromise: async () => {
           const res = await next;
-          if (res.value) {
-            lastReturnedBuffer = res.value;
-          } else {
-            iteratorEnded = true;
-          }
           return res.value;
         }
       };
     }
-    if (result.value) {
-      lastReturnedBuffer = result.value;
-    } else {
-      iteratorEnded = true;
-    }
     return {
       type: "got-buffer-or-end",
       buffer: result.value ?? null
     };
   };
   const tryToSatisfySeek = async (time, allowWait, onBufferScheduled) => {
-    if (lastReturnedBuffer) {
-      const bufferTimestamp = roundTo4Digits(lastReturnedBuffer.timestamp);
-      const bufferEndTimestamp = roundTo4Digits(lastReturnedBuffer.timestamp + lastReturnedBuffer.duration);
-      if (roundTo4Digits(time) < bufferTimestamp) {
-        return {
-          type: "not-satisfied",
-          reason: `iterator is too far, most recently returned ${bufferTimestamp}-${bufferEndTimestamp}, requested ${time}`
-        };
-      }
-      if (roundTo4Digits(time) <= bufferEndTimestamp) {
-        onBufferScheduled(lastReturnedBuffer);
-        return {
-          type: "satisfied"
-        };
-      }
-    }
-    if (iteratorEnded) {
-      if (lastReturnedBuffer) {
-        onBufferScheduled(lastReturnedBuffer);
-      }
-      return {
-        type: "satisfied"
-      };
-    }
     while (true) {
       const buffer = await getNextOrNullIfNotAvailable(allowWait);
       if (buffer.type === "need-to-wait-for-it") {
@@ -160,17 +124,19 @@ var makeAudioIterator = (audioSink, startFromSecond) => {
       }
       if (buffer.type === "got-buffer-or-end") {
         if (buffer.buffer === null) {
-          iteratorEnded = true;
-          if (lastReturnedBuffer) {
-            onBufferScheduled(lastReturnedBuffer);
-          }
           return {
-            type: "satisfied"
+            type: "ended"
           };
         }
         const bufferTimestamp = roundTo4Digits(buffer.buffer.timestamp);
         const bufferEndTimestamp = roundTo4Digits(buffer.buffer.timestamp + buffer.buffer.duration);
         const timestamp = roundTo4Digits(time);
+        if (roundTo4Digits(time) < bufferTimestamp) {
+          return {
+            type: "not-satisfied",
+            reason: `iterator is too far, most recently returned ${bufferTimestamp}-${bufferEndTimestamp}, requested ${time}`
+          };
+        }
         if (bufferTimestamp <= timestamp && bufferEndTimestamp > timestamp) {
           onBufferScheduled(buffer.buffer);
           return {
@@ -214,11 +180,6 @@ var makeAudioIterator = (audioSink, startFromSecond) => {
     },
     getNext: async () => {
       const next = await iterator.next();
-      if (next.value) {
-        lastReturnedBuffer = next.value;
-      } else {
-        iteratorEnded = true;
-      }
       return next;
     },
     isDestroyed: () => {
@@ -408,6 +369,9 @@ var audioIteratorManager = ({
       if (nonce.isStale()) {
         return;
       }
+      if (audioSatisfyResult.type === "ended") {
+        return;
+      }
       if (audioSatisfyResult.type === "not-satisfied") {
         await startAudioIterator({
           nonce,
@@ -443,6 +407,9 @@ var audioIteratorManager = ({
       if (nonce.isStale()) {
         return;
       }
+      if (audioSatisfyResult.type === "ended") {
+        return;
+      }
       if (audioSatisfyResult.type === "not-satisfied") {
         await startAudioIterator({
           nonce,
@@ -1696,130 +1663,8 @@ import {
   useRemotionEnvironment
 } from "remotion";
 
-// src/convert-audiodata/apply-volume.ts
-var applyVolume = (array, volume) => {
-  if (volume === 1) {
-    return;
-  }
-  for (let i = 0;i < array.length; i++) {
-    const newValue = array[i] * volume;
-    if (newValue < -32768) {
-      array[i] = -32768;
-    } else if (newValue > 32767) {
-      array[i] = 32767;
-    } else {
-      array[i] = newValue;
-    }
-  }
-};
-
-// src/convert-audiodata/resample-audiodata.ts
-var TARGET_NUMBER_OF_CHANNELS = 2;
-var TARGET_SAMPLE_RATE = 48000;
-var fixFloatingPoint = (value) => {
-  if (value % 1 < 0.0000001) {
-    return Math.floor(value);
-  }
-  if (value % 1 > 0.9999999) {
-    return Math.ceil(value);
-  }
-  return value;
-};
-var resampleAudioData = ({
-  srcNumberOfChannels,
-  sourceChannels,
-  destination,
-  targetFrames,
-  chunkSize
-}) => {
-  const getSourceValues = (startUnfixed, endUnfixed, channelIndex) => {
-    const start = fixFloatingPoint(startUnfixed);
-    const end = fixFloatingPoint(endUnfixed);
-    const startFloor = Math.floor(start);
-    const startCeil = Math.ceil(start);
-    const startFraction = start - startFloor;
-    const endFraction = end - Math.floor(end);
-    const endFloor = Math.floor(end);
-    let weightedSum = 0;
-    let totalWeight = 0;
-    if (startFraction > 0) {
-      const firstSample = sourceChannels[startFloor * srcNumberOfChannels + channelIndex];
-      weightedSum += firstSample * (1 - startFraction);
-      totalWeight += 1 - startFraction;
-    }
-    for (let k = startCeil;k < endFloor; k++) {
-      const num = sourceChannels[k * srcNumberOfChannels + channelIndex];
-      weightedSum += num;
-      totalWeight += 1;
-    }
-    if (endFraction > 0) {
-      const lastSample = sourceChannels[endFloor * srcNumberOfChannels + channelIndex];
-      weightedSum += lastSample * endFraction;
-      totalWeight += endFraction;
-    }
-    const average = weightedSum / totalWeight;
-    return average;
-  };
-  for (let newFrameIndex = 0;newFrameIndex < targetFrames; newFrameIndex++) {
-    const start = newFrameIndex * chunkSize;
-    const end = start + chunkSize;
-    if (TARGET_NUMBER_OF_CHANNELS === srcNumberOfChannels) {
-      for (let i = 0;i < srcNumberOfChannels; i++) {
-        destination[newFrameIndex * srcNumberOfChannels + i] = getSourceValues(start, end, i);
-      }
-    }
-    if (srcNumberOfChannels === 1) {
-      const m = getSourceValues(start, end, 0);
-      destination[newFrameIndex * 2 + 0] = m;
-      destination[newFrameIndex * 2 + 1] = m;
-    } else if (srcNumberOfChannels === 4) {
-      const l = getSourceValues(start, end, 0);
-      const r = getSourceValues(start, end, 1);
-      const sl = getSourceValues(start, end, 2);
-      const sr = getSourceValues(start, end, 3);
-      const l2 = 0.5 * (l + sl);
-      const r2 = 0.5 * (r + sr);
-      destination[newFrameIndex * 2 + 0] = l2;
-      destination[newFrameIndex * 2 + 1] = r2;
-    } else if (srcNumberOfChannels === 6) {
-      const l = getSourceValues(start, end, 0);
-      const r = getSourceValues(start, end, 1);
-      const c = getSourceValues(start, end, 2);
-      const sl = getSourceValues(start, end, 3);
-      const sr = getSourceValues(start, end, 4);
-      const sq = Math.sqrt(1 / 2);
-      const l2 = l + sq * (c + sl);
-      const r2 = r + sq * (c + sr);
-      destination[newFrameIndex * 2 + 0] = l2;
-      destination[newFrameIndex * 2 + 1] = r2;
-    } else {
-      for (let i = 0;i < srcNumberOfChannels; i++) {
-        destination[newFrameIndex * TARGET_NUMBER_OF_CHANNELS + i] = getSourceValues(start, end, i);
-      }
-    }
-  }
-};
-
-// src/looped-frame.ts
-var frameForVolumeProp = ({
-  behavior,
-  loop,
-  assetDurationInSeconds,
-  fps,
-  frame,
-  startsAt
-}) => {
-  if (!loop) {
-    return frame + startsAt;
-  }
-  if (behavior === "extend") {
-    return frame + startsAt;
-  }
-  const assetDurationInFrames = Math.floor(assetDurationInSeconds * fps) - startsAt;
-  return frame % assetDurationInFrames + startsAt;
-};
-
 // src/caches.ts
+import React2 from "react";
 import { cancelRender, Internals as Internals11 } from "remotion";
 
 // src/audio-extraction/audio-manager.ts
@@ -2080,9 +1925,9 @@ var makeAudioManager = () => {
     audioSampleSink,
     isMatroska,
     actualMatroskaTimestamps,
-    logLevel
+    logLevel,
+    maxCacheSize
   }) => {
-    const maxCacheSize = getMaxVideoCacheSize(logLevel);
     while ((await getTotalCacheStats()).totalSize > maxCacheSize) {
       deleteOldestIterator();
     }
@@ -2131,7 +1976,8 @@ var makeAudioManager = () => {
       audioSampleSink,
       isMatroska,
       actualMatroskaTimestamps,
-      logLevel
+      logLevel,
+      maxCacheSize
     }) => {
       queue = queue.then(() => getIterator({
         src,
@@ -2139,7 +1985,8 @@ var makeAudioManager = () => {
         audioSampleSink,
         isMatroska,
         actualMatroskaTimestamps,
-        logLevel
+        logLevel,
+        maxCacheSize
       }));
       return queue;
     },
@@ -2265,15 +2112,9 @@ var makeKeyframeBank = ({
   };
   const getFrameFromTimestamp = async (timestampInSeconds) => {
     lastUsed = Date.now();
-    const maxClampToleranceInSeconds = 0.1;
     let adjustedTimestamp = timestampInSeconds;
     if (roundTo4Digits(timestampInSeconds) < roundTo4Digits(startTimestampInSeconds)) {
-      const differenceInSeconds = startTimestampInSeconds - timestampInSeconds;
-      if (differenceInSeconds <= maxClampToleranceInSeconds) {
-        adjustedTimestamp = startTimestampInSeconds;
-      } else {
-        return Promise.reject(new Error(`Timestamp is before start timestamp (requested: ${timestampInSeconds}sec, start: ${startTimestampInSeconds}sec, difference: ${differenceInSeconds.toFixed(3)}sec exceeds tolerance of ${maxClampToleranceInSeconds}sec)`));
-      }
+      adjustedTimestamp = startTimestampInSeconds;
     }
     if (roundTo4Digits(adjustedTimestamp) > roundTo4Digits(endTimestampInSeconds)) {
       return Promise.reject(new Error(`Timestamp is after end timestamp (requested: ${timestampInSeconds}sec, end: ${endTimestampInSeconds}sec)`));
@@ -2543,9 +2384,8 @@ var makeKeyframeManager = () => {
     }
     return { finish: false };
   };
-  const ensureToStayUnderMaxCacheSize = async (logLevel) => {
+  const ensureToStayUnderMaxCacheSize = async (logLevel, maxCacheSize) => {
     let cacheStats = await getTotalCacheStats();
-    const maxCacheSize = getMaxVideoCacheSize(logLevel);
     while (cacheStats.totalSize > maxCacheSize) {
       const { finish } = await deleteOldestKeyframeBank(logLevel);
       if (finish) {
@@ -2632,9 +2472,10 @@ var makeKeyframeManager = () => {
     timestamp,
     videoSampleSink,
     src,
-    logLevel
+    logLevel,
+    maxCacheSize
   }) => {
-    await ensureToStayUnderMaxCacheSize(logLevel);
+    await ensureToStayUnderMaxCacheSize(logLevel, maxCacheSize);
     await clearKeyframeBanksBeforeTime({
       timestampInSeconds: timestamp,
       src,
@@ -2667,14 +2508,16 @@ var makeKeyframeManager = () => {
       timestamp,
       videoSampleSink,
       src,
-      logLevel
+      logLevel,
+      maxCacheSize
     }) => {
       queue = queue.then(() => requestKeyframeBank({
         packetSink,
         timestamp,
         videoSampleSink,
         src,
-        logLevel
+        logLevel,
+        maxCacheSize
       }));
       return queue;
     },
@@ -2729,10 +2572,35 @@ var getMaxVideoCacheSize = (logLevel) => {
   cachedMaxCacheSize = getUncachedMaxCacheSize(logLevel);
   return cachedMaxCacheSize;
 };
+var useMaxMediaCacheSize = (logLevel) => {
+  const context = React2.useContext(Internals11.MaxMediaCacheSizeContext);
+  if (context === null) {
+    return getMaxVideoCacheSize(logLevel);
+  }
+  return context;
+};
 
-// src/convert-audiodata/convert-audiodata.ts
-var FORMAT = "s16";
-var fixFloatingPoint2 = (value) => {
+// src/convert-audiodata/apply-volume.ts
+var applyVolume = (array, volume) => {
+  if (volume === 1) {
+    return;
+  }
+  for (let i = 0;i < array.length; i++) {
+    const newValue = array[i] * volume;
+    if (newValue < -32768) {
+      array[i] = -32768;
+    } else if (newValue > 32767) {
+      array[i] = 32767;
+    } else {
+      array[i] = newValue;
+    }
+  }
+};
+
+// src/convert-audiodata/resample-audiodata.ts
+var TARGET_NUMBER_OF_CHANNELS = 2;
+var TARGET_SAMPLE_RATE = 48000;
+var fixFloatingPoint = (value) => {
   if (value % 1 < 0.0000001) {
     return Math.floor(value);
   }
@@ -2741,6 +2609,112 @@ var fixFloatingPoint2 = (value) => {
   }
   return value;
 };
+var resampleAudioData = ({
+  srcNumberOfChannels,
+  sourceChannels,
+  destination,
+  targetFrames,
+  chunkSize
+}) => {
+  const getSourceValues = (startUnfixed, endUnfixed, channelIndex) => {
+    const start = fixFloatingPoint(startUnfixed);
+    const end = fixFloatingPoint(endUnfixed);
+    const startFloor = Math.floor(start);
+    const startCeil = Math.ceil(start);
+    const startFraction = start - startFloor;
+    const endFraction = end - Math.floor(end);
+    const endFloor = Math.floor(end);
+    let weightedSum = 0;
+    let totalWeight = 0;
+    if (startFraction > 0) {
+      const firstSample = sourceChannels[startFloor * srcNumberOfChannels + channelIndex];
+      weightedSum += firstSample * (1 - startFraction);
+      totalWeight += 1 - startFraction;
+    }
+    for (let k = startCeil;k < endFloor; k++) {
+      const num = sourceChannels[k * srcNumberOfChannels + channelIndex];
+      weightedSum += num;
+      totalWeight += 1;
+    }
+    if (endFraction > 0) {
+      const lastSample = sourceChannels[endFloor * srcNumberOfChannels + channelIndex];
+      weightedSum += lastSample * endFraction;
+      totalWeight += endFraction;
+    }
+    const average = weightedSum / totalWeight;
+    return average;
+  };
+  for (let newFrameIndex = 0;newFrameIndex < targetFrames; newFrameIndex++) {
+    const start = newFrameIndex * chunkSize;
+    const end = start + chunkSize;
+    if (TARGET_NUMBER_OF_CHANNELS === srcNumberOfChannels) {
+      for (let i = 0;i < srcNumberOfChannels; i++) {
+        destination[newFrameIndex * srcNumberOfChannels + i] = getSourceValues(start, end, i);
+      }
+    }
+    if (srcNumberOfChannels === 1) {
+      const m = getSourceValues(start, end, 0);
+      destination[newFrameIndex * 2 + 0] = m;
+      destination[newFrameIndex * 2 + 1] = m;
+    } else if (srcNumberOfChannels === 4) {
+      const l = getSourceValues(start, end, 0);
+      const r = getSourceValues(start, end, 1);
+      const sl = getSourceValues(start, end, 2);
+      const sr = getSourceValues(start, end, 3);
+      const l2 = 0.5 * (l + sl);
+      const r2 = 0.5 * (r + sr);
+      destination[newFrameIndex * 2 + 0] = l2;
+      destination[newFrameIndex * 2 + 1] = r2;
+    } else if (srcNumberOfChannels === 6) {
+      const l = getSourceValues(start, end, 0);
+      const r = getSourceValues(start, end, 1);
+      const c = getSourceValues(start, end, 2);
+      const sl = getSourceValues(start, end, 3);
+      const sr = getSourceValues(start, end, 4);
+      const sq = Math.sqrt(1 / 2);
+      const l2 = l + sq * (c + sl);
+      const r2 = r + sq * (c + sr);
+      destination[newFrameIndex * 2 + 0] = l2;
+      destination[newFrameIndex * 2 + 1] = r2;
+    } else {
+      for (let i = 0;i < srcNumberOfChannels; i++) {
+        destination[newFrameIndex * TARGET_NUMBER_OF_CHANNELS + i] = getSourceValues(start, end, i);
+      }
+    }
+  }
+};
+
+// src/looped-frame.ts
+var frameForVolumeProp = ({
+  behavior,
+  loop,
+  assetDurationInSeconds,
+  fps,
+  frame,
+  startsAt
+}) => {
+  if (!loop) {
+    return frame + startsAt;
+  }
+  if (behavior === "extend") {
+    return frame + startsAt;
+  }
+  const assetDurationInFrames = Math.floor(assetDurationInSeconds * fps) - startsAt;
+  return frame % assetDurationInFrames + startsAt;
+};
+
+// src/convert-audiodata/convert-audiodata.ts
+var FORMAT = "s16";
+var fixFloatingPoint2 = (value) => {
+  const decimal = Math.abs(value % 1);
+  if (decimal < 0.0000001) {
+    return value < 0 ? Math.ceil(value) : Math.floor(value);
+  }
+  if (decimal > 0.9999999) {
+    return value < 0 ? Math.floor(value) : Math.ceil(value);
+  }
+  return value;
+};
 var ceilButNotIfFloatingPointIssue = (value) => {
   const fixed = fixFloatingPoint2(value);
   return Math.ceil(fixed);
@@ -2850,7 +2824,8 @@ var extractAudioInternal = async ({
   audioStreamIndex,
   trimBefore,
   trimAfter,
-  fps
+  fps,
+  maxCacheSize
 }) => {
   const { getAudio, actualMatroskaTimestamps, isMatroska, getDuration } = await getSink(src, logLevel);
   let mediaDurationInSeconds = null;
@@ -2887,12 +2862,12 @@ var extractAudioInternal = async ({
     audioSampleSink: audio.sampleSink,
     isMatroska,
     actualMatroskaTimestamps,
-    logLevel
+    logLevel,
+    maxCacheSize
   });
   const durationInSeconds = durationNotYetApplyingPlaybackRate * playbackRate;
   const samples = await sampleIterator.getSamples(timeInSeconds, durationInSeconds);
   audioManager.logOpenFrames();
-  const trimStartToleranceInSeconds = 0.002;
   const audioDataArray = [];
   for (let i = 0;i < samples.length; i++) {
     const sample = samples[i];
@@ -2907,13 +2882,18 @@ var extractAudioInternal = async ({
     const audioDataRaw = sample.toAudioData();
     let trimStartInSeconds = 0;
     let trimEndInSeconds = 0;
+    let leadingSilence = null;
     if (isFirstSample) {
-      trimStartInSeconds = timeInSeconds - sample.timestamp;
-      if (trimStartInSeconds < 0 && trimStartInSeconds > -trimStartToleranceInSeconds) {
-        trimStartInSeconds = 0;
-      }
+      trimStartInSeconds = fixFloatingPoint2(timeInSeconds - sample.timestamp);
       if (trimStartInSeconds < 0) {
-        throw new Error(`trimStartInSeconds is negative: ${trimStartInSeconds}. ${JSON.stringify({ timeInSeconds, ts: sample.timestamp, d: sample.duration, isFirstSample, isLastSample, durationInSeconds, i, st: samples.map((s) => s.timestamp) })}`);
+        const silenceFrames = Math.ceil(fixFloatingPoint2(-trimStartInSeconds * TARGET_SAMPLE_RATE));
+        leadingSilence = {
+          data: new Int16Array(silenceFrames * TARGET_NUMBER_OF_CHANNELS),
+          numberOfFrames: silenceFrames,
+          timestamp: timeInSeconds * 1e6,
+          durationInMicroSeconds: silenceFrames / TARGET_SAMPLE_RATE * 1e6
+        };
+        trimStartInSeconds = 0;
       }
     }
     if (isLastSample) {
@@ -2931,6 +2911,9 @@ var extractAudioInternal = async ({
     if (audioData.numberOfFrames === 0) {
       continue;
     }
+    if (leadingSilence) {
+      audioDataArray.push(leadingSilence);
+    }
     audioDataArray.push(audioData);
   }
   if (audioDataArray.length === 0) {
@@ -2954,7 +2937,8 @@ var extractFrameInternal = async ({
   trimAfter,
   trimBefore,
   playbackRate,
-  fps
+  fps,
+  maxCacheSize
 }) => {
   const sink = await getSink(src, logLevel);
   const video = await sink.getVideo();
@@ -2994,7 +2978,8 @@ var extractFrameInternal = async ({
     videoSampleSink: video.sampleSink,
     timestamp: timeInSeconds,
     src,
-    logLevel
+    logLevel,
+    maxCacheSize
   });
   if (keyframeBank === "has-alpha") {
     return {
@@ -3018,6 +3003,39 @@ var extractFrame = (params) => {
   return queue2;
 };
 
+// src/video-extraction/rotate-frame.ts
+var 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;
+};
+
 // src/extract-frame-and-audio.ts
 var extractFrameAndAudio = async ({
   src,
@@ -3031,7 +3049,8 @@ var extractFrameAndAudio = async ({
   audioStreamIndex,
   trimAfter,
   trimBefore,
-  fps
+  fps,
+  maxCacheSize
 }) => {
   try {
     const [frame, audio] = await Promise.all([
@@ -3043,7 +3062,8 @@ var extractFrameAndAudio = async ({
         trimAfter,
         playbackRate,
         trimBefore,
-        fps
+        fps,
+        maxCacheSize
       }) : null,
       includeAudio ? extractAudio({
         src,
@@ -3055,7 +3075,8 @@ var extractFrameAndAudio = async ({
         audioStreamIndex,
         trimAfter,
         fps,
-        trimBefore
+        trimBefore,
+        maxCacheSize
       }) : null
     ]);
     if (frame?.type === "cannot-decode") {
@@ -3088,9 +3109,20 @@ var extractFrameAndAudio = async ({
         durationInSeconds: frame?.type === "success" ? frame.durationInSeconds : null
       };
     }
+    if (!frame?.frame) {
+      return {
+        type: "success",
+        frame: null,
+        audio: audio?.data ?? null,
+        durationInSeconds: audio?.durationInSeconds ?? null
+      };
+    }
     return {
       type: "success",
-      frame: frame?.frame?.toVideoFrame() ?? null,
+      frame: await rotateFrame({
+        frame: frame.frame.toVideoFrame(),
+        rotation: frame.frame.rotation
+      }),
       audio: audio?.data ?? null,
       durationInSeconds: audio?.durationInSeconds ?? null
     };
@@ -3121,7 +3153,8 @@ if (typeof window !== "undefined" && window.remotion_broadcastChannel && window.
           audioStreamIndex: data.audioStreamIndex,
           trimAfter: data.trimAfter,
           trimBefore: data.trimBefore,
-          fps: data.fps
+          fps: data.fps,
+          maxCacheSize: data.maxCacheSize
         });
         if (result.type === "cannot-decode") {
           const cannotDecodeResponse = {
@@ -3158,10 +3191,9 @@ if (typeof window !== "undefined" && window.remotion_broadcastChannel && window.
           return;
         }
         const { frame, audio, durationInSeconds } = result;
-        const videoFrame = frame;
-        const imageBitmap = videoFrame ? await createImageBitmap(videoFrame) : null;
-        if (videoFrame) {
-          videoFrame.close();
+        const imageBitmap = frame ? await createImageBitmap(frame) : null;
+        if (frame) {
+          frame.close();
         }
         const response = {
           type: "response-success",
@@ -3171,7 +3203,6 @@ if (typeof window !== "undefined" && window.remotion_broadcastChannel && window.
           durationInSeconds: durationInSeconds ?? null
         };
         window.remotion_broadcastChannel.postMessage(response);
-        videoFrame?.close();
       } catch (error) {
         const response = {
           type: "response-error",
@@ -3198,7 +3229,8 @@ var extractFrameViaBroadcastChannel = ({
   audioStreamIndex,
   trimAfter,
   trimBefore,
-  fps
+  fps,
+  maxCacheSize
 }) => {
   if (isClientSideRendering || window.remotion_isMainTab) {
     return extractFrameAndAudio({
@@ -3213,7 +3245,8 @@ var extractFrameViaBroadcastChannel = ({
       audioStreamIndex,
       trimAfter,
       trimBefore,
-      fps
+      fps,
+      maxCacheSize
     });
   }
   const requestId = crypto.randomUUID();
@@ -3285,7 +3318,8 @@ var extractFrameViaBroadcastChannel = ({
     audioStreamIndex,
     trimAfter,
     trimBefore,
-    fps
+    fps,
+    maxCacheSize
   };
   window.remotion_broadcastChannel.postMessage(request);
   let timeoutId;
@@ -3346,6 +3380,7 @@ var AudioForRendering = ({
     sequenceContext?.relativeFrom,
     sequenceContext?.durationInFrames
   ]);
+  const maxCacheSize = useMaxMediaCacheSize(logLevel ?? window.remotion_logLevel);
   useLayoutEffect2(() => {
     const timestamp = frame / fps;
     const durationInSeconds = 1 / fps;
@@ -3378,7 +3413,8 @@ var AudioForRendering = ({
       audioStreamIndex: audioStreamIndex ?? 0,
       trimAfter,
       trimBefore,
-      fps
+      fps,
+      maxCacheSize
     }).then((result) => {
       if (result.type === "unknown-container-format") {
         if (disallowFallbackToHtml5Audio) {
@@ -3476,7 +3512,8 @@ var AudioForRendering = ({
     toneFrequency,
     trimAfter,
     trimBefore,
-    replaceWithHtml5Audio
+    replaceWithHtml5Audio,
+    maxCacheSize
   ]);
   if (replaceWithHtml5Audio) {
     return /* @__PURE__ */ jsx2(Html5Audio, {
@@ -3917,7 +3954,6 @@ import {
   useState as useState5
 } from "react";
 import {
-  cancelRender as cancelRender3,
   Internals as Internals16,
   Loop,
   random as random2,
@@ -3965,11 +4001,16 @@ var VideoForRendering = ({
     sequenceContext?.durationInFrames
   ]);
   const environment = useRemotionEnvironment3();
-  const { delayRender, continueRender } = useDelayRender2();
+  const { delayRender, continueRender, cancelRender: cancelRender3 } = useDelayRender2();
   const canvasRef = useRef3(null);
   const [replaceWithOffthreadVideo, setReplaceWithOffthreadVideo] = useState5(false);
   const audioEnabled = Internals16.useAudioEnabled();
   const videoEnabled = Internals16.useVideoEnabled();
+  const maxCacheSize = useMaxMediaCacheSize(logLevel);
+  const [error, setError] = useState5(null);
+  if (error) {
+    throw error;
+  }
   useLayoutEffect4(() => {
     if (!canvasRef.current) {
       return;
@@ -3977,6 +4018,9 @@ var VideoForRendering = ({
     if (replaceWithOffthreadVideo) {
       return;
     }
+    if (!canvasRef.current?.getContext) {
+      return setError(new Error("Canvas does not have .getContext() method available. This could be because <Video> was mounted inside an <svg> tag."));
+    }
     const timestamp = frame / fps;
     const durationInSeconds = 1 / fps;
     const newHandle = delayRender(`Extracting frame at time ${timestamp}`, {
@@ -4005,7 +4049,8 @@ var VideoForRendering = ({
       audioStreamIndex,
       trimAfter: trimAfterValue,
       trimBefore: trimBeforeValue,
-      fps
+      fps,
+      maxCacheSize
     }).then((result) => {
       if (result.type === "unknown-container-format") {
         if (disallowFallbackToOffthreadVideo) {
@@ -4064,8 +4109,8 @@ var VideoForRendering = ({
         if (!context) {
           return;
         }
-        context.canvas.width = imageBitmap instanceof ImageBitmap ? imageBitmap.width : imageBitmap.displayWidth;
-        context.canvas.height = imageBitmap instanceof ImageBitmap ? imageBitmap.height : imageBitmap.displayHeight;
+        context.canvas.width = imageBitmap.width;
+        context.canvas.height = imageBitmap.height;
         context.canvas.style.aspectRatio = `${context.canvas.width} / ${context.canvas.height}`;
         context.drawImage(imageBitmap, 0, 0);
         imageBitmap.close();
@@ -4104,8 +4149,8 @@ var VideoForRendering = ({
         });
       }
       continueRender(newHandle);
-    }).catch((error) => {
-      cancelRender3(error);
+    }).catch((err) => {
+      cancelRender3(err);
     });
     return () => {
       continueRender(newHandle);
@@ -4139,7 +4184,9 @@ var VideoForRendering = ({
     trimAfterValue,
     trimBeforeValue,
     audioEnabled,
-    videoEnabled
+    videoEnabled,
+    maxCacheSize,
+    cancelRender3
   ]);
   const classNameValue = useMemo5(() => {
     return [Internals16.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals16.truthy).join(" ");
@@ -4181,7 +4228,9 @@ var VideoForRendering = ({
     });
     if (loop) {
       if (!replaceWithOffthreadVideo.durationInSeconds) {
-        cancelRender3(new Error(`Cannot render video ${src}: @remotion/media was unable to render, and fell back to <OffthreadVideo>. Also, "loop" was set, but <OffthreadVideo> does not support looping and @remotion/media could also not determine the duration of the video.`));
+        const err = new Error(`Cannot render video ${src}: @remotion/media was unable to render, and fell back to <OffthreadVideo>. Also, "loop" was set, but <OffthreadVideo> does not support looping and @remotion/media could also not determine the duration of the video.`);
+        cancelRender3(err);
+        throw err;
       }
       return /* @__PURE__ */ jsx5(Loop, {
         layout: "none",