@remotion/media 4.0.466 → 4.0.468

package/dist/audio/audio-for-preview.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { LogLevel, LoopVolumeCurveBehavior, VolumeProp } from 'remotion';
 import { type MediaOnError } from '../on-error';
+import type { MediaRequestInit } from '../request-init';
 import type { FallbackHtml5AudioProps } from './props';
 type InnerAudioProps = {
     readonly loop?: boolean;
@@ -27,6 +28,7 @@ type InnerAudioProps = {
     readonly fallbackHtml5AudioProps?: FallbackHtml5AudioProps;
     readonly onError?: MediaOnError;
     readonly credentials?: RequestCredentials;
+    readonly requestInit?: MediaRequestInit;
     readonly setMediaDurationInSeconds?: (durationInSeconds: number) => void;
 };
 export declare const AudioForPreview: React.FC<InnerAudioProps>;

package/dist/audio/audio.d.ts

@@ -20,4 +20,5 @@ export declare const Audio: React.ComponentType<{
     delayRenderTimeoutInMilliseconds?: number | undefined;
     onError?: import("../on-error").MediaOnError | undefined;
     credentials?: RequestCredentials | undefined;
+    requestInit?: import("..").MediaRequestInit | undefined;
 } & Pick<import("remotion").SequenceProps, "durationInFrames" | "from" | "hidden" | "name" | "showInTimeline">>;

package/dist/audio/get-scheduled-time.d.ts

@@ -10,8 +10,9 @@ export declare const getDurationOfNode: ({ bufferDuration, loopSegmentMediaEndTi
     offset: number;
     originalUnloopedMediaTimestamp: number;
 }) => number;
-export declare const getOffset: ({ mediaTimestamp, targetTime, sequenceStartTime, }: {
+export declare const getTrimStartForAudioNode: ({ mediaTimestamp, targetTime, sequenceStartTime, combinedPlaybackRate, }: {
     mediaTimestamp: number;
     targetTime: number;
     sequenceStartTime: number;
+    combinedPlaybackRate: number;
 }) => number;

package/dist/audio/props.d.ts

@@ -1,5 +1,6 @@
 import type { LogLevel, LoopVolumeCurveBehavior, SequenceProps, VolumeProp } from 'remotion';
 import type { MediaOnError } from '../on-error';
+import type { MediaRequestInit } from '../request-init';
 export type FallbackHtml5AudioProps = {
     crossOrigin?: '' | 'anonymous' | 'use-credentials' | undefined;
     onError?: (err: Error) => void;
@@ -31,5 +32,10 @@ export type AudioProps = {
     delayRenderRetries?: number;
     delayRenderTimeoutInMilliseconds?: number;
     onError?: MediaOnError;
+    /**
+     * @deprecated Use `requestInit={{credentials: ...}}` instead. If both are
+     * passed, `requestInit.credentials` wins over this prop.
+     */
     credentials?: RequestCredentials;
+    requestInit?: MediaRequestInit;
 } & Pick<SequenceProps, 'from' | 'durationInFrames' | 'name' | 'showInTimeline' | 'hidden'>;

package/dist/audio-extraction/extract-audio.d.ts

@@ -1,5 +1,6 @@
 import { type LogLevel } from 'remotion';
 import type { PcmS16AudioData } from '../convert-audiodata/convert-audiodata';
+import type { MediaRequestInit } from '../request-init';
 type ExtractAudioParams = {
     src: string;
     timeInSeconds: number;
@@ -13,6 +14,7 @@ type ExtractAudioParams = {
     fps: number;
     maxCacheSize: number;
     credentials: RequestCredentials | undefined;
+    requestInit?: MediaRequestInit;
 };
 export declare const extractAudio: (params: ExtractAudioParams) => Promise<"cannot-decode" | "network-error" | "unknown-container-format" | {
     data: PcmS16AudioData | null;

package/dist/audio-iterator-manager.d.ts

@@ -4,7 +4,7 @@ import type { DelayPlaybackIfNotPremounting } from './delay-playback-if-not-prem
 import type { BufferWithMediaTimestamp } from './make-iterator-with-priming';
 import type { Nonce } from './nonce-manager';
 import type { SharedAudioContextForMediaPlayer } from './shared-audio-context-for-media-player';
-type ScheduleAudioNode = (node: AudioBufferSourceNode, mediaTimestamp: number, originalUnloopedMediaTimestamp: number, currentTime: number) => ScheduleAudioNodeResult;
+type ScheduleAudioNode = (node: AudioBufferSourceNode, mediaTimestamp: number, originalUnloopedMediaTimestamp: number) => ScheduleAudioNodeResult;
 export declare const audioIteratorManager: ({ audioTrack, delayPlaybackHandleIfNotPremounting, sharedAudioContext, getSequenceEndTimestamp, getSequenceDurationInSeconds, getMediaEndTimestamp, getStartTime, initialMuted, drawDebugOverlay, initialPlaybackRate, initialTrimBefore, initialTrimAfter, initialSequenceOffset, initialSequenceDurationInFrames, initialLoop, initialFps, }: {
     audioTrack: InputAudioTrack;
     delayPlaybackHandleIfNotPremounting: () => DelayPlaybackIfNotPremounting;
@@ -71,14 +71,13 @@ export declare const audioIteratorManager: ({ audioTrack, delayPlaybackHandleIfN
     getTotalAudioScheduledInSeconds: () => number;
     setMuted: (newMuted: boolean) => void;
     setVolume: (volume: number) => void;
-    scheduleAudioChunk: ({ buffer, mediaTimestamp, originalUnloopedMediaTimestamp, playbackRate, scheduleAudioNode, logLevel, currentTime, }: {
+    scheduleAudioChunk: ({ buffer, mediaTimestamp, originalUnloopedMediaTimestamp, playbackRate, scheduleAudioNode, logLevel, }: {
         buffer: AudioBuffer;
         mediaTimestamp: number;
         playbackRate: number;
         scheduleAudioNode: ScheduleAudioNode;
         logLevel: "error" | "info" | "trace" | "verbose" | "warn";
         originalUnloopedMediaTimestamp: number;
-        currentTime: number;
     }) => void;
     waitForNScheduledNodes: (n: number) => Promise<void>;
 };

package/dist/debug-overlay/preview-overlay.d.ts

@@ -11,7 +11,7 @@ export declare const drawPreviewOverlay: ({ context, audioTime, audioContextStat
             startFromSecond: number;
             nonce: import("../nonce-manager").Nonce;
             playbackRate: number;
-            scheduleAudioNode: (node: AudioBufferSourceNode, mediaTimestamp: number, originalUnloopedMediaTimestamp: number, currentTime: number) => import("remotion").ScheduleAudioNodeResult;
+            scheduleAudioNode: (node: AudioBufferSourceNode, mediaTimestamp: number, originalUnloopedMediaTimestamp: number) => import("remotion").ScheduleAudioNodeResult;
             getTargetTime: (mediaTimestamp: number, currentTime: number) => number | null;
             logLevel: "error" | "info" | "trace" | "verbose" | "warn";
             loop: boolean;
@@ -40,7 +40,7 @@ export declare const drawPreviewOverlay: ({ context, audioTime, audioContextStat
             newTime: number;
             nonce: import("../nonce-manager").Nonce;
             playbackRate: number;
-            scheduleAudioNode: (node: AudioBufferSourceNode, mediaTimestamp: number, originalUnloopedMediaTimestamp: number, currentTime: number) => import("remotion").ScheduleAudioNodeResult;
+            scheduleAudioNode: (node: AudioBufferSourceNode, mediaTimestamp: number, originalUnloopedMediaTimestamp: number) => import("remotion").ScheduleAudioNodeResult;
             getTargetTime: (mediaTimestamp: number, currentTime: number) => number | null;
             logLevel: "error" | "info" | "trace" | "verbose" | "warn";
             loop: boolean;
@@ -55,14 +55,13 @@ export declare const drawPreviewOverlay: ({ context, audioTime, audioContextStat
         getTotalAudioScheduledInSeconds: () => number;
         setMuted: (newMuted: boolean) => void;
         setVolume: (volume: number) => void;
-        scheduleAudioChunk: ({ buffer, mediaTimestamp, originalUnloopedMediaTimestamp, playbackRate, scheduleAudioNode, logLevel, currentTime, }: {
+        scheduleAudioChunk: ({ buffer, mediaTimestamp, originalUnloopedMediaTimestamp, playbackRate, scheduleAudioNode, logLevel, }: {
             buffer: AudioBuffer;
             mediaTimestamp: number;
             playbackRate: number;
-            scheduleAudioNode: (node: AudioBufferSourceNode, mediaTimestamp: number, originalUnloopedMediaTimestamp: number, currentTime: number) => import("remotion").ScheduleAudioNodeResult;
+            scheduleAudioNode: (node: AudioBufferSourceNode, mediaTimestamp: number, originalUnloopedMediaTimestamp: number) => import("remotion").ScheduleAudioNodeResult;
             logLevel: "error" | "info" | "trace" | "verbose" | "warn";
             originalUnloopedMediaTimestamp: number;
-            currentTime: number;
         }) => void;
         waitForNScheduledNodes: (n: number) => Promise<void>;
     } | null;

package/dist/esm/index.mjs

@@ -324,16 +324,16 @@ var getDurationOfNode = ({
   const duration = needsTrimEnd ? durationMinusOffset - Math.max(0, originalUnloopedMediaEndTime - loopSegmentMediaEndTimestamp) : durationMinusOffset;
   return duration;
 };
-var getOffset = ({
+var getTrimStartForAudioNode = ({
   mediaTimestamp,
   targetTime,
-  sequenceStartTime
+  sequenceStartTime,
+  combinedPlaybackRate
 }) => {
   const needsTrimStart = mediaTimestamp < sequenceStartTime;
   const offsetBecauseOfTrim = needsTrimStart ? sequenceStartTime - mediaTimestamp : 0;
-  const offsetBecauseOfTooLate = targetTime < 0 ? -targetTime : 0;
-  const offset = offsetBecauseOfTrim + offsetBecauseOfTooLate;
-  return offset;
+  const offsetBecauseOfTooLate = targetTime < 0 ? -targetTime * combinedPlaybackRate : 0;
+  return offsetBecauseOfTrim + offsetBecauseOfTooLate;
 };
 
 // src/audio/sort-by-priority.ts
@@ -475,8 +475,7 @@ var audioIteratorManager = ({
     originalUnloopedMediaTimestamp,
     playbackRate,
     scheduleAudioNode,
-    logLevel,
-    currentTime
+    logLevel
   }) => {
     if (!audioBufferIterator) {
       throw new Error("Audio buffer iterator not found");
@@ -488,7 +487,7 @@ var audioIteratorManager = ({
     node.buffer = buffer;
     node.playbackRate.value = playbackRate;
     node.connect(gainNode);
-    const started = scheduleAudioNode(node, mediaTimestamp, originalUnloopedMediaTimestamp, currentTime);
+    const started = scheduleAudioNode(node, mediaTimestamp, originalUnloopedMediaTimestamp);
     if (started.type === "not-started") {
       Internals3.Log.verbose({ logLevel, tag: "audio-scheduling" }, "not started, disconnected: %s %s", mediaTimestamp.toFixed(3), buffer.duration.toFixed(3));
       node.disconnect();
@@ -506,8 +505,7 @@ var audioIteratorManager = ({
     buffer,
     playbackRate,
     scheduleAudioNode,
-    logLevel,
-    currentTime
+    logLevel
   }) => {
     if (muted) {
       return;
@@ -529,8 +527,7 @@ var audioIteratorManager = ({
       playbackRate,
       scheduleAudioNode,
       logLevel,
-      originalUnloopedMediaTimestamp: buffer.buffer.timestamp,
-      currentTime
+      originalUnloopedMediaTimestamp: buffer.buffer.timestamp
     });
     drawDebugOverlay();
   };
@@ -583,8 +580,7 @@ var audioIteratorManager = ({
           buffer: result.value,
           playbackRate,
           scheduleAudioNode,
-          logLevel,
-          currentTime
+          logLevel
         });
         proceedScheduling({
           iterator,
@@ -931,6 +927,74 @@ class PremountAwareDelayPlayback {
   }
 }
 
+// src/request-init.ts
+var normalizeMediaHeaders = (headers) => {
+  if (!headers) {
+    return;
+  }
+  const entries = [];
+  if (headers instanceof Headers) {
+    headers.forEach((value, key) => {
+      entries.push([key.toLowerCase(), value]);
+    });
+  } else if (Array.isArray(headers)) {
+    for (const [key, value] of headers) {
+      entries.push([key.toLowerCase(), value]);
+    }
+  } else {
+    for (const [key, value] of Object.entries(headers)) {
+      entries.push([key.toLowerCase(), value]);
+    }
+  }
+  entries.sort(([a], [b]) => a < b ? -1 : a > b ? 1 : 0);
+  return entries;
+};
+var normalizeMediaRequestInit = (requestInit) => {
+  if (!requestInit) {
+    return;
+  }
+  const headers = normalizeMediaHeaders(requestInit.headers);
+  const normalized = {
+    ...requestInit.cache === undefined ? null : { cache: requestInit.cache },
+    ...requestInit.credentials === undefined ? null : { credentials: requestInit.credentials },
+    ...headers === undefined ? null : { headers },
+    ...requestInit.integrity === undefined ? null : { integrity: requestInit.integrity },
+    ...requestInit.mode === undefined ? null : { mode: requestInit.mode },
+    ...requestInit.redirect === undefined ? null : { redirect: requestInit.redirect },
+    ...requestInit.referrer === undefined ? null : { referrer: requestInit.referrer },
+    ...requestInit.referrerPolicy === undefined ? null : { referrerPolicy: requestInit.referrerPolicy }
+  };
+  return Object.keys(normalized).length === 0 ? undefined : normalized;
+};
+var getMediaRequestInitFingerprint = (requestInit) => {
+  const normalized = normalizeMediaRequestInit(requestInit);
+  if (!normalized) {
+    return null;
+  }
+  return [
+    normalized.cache ?? null,
+    normalized.credentials ?? null,
+    normalized.integrity ?? null,
+    normalized.mode ?? null,
+    normalized.redirect ?? null,
+    normalized.referrer ?? null,
+    normalized.referrerPolicy ?? null,
+    normalized.headers ?? null
+  ];
+};
+var resolveRequestInit = ({
+  credentials,
+  requestInit
+}) => {
+  if (credentials === undefined) {
+    return normalizeMediaRequestInit(requestInit);
+  }
+  return normalizeMediaRequestInit({
+    credentials,
+    ...requestInit
+  });
+};
+
 // src/video-iterator-manager.ts
 import { CanvasSink } from "mediabunny";
 import { Internals as Internals4 } from "remotion";
@@ -1388,6 +1452,7 @@ class MediaPlayer {
     playing,
     sequenceOffset,
     credentials,
+    requestInit,
     tagType,
     getEffects,
     getEffectChainState
@@ -1414,9 +1479,10 @@ class MediaPlayer {
     this.onVideoFrameCallback = onVideoFrameCallback;
     this.playing = playing;
     this.sequenceOffset = sequenceOffset;
+    const resolvedRequestInit = resolveRequestInit({ credentials, requestInit });
     this.input = new Input({
-      source: new UrlSource(this.src, credentials ? {
-        requestInit: { credentials }
+      source: new UrlSource(this.src, resolvedRequestInit ? {
+        requestInit: resolvedRequestInit
       } : undefined),
       formats: ALL_FORMATS
     });
@@ -1789,23 +1855,25 @@ class MediaPlayer {
     const targetTime = (mediaTimestamp - localTime) / (this.playbackRate * this.globalPlaybackRate);
     return targetTime;
   };
-  scheduleAudioNode = (node, mediaTimestamp, originalUnloopedMediaTimestamp, currentTime) => {
+  scheduleAudioNode = (node, mediaTimestamp, originalUnloopedMediaTimestamp) => {
     if (!this.sharedAudioContext) {
       throw new Error("Shared audio context not found");
     }
-    const targetTime = this.getTargetTime(mediaTimestamp, currentTime);
+    const targetTime = this.getTargetTime(mediaTimestamp, this.sharedAudioContext.audioContext.currentTime);
+    const combinedPlaybackRate = this.playbackRate * this.globalPlaybackRate;
     if (targetTime === null) {
       return {
         type: "not-started",
-        reason: "no target for" + mediaTimestamp.toFixed(3) + "," + currentTime.toFixed(3)
+        reason: "no target for" + mediaTimestamp.toFixed(3) + "," + this.sharedAudioContext.audioContext.currentTime.toFixed(3)
       };
     }
     const sequenceStartTime = this.getStartTime();
     const loopSegmentMediaEndTimestamp = this.getLoopSegmentMediaEndTimestamp();
-    const offset = getOffset({
+    const offset = getTrimStartForAudioNode({
       mediaTimestamp,
       targetTime,
-      sequenceStartTime
+      sequenceStartTime,
+      combinedPlaybackRate
     });
     const duration = getDurationOfNode({
       bufferDuration: node.buffer?.duration ?? 0,
@@ -1816,13 +1884,12 @@ class MediaPlayer {
     const scheduledTime = getScheduledTime({
       mediaTimestamp,
       targetTime,
-      currentTime,
-      sequenceStartTime
+      sequenceStartTime,
+      currentTime: this.sharedAudioContext.audioContext.currentTime
     });
     return this.sharedAudioContext.scheduleAudioNode({
       node,
       mediaTimestamp,
-      currentTime,
       scheduledTime,
       duration,
       offset,
@@ -2061,6 +2128,7 @@ var AudioForPreviewAssertedShowing = ({
   fallbackHtml5AudioProps,
   onError,
   credentials,
+  requestInit,
   setMediaDurationInSeconds
 }) => {
   const videoConfig = useUnsafeVideoConfig();
@@ -2068,6 +2136,7 @@ var AudioForPreviewAssertedShowing = ({
   const mediaPlayerRef = useRef(null);
   const initialTrimBeforeRef = useRef(trimBefore);
   const initialTrimAfterRef = useRef(trimAfter);
+  const [initialRequestInit] = useState(requestInit);
   const [mediaPlayerReady, setMediaPlayerReady] = useState(false);
   const [shouldFallbackToNativeAudio, setShouldFallbackToNativeAudio] = useState(false);
   const [playing] = Timeline.usePlayingState();
@@ -2177,6 +2246,7 @@ var AudioForPreviewAssertedShowing = ({
         playing: initialPlaying.current,
         sequenceOffset: initialSequenceOffset.current,
         credentials,
+        requestInit: initialRequestInit,
         tagType: "audio",
         getEffects: () => [],
         getEffectChainState: () => null
@@ -2271,6 +2341,7 @@ var AudioForPreviewAssertedShowing = ({
     buffer,
     onError,
     credentials,
+    initialRequestInit,
     setMediaDurationInSeconds
   ]);
   if (shouldFallbackToNativeAudio && !disallowFallbackToHtml5Audio) {
@@ -2314,6 +2385,7 @@ var AudioForPreview = ({
   fallbackHtml5AudioProps,
   onError,
   credentials,
+  requestInit,
   setMediaDurationInSeconds
 }) => {
   const preloadedSrc = usePreload(src);
@@ -2366,6 +2438,7 @@ var AudioForPreview = ({
     toneFrequency,
     onError,
     credentials,
+    requestInit,
     fallbackHtml5AudioProps,
     setMediaDurationInSeconds
   });
@@ -3540,12 +3613,13 @@ var getFormatOrNullOrNetworkError = async (input) => {
     return null;
   }
 };
-var getSinks = async (src, credentials) => {
+var getSinks = async (src, credentials, requestInit) => {
+  const resolvedRequestInit = resolveRequestInit({ credentials, requestInit });
   const input = new Input2({
     formats: ALL_FORMATS2,
     source: new UrlSource2(src, {
       getRetryDelay,
-      ...credentials ? { requestInit: { credentials } } : undefined
+      ...resolvedRequestInit ? { requestInit: resolvedRequestInit } : undefined
     })
   });
   const format = await getFormatOrNullOrNetworkError(input);
@@ -3641,15 +3715,29 @@ var getSinks = async (src, credentials) => {
 
 // src/get-sink.ts
 var sinkPromises = {};
-var getSink = (src, logLevel, credentials) => {
-  const cacheKey = credentials ? `${src}::${credentials}` : src;
+var getSinkCacheKey = ({
+  src,
+  credentials,
+  requestInit
+}) => JSON.stringify([
+  src,
+  credentials,
+  getMediaRequestInitFingerprint(requestInit)
+]);
+var getSink = (src, logLevel, credentials, requestInit) => {
+  const normalizedRequestInit = normalizeMediaRequestInit(requestInit);
+  const cacheKey = getSinkCacheKey({
+    src,
+    credentials,
+    requestInit: normalizedRequestInit
+  });
   let promise = sinkPromises[cacheKey];
   if (!promise) {
     Internals13.Log.verbose({
       logLevel,
       tag: "@remotion/media"
     }, `Sink for ${src} was not found, creating new sink`);
-    promise = getSinks(src, credentials);
+    promise = getSinks(src, credentials, normalizedRequestInit);
     sinkPromises[cacheKey] = promise;
   }
   return promise;
@@ -3668,9 +3756,10 @@ var extractAudioInternal = async ({
   trimAfter,
   fps,
   maxCacheSize,
-  credentials
+  credentials,
+  requestInit
 }) => {
-  const { getAudio, actualMatroskaTimestamps, isMatroska, getDuration } = await getSink(src, logLevel, credentials);
+  const { getAudio, actualMatroskaTimestamps, isMatroska, getDuration } = await getSink(src, logLevel, credentials, requestInit);
   let mediaDurationInSeconds = null;
   if (loop) {
     mediaDurationInSeconds = await getDuration();
@@ -3797,9 +3886,10 @@ var extractFrameInternal = async ({
   playbackRate,
   fps,
   maxCacheSize,
-  credentials
+  credentials,
+  requestInit
 }) => {
-  const sink = await getSink(src, logLevel, credentials);
+  const sink = await getSink(src, logLevel, credentials, requestInit);
   const [video, mediaDurationInSecondsRaw] = await Promise.all([
     sink.getVideo(),
     loop ? sink.getDuration() : Promise.resolve(null)
@@ -3926,7 +4016,8 @@ var extractFrameAndAudio = async ({
   trimBefore,
   fps,
   maxCacheSize,
-  credentials
+  credentials,
+  requestInit
 }) => {
   try {
     const [video, audio] = await Promise.all([
@@ -3940,7 +4031,8 @@ var extractFrameAndAudio = async ({
         trimBefore,
         fps,
         maxCacheSize,
-        credentials
+        credentials,
+        requestInit
       }) : null,
       includeAudio ? extractAudio({
         src,
@@ -3954,7 +4046,8 @@ var extractFrameAndAudio = async ({
         fps,
         trimBefore,
         maxCacheSize,
-        credentials
+        credentials,
+        requestInit
       }) : null
     ]);
     if (video?.type === "cannot-decode") {
@@ -4038,7 +4131,8 @@ var addBroadcastChannelListener = () => {
           trimBefore: data.trimBefore,
           fps: data.fps,
           maxCacheSize: data.maxCacheSize,
-          credentials: data.credentials
+          credentials: data.credentials,
+          requestInit: data.requestInit
         });
         if (result.type === "cannot-decode") {
           const cannotDecodeResponse = {
@@ -4136,7 +4230,8 @@ var extractFrameViaBroadcastChannel = async ({
   trimBefore,
   fps,
   maxCacheSize,
-  credentials
+  credentials,
+  requestInit
 }) => {
   if (isClientSideRendering || window.remotion_isMainTab) {
     return extractFrameAndAudio({
@@ -4153,7 +4248,8 @@ var extractFrameViaBroadcastChannel = async ({
       trimBefore,
       fps,
       maxCacheSize,
-      credentials
+      credentials,
+      requestInit
     });
   }
   await waitForMainTabToBeReady(window.remotion_broadcastChannel);
@@ -4231,7 +4327,8 @@ var extractFrameViaBroadcastChannel = async ({
     trimBefore,
     fps,
     maxCacheSize,
-    credentials
+    credentials,
+    requestInit: normalizeMediaRequestInit(requestInit)
   };
   window.remotion_broadcastChannel.postMessage(request);
   let timeoutId;
@@ -4270,7 +4367,8 @@ var AudioForRendering = ({
   trimAfter,
   trimBefore,
   onError,
-  credentials
+  credentials,
+  requestInit
 }) => {
   const defaultLogLevel = Internals15.useLogLevel();
   const logLevel = overriddenLogLevel ?? defaultLogLevel;
@@ -4289,6 +4387,7 @@ var AudioForRendering = ({
   const { fps } = videoConfig;
   const { delayRender, continueRender } = useDelayRender();
   const [replaceWithHtml5Audio, setReplaceWithHtml5Audio] = useState2(false);
+  const [initialRequestInit] = useState2(requestInit);
   const sequenceContext = useContext3(Internals15.SequenceContext);
   const id = useMemo2(() => `media-audio-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
@@ -4335,7 +4434,8 @@ var AudioForRendering = ({
       trimBefore,
       fps,
       maxCacheSize,
-      credentials
+      credentials,
+      requestInit: initialRequestInit
     }).then((result) => {
       const handleError = (error, clientSideError, fallbackMessage) => {
         const [action, errorToUse] = callOnErrorAndResolve({
@@ -4430,7 +4530,8 @@ var AudioForRendering = ({
     maxCacheSize,
     audioEnabled,
     onError,
-    credentials
+    credentials,
+    initialRequestInit
   ]);
   if (replaceWithHtml5Audio) {
     return /* @__PURE__ */ jsx2(Html5Audio, {
@@ -4665,6 +4766,7 @@ var VideoForPreviewAssertedShowing = ({
   headless,
   onError,
   credentials,
+  requestInit,
   objectFit: objectFitProp,
   _experimentalInitiallyDrawCachedFrame,
   effects,
@@ -4678,6 +4780,7 @@ var VideoForPreviewAssertedShowing = ({
   const initialTrimBeforeRef = useRef2(trimBefore);
   const initialTrimAfterRef = useRef2(trimAfter);
   const initialOnVideoFrameRef = useRef2(onVideoFrame);
+  const [initialRequestInit] = useState4(requestInit);
   const [mediaPlayerReady, setMediaPlayerReady] = useState4(false);
   const [shouldFallbackToNativeVideo, setShouldFallbackToNativeVideo] = useState4(false);
   const [playing] = Timeline2.usePlayingState();
@@ -4804,6 +4907,7 @@ var VideoForPreviewAssertedShowing = ({
         playing: initialPlaying.current,
         sequenceOffset: initialSequenceOffset.current,
         credentials,
+        requestInit: initialRequestInit,
         tagType: "video",
         getEffects: () => effectsRef.current,
         getEffectChainState: (width, height) => effectChainStateRef.current?.get(width, height)
@@ -4898,6 +5002,7 @@ var VideoForPreviewAssertedShowing = ({
     videoConfig.fps,
     onError,
     credentials,
+    initialRequestInit,
     setMediaDurationInSeconds
   ]);
   warnAboutObjectFitInStyleOrClassName({ style, className, logLevel });
@@ -5055,6 +5160,7 @@ var VideoForRendering = ({
   headless,
   onError,
   credentials,
+  requestInit,
   objectFit: objectFitProp
 }) => {
   if (!src) {
@@ -5076,6 +5182,7 @@ var VideoForRendering = ({
   const { delayRender, continueRender, cancelRender: cancelRender3 } = useDelayRender2();
   const canvasRef = useRef3(null);
   const [replaceWithOffthreadVideo, setReplaceWithOffthreadVideo] = useState5(false);
+  const [initialRequestInit] = useState5(requestInit);
   const audioEnabled = Internals19.useAudioEnabled();
   const videoEnabled = Internals19.useVideoEnabled();
   const maxCacheSize = useMaxMediaCacheSize(logLevel);
@@ -5123,7 +5230,8 @@ var VideoForRendering = ({
       trimBefore: trimBeforeValue,
       fps,
       maxCacheSize,
-      credentials
+      credentials,
+      requestInit: initialRequestInit
     }).then((result) => {
       const handleError = (err, clientSideError, fallbackMessage, mediaDurationInSeconds) => {
         if (environment.isClientSideRendering) {
@@ -5256,7 +5364,8 @@ var VideoForRendering = ({
     cancelRender3,
     headless,
     onError,
-    credentials
+    credentials,
+    initialRequestInit
   ]);
   warnAboutObjectFitInStyleOrClassName({ style, className, logLevel });
   const classNameValue = useMemo5(() => {
@@ -5383,6 +5492,7 @@ var InnerVideo = ({
   headless,
   onError,
   credentials,
+  requestInit,
   _experimentalControls: controls,
   objectFit,
   _experimentalInitiallyDrawCachedFrame,
@@ -5430,6 +5540,7 @@ var InnerVideo = ({
       headless,
       onError,
       credentials,
+      requestInit,
       objectFit
     });
   }
@@ -5456,6 +5567,7 @@ var InnerVideo = ({
     headless: headless ?? false,
     onError,
     credentials,
+    requestInit,
     controls,
     objectFit,
     effects,
@@ -5488,6 +5600,7 @@ var VideoInner = ({
   headless,
   onError,
   credentials,
+  requestInit,
   _experimentalControls: controls,
   objectFit,
   _experimentalInitiallyDrawCachedFrame,
@@ -5582,6 +5695,7 @@ var VideoInner = ({
       headless: headless ?? false,
       onError,
       credentials,
+      requestInit,
       _experimentalControls: controls,
       objectFit: objectFit ?? "contain",
       _experimentalInitiallyDrawCachedFrame: _experimentalInitiallyDrawCachedFrame ?? false,

package/dist/extract-frame-and-audio.d.ts

@@ -1,5 +1,6 @@
+import type { MediaRequestInit } from './request-init';
 import type { ExtractFrameViaBroadcastChannelResult } from './video-extraction/extract-frame-via-broadcast-channel';
-export declare const extractFrameAndAudio: ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, loop, audioStreamIndex, trimAfter, trimBefore, fps, maxCacheSize, credentials, }: {
+export declare const extractFrameAndAudio: ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, loop, audioStreamIndex, trimAfter, trimBefore, fps, maxCacheSize, credentials, requestInit, }: {
     src: string;
     timeInSeconds: number;
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
@@ -14,4 +15,5 @@ export declare const extractFrameAndAudio: ({ src, timeInSeconds, logLevel, dura
     fps: number;
     maxCacheSize: number;
     credentials: RequestCredentials | undefined;
+    requestInit?: MediaRequestInit | undefined;
 }) => Promise<ExtractFrameViaBroadcastChannelResult>;

package/dist/get-sink.d.ts

@@ -1,6 +1,12 @@
+import { type MediaRequestInit } from './request-init';
 import type { GetSink } from './video-extraction/get-frames-since-keyframe';
 export declare const sinkPromises: Record<string, Promise<GetSink>>;
-export declare const getSink: (src: string, logLevel: "error" | "info" | "trace" | "verbose" | "warn", credentials: RequestCredentials | undefined) => Promise<{
+export declare const getSinkCacheKey: ({ src, credentials, requestInit, }: {
+    src: string;
+    credentials: RequestCredentials | undefined;
+    requestInit: MediaRequestInit | undefined;
+}) => string;
+export declare const getSink: (src: string, logLevel: "error" | "info" | "trace" | "verbose" | "warn", credentials: RequestCredentials | undefined, requestInit: MediaRequestInit | undefined) => Promise<{
     getVideo: () => Promise<import("./video-extraction/get-frames-since-keyframe").VideoSinkResult>;
     getAudio: (index: number | null) => Promise<import("./video-extraction/get-frames-since-keyframe").AudioSinkResult>;
     actualMatroskaTimestamps: {

package/dist/index.d.ts

@@ -24,6 +24,7 @@ export declare const experimental_Audio: import("react").ComponentType<{
     delayRenderTimeoutInMilliseconds?: number | undefined;
     onError?: import("./on-error").MediaOnError | undefined;
     credentials?: RequestCredentials | undefined;
+    requestInit?: import("./request-init").MediaRequestInit | undefined;
 } & Pick<import("remotion").SequenceProps, "durationInFrames" | "from" | "hidden" | "name" | "showInTimeline">>;
 /**
  * @deprecated Now just `Video`
@@ -57,6 +58,7 @@ export declare const experimental_Video: import("react").ComponentType<{
     headless: boolean;
     onError: import("./on-error").MediaOnError | undefined;
     credentials: RequestCredentials | undefined;
+    requestInit: import("./request-init").MediaRequestInit | undefined;
     objectFit: import(".").VideoObjectFit;
     _experimentalInitiallyDrawCachedFrame: boolean;
     effects: import("remotion").EffectsProp;
@@ -64,6 +66,7 @@ export declare const experimental_Video: import("react").ComponentType<{
 export { AudioForPreview } from './audio/audio-for-preview';
 export { AudioProps, FallbackHtml5AudioProps } from './audio/props';
 export { MediaErrorAction } from './on-error';
+export type { MediaRequestInit } from './request-init';
 export { FallbackOffthreadVideoProps, VideoObjectFit, VideoProps, } from './video/props';
 export { getTargetSampleRate } from './convert-audiodata/resample-audiodata';
 export { Audio, Video };

package/dist/media-player.d.ts

@@ -1,6 +1,6 @@
-import type { EffectDefinitionAndStack, LogLevel, useBufferState } from 'remotion';
-import type { EffectChainState } from 'remotion';
+import type { EffectChainState, EffectDefinitionAndStack, LogLevel, useBufferState } from 'remotion';
 import { type AudioIteratorManager } from './audio-iterator-manager';
+import type { MediaRequestInit } from './request-init';
 import type { SharedAudioContextForMediaPlayer } from './shared-audio-context-for-media-player';
 import type { VideoIteratorManager } from './video-iterator-manager';
 export type MediaPlayerInitResult = {
@@ -45,7 +45,7 @@ export declare class MediaPlayer {
     private initializationPromise;
     private premountAwareDelayPlayback;
     private seekPromiseChain;
-    constructor({ canvas, src, logLevel, sharedAudioContext, loop, trimBefore, trimAfter, playbackRate, globalPlaybackRate, audioStreamIndex, fps, debugOverlay, bufferState, isPremounting, isPostmounting, durationInFrames, onVideoFrameCallback, playing, sequenceOffset, credentials, tagType, getEffects, getEffectChainState }: {
+    constructor({ canvas, src, logLevel, sharedAudioContext, loop, trimBefore, trimAfter, playbackRate, globalPlaybackRate, audioStreamIndex, fps, debugOverlay, bufferState, isPremounting, isPostmounting, durationInFrames, onVideoFrameCallback, playing, sequenceOffset, credentials, requestInit, tagType, getEffects, getEffectChainState }: {
         canvas: HTMLCanvasElement | OffscreenCanvas | null;
         src: string;
         logLevel: LogLevel;
@@ -66,6 +66,7 @@ export declare class MediaPlayer {
         playing: boolean;
         sequenceOffset: number;
         credentials: RequestCredentials | undefined;
+        requestInit: MediaRequestInit | undefined;
         tagType: 'audio' | 'video';
         getEffects: () => EffectDefinitionAndStack<unknown>[];
         getEffectChainState: (width: number, height: number) => EffectChainState | null;

package/dist/request-init.d.ts

@@ -0,0 +1,19 @@
+export type MediaHeadersInit = Record<string, string> | [string, string][];
+export type MediaRequestInit = {
+    cache?: RequestCache;
+    credentials?: RequestCredentials;
+    headers?: MediaHeadersInit;
+    integrity?: string;
+    mode?: RequestMode;
+    redirect?: RequestRedirect;
+    referrer?: string;
+    referrerPolicy?: ReferrerPolicy;
+};
+export type MediaRequestInitOptions = {
+    credentials: RequestCredentials | undefined;
+    requestInit: MediaRequestInit | undefined;
+};
+export declare const normalizeMediaHeaders: (headers: HeadersInit | undefined) => [string, string][] | undefined;
+export declare const normalizeMediaRequestInit: (requestInit: MediaRequestInit | undefined) => MediaRequestInit | undefined;
+export declare const getMediaRequestInitFingerprint: (requestInit: MediaRequestInit | undefined) => (string | [string, string][] | Record<string, string> | null)[] | null;
+export declare const resolveRequestInit: ({ credentials, requestInit, }: MediaRequestInitOptions) => MediaRequestInit | undefined;

package/dist/video/props.d.ts

@@ -1,5 +1,6 @@
 import type { EffectDefinitionAndStack, EffectsProp, LogLevel, LoopVolumeCurveBehavior, OnVideoFrame, SequenceProps, VolumeProp } from 'remotion';
 import type { MediaOnError } from '../on-error';
+import type { MediaRequestInit } from '../request-init';
 export type MediaErrorEvent = {
     error: Error;
 };
@@ -48,7 +49,12 @@ type OptionalVideoProps = {
     debugOverlay: boolean;
     headless: boolean;
     onError: MediaOnError | undefined;
+    /**
+     * @deprecated Use `requestInit={{credentials: ...}}` instead. If both are
+     * passed, `requestInit.credentials` wins over this prop.
+     */
     credentials: RequestCredentials | undefined;
+    requestInit: MediaRequestInit | undefined;
     objectFit: VideoObjectFit;
     _experimentalInitiallyDrawCachedFrame: boolean;
     effects: EffectsProp;

package/dist/video/video-for-preview.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { EffectDefinitionAndStack, LogLevel, LoopVolumeCurveBehavior, SequenceControls, VolumeProp } from 'remotion';
 import { type MediaOnError } from '../on-error';
+import type { MediaRequestInit } from '../request-init';
 import type { FallbackOffthreadVideoProps, VideoObjectFit } from './props';
 type VideoForPreviewProps = {
     readonly src: string;
@@ -24,6 +25,7 @@ type VideoForPreviewProps = {
     readonly headless: boolean;
     readonly onError: MediaOnError | undefined;
     readonly credentials: RequestCredentials | undefined;
+    readonly requestInit: MediaRequestInit | undefined;
     readonly objectFit: VideoObjectFit;
     readonly setMediaDurationInSeconds: (durationInSeconds: number) => void;
     readonly _experimentalInitiallyDrawCachedFrame: boolean;

package/dist/video/video-for-rendering.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { LogLevel, LoopVolumeCurveBehavior, OnVideoFrame, VolumeProp } from 'remotion';
 import { type MediaOnError } from '../on-error';
+import type { MediaRequestInit } from '../request-init';
 import type { FallbackOffthreadVideoProps, VideoObjectFit } from './props';
 type InnerVideoProps = {
     readonly className: string | undefined;
@@ -25,6 +26,7 @@ type InnerVideoProps = {
     readonly headless: boolean;
     readonly onError: MediaOnError | undefined;
     readonly credentials: RequestCredentials | undefined;
+    readonly requestInit: MediaRequestInit | undefined;
     readonly objectFit: VideoObjectFit;
 };
 export declare const VideoForRendering: React.FC<InnerVideoProps>;

package/dist/video/video.d.ts

@@ -28,6 +28,7 @@ export declare const Video: React.ComponentType<{
     headless: boolean;
     onError: import("../on-error").MediaOnError | undefined;
     credentials: RequestCredentials | undefined;
+    requestInit: import("..").MediaRequestInit | undefined;
     objectFit: import("./props").VideoObjectFit;
     _experimentalInitiallyDrawCachedFrame: boolean;
     effects: import("remotion").EffectsProp;

package/dist/video-extraction/add-broadcast-channel-listener.d.ts

@@ -1,5 +1,6 @@
 import type { LogLevel } from 'remotion';
 import type { PcmS16AudioData } from '../convert-audiodata/convert-audiodata';
+import type { MediaRequestInit } from '../request-init';
 export type MessageFromMainTab = {
     type: 'response-success';
     id: string;
@@ -44,6 +45,7 @@ export type ExtractFrameRequest = {
     fps: number;
     maxCacheSize: number;
     credentials: RequestCredentials | undefined;
+    requestInit?: MediaRequestInit;
 };
 export declare const addBroadcastChannelListener: () => void;
 export declare const waitForMainTabToBeReady: (channel: BroadcastChannel) => Promise<void>;

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

@@ -1,4 +1,5 @@
 import type { PcmS16AudioData } from '../convert-audiodata/convert-audiodata';
+import { type MediaRequestInit } from '../request-init';
 export type ExtractFrameViaBroadcastChannelResult = {
     type: 'success';
     frame: ImageBitmap | null;
@@ -15,7 +16,7 @@ export type ExtractFrameViaBroadcastChannelResult = {
 } | {
     type: 'unknown-container-format';
 };
-export declare const extractFrameViaBroadcastChannel: ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, isClientSideRendering, loop, audioStreamIndex, trimAfter, trimBefore, fps, maxCacheSize, credentials, }: {
+export declare const extractFrameViaBroadcastChannel: ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, isClientSideRendering, loop, audioStreamIndex, trimAfter, trimBefore, fps, maxCacheSize, credentials, requestInit, }: {
     src: string;
     timeInSeconds: number;
     durationInSeconds: number;
@@ -31,4 +32,5 @@ export declare const extractFrameViaBroadcastChannel: ({ src, timeInSeconds, log
     fps: number;
     maxCacheSize: number;
     credentials: RequestCredentials | undefined;
+    requestInit?: MediaRequestInit | undefined;
 }) => Promise<ExtractFrameViaBroadcastChannelResult>;

package/dist/video-extraction/extract-frame.d.ts

@@ -1,4 +1,5 @@
 import { type LogLevel } from 'remotion';
+import type { MediaRequestInit } from '../request-init';
 type ExtractFrameResult = {
     type: 'success';
     frame: VideoFrame | null;
@@ -26,6 +27,7 @@ type ExtractFrameParams = {
     fps: number;
     maxCacheSize: number;
     credentials: RequestCredentials | undefined;
+    requestInit?: MediaRequestInit;
 };
 export declare const extractFrame: (params: ExtractFrameParams) => Promise<ExtractFrameResult>;
 export {};

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

@@ -1,4 +1,5 @@
 import { AudioSampleSink, VideoSampleSink } from 'mediabunny';
+import type { MediaRequestInit } from '../request-init';
 type VideoSinks = {
     sampleSink: VideoSampleSink;
 };
@@ -7,7 +8,7 @@ type AudioSinks = {
 };
 export type AudioSinkResult = AudioSinks | 'no-audio-track' | 'cannot-decode-audio' | 'unknown-container-format' | 'network-error';
 export type VideoSinkResult = VideoSinks | 'no-video-track' | 'cannot-decode' | 'cannot-decode-alpha' | 'unknown-container-format' | 'network-error';
-export declare const getSinks: (src: string, credentials: RequestCredentials | undefined) => Promise<{
+export declare const getSinks: (src: string, credentials: RequestCredentials | undefined, requestInit?: MediaRequestInit | undefined) => Promise<{
     getVideo: () => Promise<VideoSinkResult>;
     getAudio: (index: number | null) => Promise<AudioSinkResult>;
     actualMatroskaTimestamps: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/media",
-	"version": "4.0.466",
+	"version": "4.0.468",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"module": "dist/esm/index.mjs",
@@ -23,7 +23,7 @@
 	},
 	"dependencies": {
 		"mediabunny": "1.45.0",
-		"remotion": "4.0.466",
+		"remotion": "4.0.468",
 		"zod": "4.3.6"
 	},
 	"peerDependencies": {
@@ -31,7 +31,7 @@
 		"react-dom": ">=16.8.0"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.466",
+		"@remotion/eslint-config-internal": "4.0.468",
 		"@vitest/browser-webdriverio": "4.0.9",
 		"eslint": "9.19.0",
 		"react": "19.2.3",