@remotion/webcodecs 4.0.327 → 4.0.330

package/dist/esm/index.mjs

@@ -366,22 +366,32 @@ var rotateAndResizeVideoFrame = ({
   resizeOperation
 }) => {
   const normalized = normalizeVideoRotation(rotation);
-  if (normalized === 0 && resizeOperation === null) {
+  const mustProcess = "rotation" in frame && frame.rotation !== 0;
+  if (normalized === 0 && resizeOperation === null && !mustProcess) {
     return frame;
   }
   if (normalized % 90 !== 0) {
     throw new Error("Only 90 degree rotations are supported");
   }
-  const { height, width } = calculateNewDimensionsFromRotateAndScale({
+  const tentativeDimensions = calculateNewDimensionsFromRotateAndScale({
     height: frame.displayHeight,
     width: frame.displayWidth,
     rotation,
     needsToBeMultipleOfTwo,
     resizeOperation
   });
-  if (normalized === 0 && height === frame.displayHeight && width === frame.displayWidth) {
+  if (normalized === 0 && tentativeDimensions.height === frame.displayHeight && tentativeDimensions.width === frame.displayWidth && !mustProcess) {
     return frame;
   }
+  const frameRotation = frame.rotation ?? 0;
+  const canvasRotationToApply = normalizeVideoRotation(normalized - frameRotation);
+  const { width, height } = calculateNewDimensionsFromRotateAndScale({
+    height: frame.displayHeight,
+    width: frame.displayWidth,
+    rotation: canvasRotationToApply,
+    needsToBeMultipleOfTwo,
+    resizeOperation
+  });
   const canvas = new OffscreenCanvas(width, height);
   const ctx = canvas.getContext("2d");
   if (!ctx) {
@@ -389,8 +399,6 @@ var rotateAndResizeVideoFrame = ({
   }
   canvas.width = width;
   canvas.height = height;
-  const frameRotation = frame.rotation ?? 0;
-  const canvasRotationToApply = normalizeVideoRotation(normalized + frameRotation);
   if (canvasRotationToApply === 90) {
     ctx.translate(width, 0);
   } else if (canvasRotationToApply === 180) {
@@ -404,7 +412,7 @@ var rotateAndResizeVideoFrame = ({
   if (frame.displayHeight !== height || frame.displayWidth !== width) {
     const dimensionsAfterRotate = calculateNewDimensionsFromRotate({
       height: frame.displayHeight,
-      rotation,
+      rotation: canvasRotationToApply,
       width: frame.displayWidth
     });
     ctx.scale(width / dimensionsAfterRotate.width, height / dimensionsAfterRotate.height);
@@ -4874,7 +4882,7 @@ var convertToCorrectVideoFrame = ({
 };
 
 // src/on-frame.ts
-var onFrame = async ({
+var processFrame = async ({
   frame: unrotatedFrame,
   onVideoFrame,
   track,
@@ -5069,7 +5077,7 @@ var reencodeVideoTrack = async ({
   if (videoOperation.type !== "reencode") {
     throw new Error(`Video track with ID ${track.trackId} could not be resolved with a valid operation. Received ${JSON.stringify(videoOperation)}, but must be either "copy", "reencode", "drop" or "fail"`);
   }
-  const rotation = (videoOperation.rotate ?? rotate) - track.rotation;
+  const rotation = (videoOperation.rotate ?? rotate) + track.rotation;
   const { height: newHeight, width: newWidth } = calculateNewDimensionsFromRotateAndScale({
     width: track.codedWidth,
     height: track.codedHeight,
@@ -5141,7 +5149,7 @@ var reencodeVideoTrack = async ({
     },
     onOutput: async (frame) => {
       await controller._internals._mediaParserController._internals.checkForAbortAndPause();
-      const processedFrame = await onFrame({
+      const processedFrame = await processFrame({
         frame,
         track,
         onVideoFrame,
@@ -5594,7 +5602,7 @@ import {
 import { parseMediaOnWebWorker } from "@remotion/media-parser/worker";
 var internalExtractFrames = ({
   src,
-  onFrame: onFrame2,
+  onFrame,
   signal,
   timestampsInSeconds,
   acknowledgeRemotionLicense,
@@ -5609,6 +5617,8 @@ var internalExtractFrames = ({
   };
   signal?.addEventListener("abort", abortListener, { once: true });
   let dur = null;
+  let lastFrame;
+  let lastFrameEmitted;
   parseMediaOnWebWorker({
     src: new URL(src, window.location.href),
     acknowledgeRemotionLicense,
@@ -5617,21 +5627,42 @@ var internalExtractFrames = ({
     onDurationInSeconds(durationInSeconds) {
       dur = durationInSeconds;
     },
-    onVideoTrack: async ({ track }) => {
+    onVideoTrack: async ({ track, container }) => {
       const timestampTargetsUnsorted = typeof timestampsInSeconds === "function" ? await timestampsInSeconds({
         track,
+        container,
         durationInSeconds: dur
       }) : timestampsInSeconds;
       const timestampTargets = timestampTargetsUnsorted.sort((a, b) => a - b);
+      if (timestampTargets.length === 0) {
+        throw new Error("expected at least one timestamp to extract but found zero");
+      }
       controller.seek(timestampTargets[0]);
       const decoder = createVideoDecoder({
         onFrame: (frame) => {
-          if (frame.timestamp >= expectedFrames[0] - 1) {
-            expectedFrames.shift();
-            onFrame2(frame);
-          } else {
+          Log.trace(logLevel, "Received frame with timestamp", frame.timestamp);
+          if (expectedFrames.length === 0) {
             frame.close();
+            return;
+          }
+          if (frame.timestamp < expectedFrames[0] - 1) {
+            if (lastFrame) {
+              lastFrame.close();
+            }
+            lastFrame = frame;
+            return;
+          }
+          if (expectedFrames[0] + 6667 < frame.timestamp && lastFrame) {
+            onFrame(lastFrame);
+            lastFrameEmitted = lastFrame;
+            expectedFrames.shift();
+            lastFrame = frame;
+            return;
           }
+          expectedFrames.shift();
+          onFrame(frame);
+          lastFrameEmitted = frame;
+          lastFrame = frame;
         },
         onError: (e) => {
           controller.abort();
@@ -5647,18 +5678,23 @@ var internalExtractFrames = ({
         expectedFrames.push(timestampTargets.shift() * WEBCODECS_TIMESCALE);
         while (queued.length > 0) {
           const sam = queued.shift();
+          if (!sam) {
+            throw new Error("Sample is undefined");
+          }
           await decoder.waitForQueueToBeLessThan(10);
+          Log.trace(logLevel, "Decoding sample", sam.timestamp);
           await decoder.decode(sam);
         }
       };
       return async (sample) => {
         const nextTimestampWeWant = timestampTargets[0];
+        Log.trace(logLevel, "Received sample with dts", sample.decodingTimestamp, "and cts", sample.timestamp);
         if (sample.type === "key") {
           await decoder.flush();
           queued.length = 0;
         }
         queued.push(sample);
-        if (sample.timestamp >= timestampTargets[timestampTargets.length - 1] * WEBCODECS_TIMESCALE) {
+        if (sample.decodingTimestamp >= timestampTargets[timestampTargets.length - 1] * WEBCODECS_TIMESCALE) {
           await doProcess();
           await decoder.flush();
           controller.abort();
@@ -5667,7 +5703,7 @@ var internalExtractFrames = ({
         if (nextTimestampWeWant === undefined) {
           throw new Error("this should not happen");
         }
-        if (sample.timestamp >= nextTimestampWeWant * WEBCODECS_TIMESCALE) {
+        if (sample.decodingTimestamp >= nextTimestampWeWant * WEBCODECS_TIMESCALE) {
           await doProcess();
           if (timestampTargets.length === 0) {
             await decoder.flush();
@@ -5675,7 +5711,11 @@ var internalExtractFrames = ({
           }
         }
         return async () => {
+          await doProcess();
           await decoder.flush();
+          if (lastFrame && lastFrameEmitted !== lastFrame) {
+            lastFrame.close();
+          }
         };
       };
     }
@@ -5688,6 +5728,9 @@ var internalExtractFrames = ({
       resolvers.resolve();
     }
   }).finally(() => {
+    if (lastFrame && lastFrameEmitted !== lastFrame) {
+      lastFrame.close();
+    }
     signal?.removeEventListener("abort", abortListener);
   });
   return resolvers.promise;
@@ -5715,6 +5758,146 @@ var getAvailableAudioCodecs = ({
   }
   throw new Error(`Unsupported container: ${container}`);
 };
+// src/get-partial-audio-data.ts
+import {
+  hasBeenAborted as hasBeenAborted2,
+  mediaParserController as mediaParserController3,
+  parseMedia
+} from "@remotion/media-parser";
+var extractOverlappingAudioSamples = ({
+  sample,
+  fromSeconds,
+  toSeconds,
+  channelIndex,
+  timescale: timescale2
+}) => {
+  const chunkStartInSeconds = sample.timestamp / timescale2;
+  const chunkDuration = sample.numberOfFrames / sample.sampleRate;
+  const chunkEndInSeconds = chunkStartInSeconds + chunkDuration;
+  const overlapStartSecond = Math.max(chunkStartInSeconds, fromSeconds);
+  const overlapEndSecond = Math.min(chunkEndInSeconds, toSeconds);
+  if (overlapStartSecond >= overlapEndSecond) {
+    return null;
+  }
+  const { numberOfChannels } = sample;
+  const samplesPerChannel = sample.numberOfFrames;
+  let data;
+  if (numberOfChannels === 1) {
+    data = new Float32Array(sample.allocationSize({ format: "f32", planeIndex: 0 }));
+    sample.copyTo(data, { format: "f32", planeIndex: 0 });
+  } else {
+    const allChannelsData = new Float32Array(sample.allocationSize({ format: "f32", planeIndex: 0 }));
+    sample.copyTo(allChannelsData, { format: "f32", planeIndex: 0 });
+    data = new Float32Array(samplesPerChannel);
+    for (let i = 0;i < samplesPerChannel; i++) {
+      data[i] = allChannelsData[i * numberOfChannels + channelIndex];
+    }
+  }
+  const startSampleInChunk = Math.floor((overlapStartSecond - chunkStartInSeconds) * sample.sampleRate);
+  const endSampleInChunk = Math.ceil((overlapEndSecond - chunkStartInSeconds) * sample.sampleRate);
+  return data.slice(startSampleInChunk, endSampleInChunk);
+};
+var BUFFER_IN_SECONDS = 0.1;
+var getPartialAudioData = async ({
+  src,
+  fromSeconds,
+  toSeconds,
+  channelIndex,
+  signal
+}) => {
+  const controller = mediaParserController3();
+  const audioSamples = [];
+  if (signal.aborted) {
+    throw new Error("Operation was aborted");
+  }
+  const { resolve: resolveAudioDecode, promise: audioDecodePromise } = Promise.withResolvers();
+  const onAbort = () => {
+    controller.abort();
+    resolveAudioDecode();
+  };
+  signal.addEventListener("abort", onAbort, { once: true });
+  try {
+    if (fromSeconds > 0) {
+      controller.seek(fromSeconds);
+    }
+    await parseMedia({
+      acknowledgeRemotionLicense: true,
+      src,
+      controller,
+      onAudioTrack: ({ track }) => {
+        if (signal.aborted) {
+          return null;
+        }
+        const audioDecoder = createAudioDecoder({
+          track,
+          onFrame: (sample) => {
+            if (signal.aborted) {
+              sample.close();
+              return;
+            }
+            const trimmedData = extractOverlappingAudioSamples({
+              sample,
+              fromSeconds,
+              toSeconds,
+              channelIndex,
+              timescale: track.timescale
+            });
+            if (trimmedData) {
+              audioSamples.push(trimmedData);
+            }
+            sample.close();
+          },
+          onError(error) {
+            resolveAudioDecode();
+            throw error;
+          }
+        });
+        return async (sample) => {
+          if (signal.aborted) {
+            audioDecoder.close();
+            controller.abort();
+            return;
+          }
+          if (!audioDecoder) {
+            throw new Error("No audio decoder found");
+          }
+          const fromSecondsWithBuffer = fromSeconds === 0 ? fromSeconds : fromSeconds + BUFFER_IN_SECONDS;
+          const toSecondsWithBuffer = toSeconds - BUFFER_IN_SECONDS;
+          const time = sample.timestamp / track.timescale;
+          if (time < fromSecondsWithBuffer) {
+            return;
+          }
+          if (time >= toSecondsWithBuffer) {
+            audioDecoder.flush().then(() => {
+              audioDecoder.close();
+              resolveAudioDecode();
+            });
+            controller.abort();
+            return;
+          }
+          await audioDecoder.waitForQueueToBeLessThan(10);
+          audioDecoder.decode(sample);
+        };
+      }
+    });
+  } catch (err) {
+    const isAbortedByTimeCutoff = hasBeenAborted2(err);
+    if (!isAbortedByTimeCutoff && !signal.aborted) {
+      throw err;
+    }
+  } finally {
+    signal.removeEventListener("abort", onAbort);
+  }
+  await audioDecodePromise;
+  const totalSamples = audioSamples.reduce((sum, sample) => sum + sample.length, 0);
+  const result = new Float32Array(totalSamples);
+  let offset = 0;
+  for (const audioSample of audioSamples) {
+    result.set(audioSample, offset);
+    offset += audioSample.length;
+  }
+  return result;
+};
 
 // src/index.ts
 var WebCodecsInternals = {
@@ -5726,6 +5909,7 @@ setRemotionImported();
 export {
   webcodecsController,
   rotateAndResizeVideoFrame,
+  getPartialAudioData,
   getDefaultVideoCodec,
   getDefaultAudioCodec,
   getAvailableVideoCodecs,

package/dist/extract-frames.d.ts

@@ -1,6 +1,7 @@
-import type { MediaParserLogLevel, MediaParserVideoTrack } from '@remotion/media-parser';
+import type { MediaParserContainer, MediaParserLogLevel, MediaParserVideoTrack } from '@remotion/media-parser';
 export type ExtractFramesTimestampsInSecondsFn = (options: {
     track: MediaParserVideoTrack;
+    container: MediaParserContainer;
     durationInSeconds: number | null;
 }) => Promise<number[]> | number[];
 export declare const extractFrames: (options: {

package/dist/extract-frames.js

@@ -5,6 +5,7 @@ const media_parser_1 = require("@remotion/media-parser");
 const worker_1 = require("@remotion/media-parser/worker");
 const create_video_decoder_1 = require("./create-video-decoder");
 const with_resolvers_1 = require("./create/with-resolvers");
+const log_1 = require("./log");
 const internalExtractFrames = ({ src, onFrame, signal, timestampsInSeconds, acknowledgeRemotionLicense, logLevel, }) => {
     const controller = (0, media_parser_1.mediaParserController)();
     const expectedFrames = [];
@@ -15,6 +16,8 @@ const internalExtractFrames = ({ src, onFrame, signal, timestampsInSeconds, ackn
     };
     signal?.addEventListener('abort', abortListener, { once: true });
     let dur = null;
+    let lastFrame;
+    let lastFrameEmitted;
     (0, worker_1.parseMediaOnWebWorker)({
         src: new URL(src, window.location.href),
         acknowledgeRemotionLicense,
@@ -23,24 +26,47 @@ const internalExtractFrames = ({ src, onFrame, signal, timestampsInSeconds, ackn
         onDurationInSeconds(durationInSeconds) {
             dur = durationInSeconds;
         },
-        onVideoTrack: async ({ track }) => {
+        onVideoTrack: async ({ track, container }) => {
             const timestampTargetsUnsorted = typeof timestampsInSeconds === 'function'
                 ? await timestampsInSeconds({
                     track,
+                    container,
                     durationInSeconds: dur,
                 })
                 : timestampsInSeconds;
             const timestampTargets = timestampTargetsUnsorted.sort((a, b) => a - b);
+            if (timestampTargets.length === 0) {
+                throw new Error('expected at least one timestamp to extract but found zero');
+            }
             controller.seek(timestampTargets[0]);
             const decoder = (0, create_video_decoder_1.createVideoDecoder)({
                 onFrame: (frame) => {
-                    if (frame.timestamp >= expectedFrames[0] - 1) {
-                        expectedFrames.shift();
-                        onFrame(frame);
-                    }
-                    else {
+                    log_1.Log.trace(logLevel, 'Received frame with timestamp', frame.timestamp);
+                    if (expectedFrames.length === 0) {
                         frame.close();
+                        return;
+                    }
+                    if (frame.timestamp < expectedFrames[0] - 1) {
+                        if (lastFrame) {
+                            lastFrame.close();
+                        }
+                        lastFrame = frame;
+                        return;
+                    }
+                    // A WebM might have a timestamp of 67000 but we request 66666
+                    // See a test with this problem in it-tests/rendering/frame-accuracy.test.ts
+                    // Solution: We allow a 10.000ms - 3.333ms = 6.667ms difference between the requested timestamp and the actual timestamp
+                    if (expectedFrames[0] + 6667 < frame.timestamp && lastFrame) {
+                        onFrame(lastFrame);
+                        lastFrameEmitted = lastFrame;
+                        expectedFrames.shift();
+                        lastFrame = frame;
+                        return;
                     }
+                    expectedFrames.shift();
+                    onFrame(frame);
+                    lastFrameEmitted = frame;
+                    lastFrame = frame;
                 },
                 onError: (e) => {
                     controller.abort();
@@ -57,18 +83,23 @@ const internalExtractFrames = ({ src, onFrame, signal, timestampsInSeconds, ackn
                 expectedFrames.push(timestampTargets.shift() * media_parser_1.WEBCODECS_TIMESCALE);
                 while (queued.length > 0) {
                     const sam = queued.shift();
+                    if (!sam) {
+                        throw new Error('Sample is undefined');
+                    }
                     await decoder.waitForQueueToBeLessThan(10);
+                    log_1.Log.trace(logLevel, 'Decoding sample', sam.timestamp);
                     await decoder.decode(sam);
                 }
             };
             return async (sample) => {
                 const nextTimestampWeWant = timestampTargets[0];
+                log_1.Log.trace(logLevel, 'Received sample with dts', sample.decodingTimestamp, 'and cts', sample.timestamp);
                 if (sample.type === 'key') {
                     await decoder.flush();
                     queued.length = 0;
                 }
                 queued.push(sample);
-                if (sample.timestamp >=
+                if (sample.decodingTimestamp >=
                     timestampTargets[timestampTargets.length - 1] * media_parser_1.WEBCODECS_TIMESCALE) {
                     await doProcess();
                     await decoder.flush();
@@ -78,7 +109,8 @@ const internalExtractFrames = ({ src, onFrame, signal, timestampsInSeconds, ackn
                 if (nextTimestampWeWant === undefined) {
                     throw new Error('this should not happen');
                 }
-                if (sample.timestamp >= nextTimestampWeWant * media_parser_1.WEBCODECS_TIMESCALE) {
+                if (sample.decodingTimestamp >=
+                    nextTimestampWeWant * media_parser_1.WEBCODECS_TIMESCALE) {
                     await doProcess();
                     if (timestampTargets.length === 0) {
                         await decoder.flush();
@@ -86,7 +118,11 @@ const internalExtractFrames = ({ src, onFrame, signal, timestampsInSeconds, ackn
                     }
                 }
                 return async () => {
+                    await doProcess();
                     await decoder.flush();
+                    if (lastFrame && lastFrameEmitted !== lastFrame) {
+                        lastFrame.close();
+                    }
                 };
             };
         },
@@ -103,6 +139,9 @@ const internalExtractFrames = ({ src, onFrame, signal, timestampsInSeconds, ackn
         }
     })
         .finally(() => {
+        if (lastFrame && lastFrameEmitted !== lastFrame) {
+            lastFrame.close();
+        }
         signal?.removeEventListener('abort', abortListener);
     });
     return resolvers.promise;

package/dist/get-partial-audio-data.d.ts

@@ -0,0 +1,8 @@
+export type GetPartialAudioDataProps = {
+    src: string;
+    fromSeconds: number;
+    toSeconds: number;
+    channelIndex: number;
+    signal: AbortSignal;
+};
+export declare const getPartialAudioData: ({ src, fromSeconds, toSeconds, channelIndex, signal, }: GetPartialAudioDataProps) => Promise<Float32Array>;

package/dist/get-partial-audio-data.js

@@ -0,0 +1,156 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPartialAudioData = void 0;
+const media_parser_1 = require("@remotion/media-parser");
+const create_audio_decoder_1 = require("./create-audio-decoder");
+/**
+ * Extract the portion of an audio chunk that overlaps with the requested time window
+ */
+const extractOverlappingAudioSamples = ({ sample, fromSeconds, toSeconds, channelIndex, timescale, }) => {
+    const chunkStartInSeconds = sample.timestamp / timescale;
+    const chunkDuration = sample.numberOfFrames / sample.sampleRate;
+    const chunkEndInSeconds = chunkStartInSeconds + chunkDuration;
+    // Calculate overlap with the requested window
+    const overlapStartSecond = Math.max(chunkStartInSeconds, fromSeconds);
+    const overlapEndSecond = Math.min(chunkEndInSeconds, toSeconds);
+    // Skip if no overlap with requested window
+    if (overlapStartSecond >= overlapEndSecond) {
+        return null;
+    }
+    // For multi-channel audio, we need to handle channels properly
+    const { numberOfChannels } = sample;
+    const samplesPerChannel = sample.numberOfFrames;
+    let data;
+    if (numberOfChannels === 1) {
+        // Mono audio
+        data = new Float32Array(sample.allocationSize({ format: 'f32', planeIndex: 0 }));
+        sample.copyTo(data, { format: 'f32', planeIndex: 0 });
+    }
+    else {
+        // Multi-channel audio: extract specific channel
+        const allChannelsData = new Float32Array(sample.allocationSize({ format: 'f32', planeIndex: 0 }));
+        sample.copyTo(allChannelsData, { format: 'f32', planeIndex: 0 });
+        // Extract the specific channel (interleaved audio)
+        data = new Float32Array(samplesPerChannel);
+        for (let i = 0; i < samplesPerChannel; i++) {
+            data[i] = allChannelsData[i * numberOfChannels + channelIndex];
+        }
+    }
+    // Calculate which samples to keep from this chunk
+    const startSampleInChunk = Math.floor((overlapStartSecond - chunkStartInSeconds) * sample.sampleRate);
+    const endSampleInChunk = Math.ceil((overlapEndSecond - chunkStartInSeconds) * sample.sampleRate);
+    // Only keep the samples we need
+    return data.slice(startSampleInChunk, endSampleInChunk);
+};
+// Small buffer to ensure we capture chunks that span across boundaries
+// We need this because specified time window is not always aligned with the audio chunks
+// so that we fetch a bit more, and then trim it down to the requested time window
+const BUFFER_IN_SECONDS = 0.1;
+const getPartialAudioData = async ({ src, fromSeconds, toSeconds, channelIndex, signal, }) => {
+    const controller = (0, media_parser_1.mediaParserController)();
+    // Collect audio samples
+    const audioSamples = [];
+    // Abort if the signal is already aborted
+    if (signal.aborted) {
+        throw new Error('Operation was aborted');
+    }
+    // Forward abort signal immediately to the controller
+    const { resolve: resolveAudioDecode, promise: audioDecodePromise } = Promise.withResolvers();
+    const onAbort = () => {
+        controller.abort();
+        resolveAudioDecode();
+    };
+    signal.addEventListener('abort', onAbort, { once: true });
+    try {
+        if (fromSeconds > 0) {
+            controller.seek(fromSeconds);
+        }
+        await (0, media_parser_1.parseMedia)({
+            acknowledgeRemotionLicense: true,
+            src,
+            controller,
+            onAudioTrack: ({ track }) => {
+                if (signal.aborted) {
+                    return null;
+                }
+                const audioDecoder = (0, create_audio_decoder_1.createAudioDecoder)({
+                    track,
+                    onFrame: (sample) => {
+                        if (signal.aborted) {
+                            sample.close();
+                            return;
+                        }
+                        const trimmedData = extractOverlappingAudioSamples({
+                            sample,
+                            fromSeconds,
+                            toSeconds,
+                            channelIndex,
+                            timescale: track.timescale,
+                        });
+                        if (trimmedData) {
+                            audioSamples.push(trimmedData);
+                        }
+                        sample.close();
+                    },
+                    onError(error) {
+                        resolveAudioDecode();
+                        throw error;
+                    },
+                });
+                return async (sample) => {
+                    if (signal.aborted) {
+                        audioDecoder.close();
+                        controller.abort();
+                        return;
+                    }
+                    if (!audioDecoder) {
+                        throw new Error('No audio decoder found');
+                    }
+                    const fromSecondsWithBuffer = fromSeconds === 0 ? fromSeconds : fromSeconds + BUFFER_IN_SECONDS;
+                    const toSecondsWithBuffer = toSeconds - BUFFER_IN_SECONDS;
+                    // Convert timestamp using the track's timescale
+                    const time = sample.timestamp / track.timescale;
+                    // Skip samples that are before our requested start time (with buffer)
+                    if (time < fromSecondsWithBuffer) {
+                        return;
+                    }
+                    // Stop immediately when we reach our target time (with buffer)
+                    if (time >= toSecondsWithBuffer) {
+                        // wait until decoder is done
+                        audioDecoder.flush().then(() => {
+                            audioDecoder.close();
+                            resolveAudioDecode();
+                        });
+                        controller.abort();
+                        return;
+                    }
+                    await audioDecoder.waitForQueueToBeLessThan(10);
+                    // we're waiting for the queue above anyway, enqueue in sync mode
+                    audioDecoder.decode(sample);
+                };
+            },
+        });
+    }
+    catch (err) {
+        const isAbortedByTimeCutoff = (0, media_parser_1.hasBeenAborted)(err);
+        // Don't throw if we stopped the parsing ourselves
+        if (!isAbortedByTimeCutoff && !signal.aborted) {
+            throw err;
+        }
+    }
+    finally {
+        // Clean up the event listener
+        signal.removeEventListener('abort', onAbort);
+    }
+    await audioDecodePromise;
+    // Simply concatenate all audio data since we've already trimmed each chunk
+    const totalSamples = audioSamples.reduce((sum, sample) => sum + sample.length, 0);
+    const result = new Float32Array(totalSamples);
+    let offset = 0;
+    for (const audioSample of audioSamples) {
+        result.set(audioSample, offset);
+        offset += audioSample.length;
+    }
+    return result;
+};
+exports.getPartialAudioData = getPartialAudioData;

package/dist/index.d.ts

@@ -23,6 +23,7 @@ export { getAvailableVideoCodecs } from './get-available-video-codecs';
 export type { ConvertMediaVideoCodec } from './get-available-video-codecs';
 export { getDefaultAudioCodec } from './get-default-audio-codec';
 export { getDefaultVideoCodec } from './get-default-video-codec';
+export { getPartialAudioData, GetPartialAudioDataProps, } from './get-partial-audio-data';
 export type { AudioOperation, ConvertMediaOnAudioTrackHandler, } from './on-audio-track-handler';
 export type { ConvertMediaOnVideoTrackHandler, VideoOperation, } from './on-video-track-handler';
 export type { ResizeOperation } from './resizing/mode';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WebCodecsInternals = exports.webcodecsController = exports.createVideoEncoder = exports.rotateAndResizeVideoFrame = exports.getDefaultVideoCodec = exports.getDefaultAudioCodec = exports.getAvailableVideoCodecs = exports.getAvailableContainers = exports.getAvailableAudioCodecs = exports.extractFrames = exports.defaultOnVideoTrackHandler = exports.defaultOnAudioTrackHandler = exports.createVideoDecoder = exports.createAudioDecoder = exports.convertMedia = exports.convertAudioData = exports.canReencodeVideoTrack = exports.canReencodeAudioTrack = exports.canCopyVideoTrack = exports.canCopyAudioTrack = exports.createAudioEncoder = void 0;
+exports.WebCodecsInternals = exports.webcodecsController = exports.createVideoEncoder = exports.rotateAndResizeVideoFrame = exports.getPartialAudioData = exports.getDefaultVideoCodec = exports.getDefaultAudioCodec = exports.getAvailableVideoCodecs = exports.getAvailableContainers = exports.getAvailableAudioCodecs = exports.extractFrames = exports.defaultOnVideoTrackHandler = exports.defaultOnAudioTrackHandler = exports.createVideoDecoder = exports.createAudioDecoder = exports.convertMedia = exports.convertAudioData = exports.canReencodeVideoTrack = exports.canReencodeAudioTrack = exports.canCopyVideoTrack = exports.canCopyAudioTrack = exports.createAudioEncoder = void 0;
 const rotate_and_resize_video_frame_1 = require("./rotate-and-resize-video-frame");
 const rotation_1 = require("./rotation");
 const set_remotion_imported_1 = require("./set-remotion-imported");
@@ -38,6 +38,8 @@ var get_default_audio_codec_1 = require("./get-default-audio-codec");
 Object.defineProperty(exports, "getDefaultAudioCodec", { enumerable: true, get: function () { return get_default_audio_codec_1.getDefaultAudioCodec; } });
 var get_default_video_codec_1 = require("./get-default-video-codec");
 Object.defineProperty(exports, "getDefaultVideoCodec", { enumerable: true, get: function () { return get_default_video_codec_1.getDefaultVideoCodec; } });
+var get_partial_audio_data_1 = require("./get-partial-audio-data");
+Object.defineProperty(exports, "getPartialAudioData", { enumerable: true, get: function () { return get_partial_audio_data_1.getPartialAudioData; } });
 var rotate_and_resize_video_frame_2 = require("./rotate-and-resize-video-frame");
 Object.defineProperty(exports, "rotateAndResizeVideoFrame", { enumerable: true, get: function () { return rotate_and_resize_video_frame_2.rotateAndResizeVideoFrame; } });
 var video_encoder_1 = require("./video-encoder");

package/dist/on-frame.d.ts

@@ -2,7 +2,7 @@ import type { MediaParserVideoTrack } from '@remotion/media-parser';
 import type { ConvertMediaOnVideoFrame } from './convert-media';
 import type { ConvertMediaVideoCodec } from './get-available-video-codecs';
 import type { ResizeOperation } from './resizing/mode';
-export declare const onFrame: ({ frame: unrotatedFrame, onVideoFrame, track, outputCodec, rotation, resizeOperation, }: {
+export declare const processFrame: ({ frame: unrotatedFrame, onVideoFrame, track, outputCodec, rotation, resizeOperation, }: {
     frame: VideoFrame;
     onVideoFrame: ConvertMediaOnVideoFrame | null;
     track: MediaParserVideoTrack;

package/dist/on-frame.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.onFrame = void 0;
+exports.processFrame = void 0;
 const browser_quirks_1 = require("./browser-quirks");
 const convert_to_correct_videoframe_1 = require("./convert-to-correct-videoframe");
 const rotate_and_resize_video_frame_1 = require("./rotate-and-resize-video-frame");
-const onFrame = async ({ frame: unrotatedFrame, onVideoFrame, track, outputCodec, rotation, resizeOperation, }) => {
+const processFrame = async ({ frame: unrotatedFrame, onVideoFrame, track, outputCodec, rotation, resizeOperation, }) => {
     const rotated = (0, rotate_and_resize_video_frame_1.rotateAndResizeVideoFrame)({
         rotation,
         frame: unrotatedFrame,
@@ -43,4 +43,4 @@ const onFrame = async ({ frame: unrotatedFrame, onVideoFrame, track, outputCodec
     }
     return fixedFrame;
 };
-exports.onFrame = onFrame;
+exports.processFrame = processFrame;

package/dist/reencode-video-track.js

@@ -16,7 +16,7 @@ const reencodeVideoTrack = async ({ videoOperation, rotate, track, logLevel, abo
     if (videoOperation.type !== 'reencode') {
         throw new Error(`Video track with ID ${track.trackId} could not be resolved with a valid operation. Received ${JSON.stringify(videoOperation)}, but must be either "copy", "reencode", "drop" or "fail"`);
     }
-    const rotation = (videoOperation.rotate ?? rotate) - track.rotation;
+    const rotation = (videoOperation.rotate ?? rotate) + track.rotation;
     const { height: newHeight, width: newWidth } = (0, rotation_1.calculateNewDimensionsFromRotateAndScale)({
         width: track.codedWidth,
         height: track.codedHeight,
@@ -88,7 +88,7 @@ const reencodeVideoTrack = async ({ videoOperation, rotate, track, logLevel, abo
         },
         onOutput: async (frame) => {
             await controller._internals._mediaParserController._internals.checkForAbortAndPause();
-            const processedFrame = await (0, on_frame_1.onFrame)({
+            const processedFrame = await (0, on_frame_1.processFrame)({
                 frame,
                 track,
                 onVideoFrame,

package/dist/rotate-and-resize-video-frame.js

@@ -8,14 +8,17 @@ const normalizeVideoRotation = (rotation) => {
 exports.normalizeVideoRotation = normalizeVideoRotation;
 const rotateAndResizeVideoFrame = ({ frame, rotation, needsToBeMultipleOfTwo = false, resizeOperation, }) => {
     const normalized = (0, exports.normalizeVideoRotation)(rotation);
+    // In Chrome, there is "rotation", but we cannot put frames with VideoEncoder if they have a rotation.
+    // We have to draw them to a canvas and make a new frame without video rotation.
+    const mustProcess = 'rotation' in frame && frame.rotation !== 0;
     // No resize, no rotation
-    if (normalized === 0 && resizeOperation === null) {
+    if (normalized === 0 && resizeOperation === null && !mustProcess) {
         return frame;
     }
     if (normalized % 90 !== 0) {
         throw new Error('Only 90 degree rotations are supported');
     }
-    const { height, width } = (0, rotation_1.calculateNewDimensionsFromRotateAndScale)({
+    const tentativeDimensions = (0, rotation_1.calculateNewDimensionsFromRotateAndScale)({
         height: frame.displayHeight,
         width: frame.displayWidth,
         rotation,
@@ -24,10 +27,21 @@ const rotateAndResizeVideoFrame = ({ frame, rotation, needsToBeMultipleOfTwo = f
     });
     // No rotation, and resize turned out to be same dimensions
     if (normalized === 0 &&
-        height === frame.displayHeight &&
-        width === frame.displayWidth) {
+        tentativeDimensions.height === frame.displayHeight &&
+        tentativeDimensions.width === frame.displayWidth &&
+        !mustProcess) {
         return frame;
     }
+    // @ts-expect-error
+    const frameRotation = frame.rotation ?? 0;
+    const canvasRotationToApply = (0, exports.normalizeVideoRotation)(normalized - frameRotation);
+    const { width, height } = (0, rotation_1.calculateNewDimensionsFromRotateAndScale)({
+        height: frame.displayHeight,
+        width: frame.displayWidth,
+        rotation: canvasRotationToApply,
+        needsToBeMultipleOfTwo,
+        resizeOperation,
+    });
     const canvas = new OffscreenCanvas(width, height);
     const ctx = canvas.getContext('2d');
     if (!ctx) {
@@ -35,9 +49,6 @@ const rotateAndResizeVideoFrame = ({ frame, rotation, needsToBeMultipleOfTwo = f
     }
     canvas.width = width;
     canvas.height = height;
-    // @ts-expect-error
-    const frameRotation = frame.rotation ?? 0;
-    const canvasRotationToApply = (0, exports.normalizeVideoRotation)(normalized + frameRotation);
     if (canvasRotationToApply === 90) {
         ctx.translate(width, 0);
     }
@@ -53,7 +64,7 @@ const rotateAndResizeVideoFrame = ({ frame, rotation, needsToBeMultipleOfTwo = f
     if (frame.displayHeight !== height || frame.displayWidth !== width) {
         const dimensionsAfterRotate = (0, rotation_1.calculateNewDimensionsFromRotate)({
             height: frame.displayHeight,
-            rotation,
+            rotation: canvasRotationToApply,
             width: frame.displayWidth,
         });
         ctx.scale(width / dimensionsAfterRotate.width, height / dimensionsAfterRotate.height);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/webcodecs",
-  "version": "4.0.327",
+  "version": "4.0.330",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "module": "dist/esm/index.mjs",
@@ -19,8 +19,8 @@
   "author": "Jonny Burger <jonny@remotion.dev>",
   "license": "Remotion License (See https://remotion.dev/docs/webcodecs#license)",
   "dependencies": {
-    "@remotion/media-parser": "4.0.327",
-    "@remotion/licensing": "4.0.327"
+    "@remotion/media-parser": "4.0.330",
+    "@remotion/licensing": "4.0.330"
   },
   "peerDependencies": {},
   "devDependencies": {
@@ -29,8 +29,8 @@
     "vite": "5.4.19",
     "@playwright/test": "1.51.1",
     "eslint": "9.19.0",
-    "@remotion/example-videos": "4.0.327",
-    "@remotion/eslint-config-internal": "4.0.327"
+    "@remotion/eslint-config-internal": "4.0.330",
+    "@remotion/example-videos": "4.0.330"
   },
   "keywords": [],
   "publishConfig": {