@remotion/media 4.0.489 → 4.0.491

package/dist/esm/index.mjs

@@ -136,7 +136,6 @@ var calculateEndTime = ({
 };
 
 // src/media-player.ts
-import { ALL_FORMATS, Input, UrlSource } from "mediabunny";
 import { Internals as Internals5 } from "remotion";
 
 // src/audio-iterator-manager.ts
@@ -853,6 +852,127 @@ var getDurationOrCompute = async (input) => {
   }) ?? input.computeDuration(undefined, { skipLiveWait: true });
 };
 
+// src/get-shared-input.ts
+import { ALL_FORMATS, Input, UrlSource } from "mediabunny";
+
+// 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/get-shared-input.ts
+var sharedInputs = {};
+var getSharedInputCacheKey = ({
+  src,
+  credentials,
+  requestInit
+}) => JSON.stringify([
+  src,
+  credentials ?? null,
+  getMediaRequestInitFingerprint(requestInit)
+]);
+var acquireSharedInput = ({
+  src,
+  credentials,
+  requestInit
+}) => {
+  const normalizedRequestInit = normalizeMediaRequestInit(requestInit);
+  const cacheKey = getSharedInputCacheKey({
+    src,
+    credentials,
+    requestInit: normalizedRequestInit
+  });
+  const existing = sharedInputs[cacheKey];
+  if (existing) {
+    existing.refCount++;
+    return { input: existing.input, cacheKey };
+  }
+  const resolvedRequestInit = resolveRequestInit({
+    credentials,
+    requestInit: normalizedRequestInit
+  });
+  const input = new Input({
+    source: new UrlSource(src, resolvedRequestInit ? { requestInit: resolvedRequestInit } : undefined),
+    formats: ALL_FORMATS
+  });
+  sharedInputs[cacheKey] = { input, refCount: 1 };
+  return { input, cacheKey };
+};
+var releaseSharedInput = (cacheKey) => {
+  const entry = sharedInputs[cacheKey];
+  if (!entry) {
+    return;
+  }
+  entry.refCount--;
+  if (entry.refCount <= 0) {
+    delete sharedInputs[cacheKey];
+    entry.input.dispose();
+  }
+};
+
 // src/helpers/resolve-audio-track.ts
 var resolveAudioTrack = async ({
   videoTrack,
@@ -972,74 +1092,6 @@ 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";
@@ -1070,6 +1122,7 @@ var makeStableFramePool = () => {
     if (!context) {
       throw new Error("Could not create canvas context");
     }
+    context.clearRect(0, 0, stableCanvas.width, stableCanvas.height);
     context.drawImage(canvas, 0, 0);
     let released = false;
     const stableFrame = {
@@ -1659,13 +1712,13 @@ 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, resolvedRequestInit ? {
-        requestInit: resolvedRequestInit
-      } : undefined),
-      formats: ALL_FORMATS
+    const { input, cacheKey } = acquireSharedInput({
+      src: this.src,
+      credentials,
+      requestInit
     });
+    this.input = input;
+    this.inputCacheKey = cacheKey;
     this.tagType = tagType;
     this.getEffects = getEffects;
     this.getEffectChainState = getEffectChainState;
@@ -1683,8 +1736,10 @@ class MediaPlayer {
     }
   }
   input;
+  inputCacheKey;
+  disposed = false;
   isDisposalError() {
-    return this.input.disposed === true;
+    return this.disposed || this.input.disposed === true;
   }
   initialize(startTimeUnresolved, initialMuted) {
     const promise = this._initialize(startTimeUnresolved, initialMuted);
@@ -1719,7 +1774,7 @@ class MediaPlayer {
     try {
       const _ = __using(__stack, this.delayPlaybackHandleIfNotPremounting(), 0);
       try {
-        if (this.input.disposed) {
+        if (this.isDisposalError()) {
           return { type: "disposed" };
         }
         try {
@@ -1740,7 +1795,7 @@ class MediaPlayer {
           this.input.getPrimaryVideoTrack(),
           this.input.getAudioTracks()
         ]);
-        if (this.input.disposed) {
+        if (this.isDisposalError()) {
           return { type: "disposed" };
         }
         this.totalDuration = durationInSeconds;
@@ -1761,9 +1816,12 @@ class MediaPlayer {
           }
           const canDecode = await videoTrack.canDecode();
           if (!canDecode) {
+            if (videoTrack.codec === "prores") {
+              return { type: "cannot-decode-prores" };
+            }
             return { type: "cannot-decode" };
           }
-          if (this.input.disposed) {
+          if (this.isDisposalError()) {
             return { type: "disposed" };
           }
           this.videoIteratorManager = await videoIteratorManager({
@@ -1796,7 +1854,7 @@ class MediaPlayer {
           if (!canDecode) {
             return { type: "cannot-decode" };
           }
-          if (this.input.disposed) {
+          if (this.isDisposalError()) {
             return { type: "disposed" };
           }
           this.audioIteratorManager = audioIteratorManager({
@@ -2015,6 +2073,10 @@ class MediaPlayer {
     }
   }
   async dispose() {
+    if (this.disposed) {
+      return;
+    }
+    this.disposed = true;
     if (this.initializationPromise) {
       try {
         await this.initializationPromise;
@@ -2023,7 +2085,7 @@ class MediaPlayer {
     this.nonceManager.createAsyncOperation();
     this.videoIteratorManager?.destroy();
     this.audioIteratorManager?.destroyIterator();
-    this.input.dispose();
+    releaseSharedInput(this.inputCacheKey);
   }
   getTargetTime = (mediaTimestamp, currentTime) => {
     if (!this.sharedAudioContext) {
@@ -2475,6 +2537,9 @@ var AudioForPreviewAssertedShowing = ({
           handleError(new Error(`No video or audio tracks found for ${preloadedSrc}.`), `No video or audio tracks found for ${preloadedSrc}, falling back to <Html5Audio>`);
           return;
         }
+        if (result.type === "cannot-decode-prores") {
+          throw new Error(`Encountered ProRes media for ${preloadedSrc}. But this should never happen, since you used the <Audio> tag. Please report this as a bug.`);
+        }
         if (result.type === "success") {
           setMediaPlayerReady(true);
           setMediaDurationInSeconds(result.durationInSeconds);
@@ -3858,6 +3923,9 @@ var getSinks = async (src, logLevel, credentials, requestInit) => {
     }
     const canDecode = await videoTrack.canDecode();
     if (!canDecode) {
+      if (videoTrack.codec === "prores") {
+        return "cannot-decode-prores";
+      }
       return "cannot-decode";
     }
     const sampleSink = new VideoSampleSink(videoTrack);
@@ -4116,6 +4184,12 @@ var extractFrameInternal = async ({
   if (video === "cannot-decode") {
     return { type: "cannot-decode", durationInSeconds: mediaDurationInSeconds };
   }
+  if (video === "cannot-decode-prores") {
+    return {
+      type: "cannot-decode-prores",
+      durationInSeconds: mediaDurationInSeconds
+    };
+  }
   if (video === "unknown-container-format") {
     return { type: "unknown-container-format" };
   }
@@ -4271,6 +4345,12 @@ var extractFrameAndAudio = async ({
         durationInSeconds: video.durationInSeconds
       };
     }
+    if (video?.type === "cannot-decode-prores") {
+      return {
+        type: "cannot-decode-prores",
+        durationInSeconds: video.durationInSeconds
+      };
+    }
     if (video?.type === "unknown-container-format") {
       return { type: "unknown-container-format" };
     }
@@ -4358,6 +4438,15 @@ var addBroadcastChannelListener = () => {
           window.remotion_broadcastChannel.postMessage(cannotDecodeResponse);
           return;
         }
+        if (result.type === "cannot-decode-prores") {
+          const cannotDecodeProresResponse = {
+            type: "response-cannot-decode-prores",
+            id: data.id,
+            durationInSeconds: result.durationInSeconds
+          };
+          window.remotion_broadcastChannel.postMessage(cannotDecodeProresResponse);
+          return;
+        }
         if (result.type === "cannot-decode-alpha") {
           const cannotDecodeAlphaResponse = {
             type: "response-cannot-decode-alpha",
@@ -4504,6 +4593,14 @@ var extractFrameViaBroadcastChannel = async ({
         window.remotion_broadcastChannel.removeEventListener("message", onMessage);
         return;
       }
+      if (data.type === "response-cannot-decode-prores") {
+        resolve({
+          type: "cannot-decode-prores",
+          durationInSeconds: data.durationInSeconds
+        });
+        window.remotion_broadcastChannel.removeEventListener("message", onMessage);
+        return;
+      }
       if (data.type === "response-network-error") {
         resolve({ type: "network-error" });
         window.remotion_broadcastChannel.removeEventListener("message", onMessage);
@@ -4677,6 +4774,9 @@ var AudioForRendering = ({
       if (result.type === "cannot-decode-alpha") {
         throw new Error(`Cannot decode alpha component for ${src}, and 'disallowFallbackToHtml5Audio' was set. But this should never happen, since you used the <Audio> tag. Please report this as a bug.`);
       }
+      if (result.type === "cannot-decode-prores") {
+        throw new Error(`Encountered ProRes media for ${src}. But this should never happen, since you used the <Audio> tag. Please report this as a bug.`);
+      }
       if (result.type === "network-error") {
         handleError(new Error(`Network error fetching ${src}.`), new Error(`Cannot render audio "${src}": Network error while fetching the audio (possibly CORS).`), `Network error fetching ${src}, falling back to <Html5Audio>`);
         return;
@@ -4886,7 +4986,6 @@ var Audio = Interactive.withSchema({
   schema: audioSchema,
   supportsEffects: false
 });
-Internals17.addSequenceStackTraces(Audio);
 
 // src/video/video.tsx
 import React6, { useMemo as useMemo6, useState as useState6 } from "react";
@@ -4916,6 +5015,19 @@ import {
   useVideoConfig as useVideoConfig3
 } from "remotion";
 
+// src/prores-error.ts
+var PRORES_DOCS_URL = "https://www.remotion.dev/docs/videos/prores";
+var proresDecoderNotEnabledMessage = (src) => {
+  return `Cannot decode "${src}": it is encoded with Apple ProRes, which WebCodecs does not support natively. ` + `ProRes decoding is not enabled by default. Register the ProRes decoder by calling ` + `registerProresDecoder() from "@mediabunny/prores" in your entry point, before registerRoot(). ` + `See ${PRORES_DOCS_URL}. ` + `(This is required to decode a ProRes source for both preview and rendering — it is unrelated to exporting a video as ProRes.)`;
+};
+
+class ProResDecoderNotEnabledError extends Error {
+  constructor(src) {
+    super(proresDecoderNotEnabledMessage(src));
+    this.name = "ProResDecoderNotEnabledError";
+  }
+}
+
 // src/video/video-frame-cache.ts
 var cache = new Map;
 var cacheVideoFrame = (src, sourceCanvas) => {
@@ -5171,6 +5283,9 @@ var VideoForPreviewAssertedShowing = ({
           handleError(new Error(`Cannot decode ${preloadedSrc}.`), `Cannot decode ${preloadedSrc}, falling back to <OffthreadVideo>`);
           return;
         }
+        if (result.type === "cannot-decode-prores") {
+          throw new ProResDecoderNotEnabledError(preloadedSrc);
+        }
         if (result.type === "no-tracks") {
           handleError(new Error(`No video or audio tracks found for ${preloadedSrc}.`), `No video or audio tracks found for ${preloadedSrc}, falling back to <OffthreadVideo>`);
           return;
@@ -5181,6 +5296,10 @@ var VideoForPreviewAssertedShowing = ({
           hasDrawnRealFrameRef.current = true;
         }
       }).catch((error) => {
+        if (error instanceof ProResDecoderNotEnabledError) {
+          onErrorRef.current?.(error);
+          throw error;
+        }
         const [action, errorToUse] = callOnErrorAndResolve({
           onError: onErrorRef.current,
           error,
@@ -5497,6 +5616,12 @@ var VideoForRendering = ({
         handleError(new Error(`Cannot decode ${src}.`), new Error(`Cannot render video "${src}": The video could not be decoded by the browser.`), `Cannot decode ${src}, falling back to <OffthreadVideo>`, result.durationInSeconds);
         return;
       }
+      if (result.type === "cannot-decode-prores") {
+        const proresError = new ProResDecoderNotEnabledError(src);
+        onError?.(proresError);
+        cancelRender3(proresError);
+        return;
+      }
       if (result.type === "cannot-decode-alpha") {
         handleError(new Error(`Cannot decode alpha component for ${src}.`), new Error(`Cannot render video "${src}": The alpha channel could not be decoded by the browser.`), `Cannot decode alpha component for ${src}, falling back to <OffthreadVideo>`, result.durationInSeconds);
         return;
@@ -5974,7 +6099,6 @@ var Video = Interactive2.withSchema({
   schema: videoSchema,
   supportsEffects: true
 });
-Internals21.addSequenceStackTraces(Video);
 
 // src/index.ts
 var experimental_Audio = Audio;

package/dist/get-shared-input.d.ts

@@ -0,0 +1,11 @@
+import { Input } from 'mediabunny';
+import { type MediaRequestInit } from './request-init';
+export declare const acquireSharedInput: ({ src, credentials, requestInit, }: {
+    src: string;
+    credentials: RequestCredentials | undefined;
+    requestInit: MediaRequestInit | undefined;
+}) => {
+    input: Input<import("mediabunny").Source>;
+    cacheKey: string;
+};
+export declare const releaseSharedInput: (cacheKey: string) => void;

package/dist/media-player.d.ts

@@ -10,6 +10,8 @@ export type MediaPlayerInitResult = {
     type: 'unknown-container-format';
 } | {
     type: 'cannot-decode';
+} | {
+    type: 'cannot-decode-prores';
 } | {
     type: 'network-error';
 } | {
@@ -72,6 +74,8 @@ export declare class MediaPlayer {
         getEffectChainState: (width: number, height: number) => EffectChainState | null;
     });
     private input;
+    private inputCacheKey;
+    private disposed;
     private isDisposalError;
     initialize(startTimeUnresolved: number, initialMuted: boolean): Promise<MediaPlayerInitResult>;
     private getStartTime;

package/dist/prores-error.d.ts

@@ -0,0 +1,4 @@
+export declare const proresDecoderNotEnabledMessage: (src: string) => string;
+export declare class ProResDecoderNotEnabledError extends Error {
+    constructor(src: string);
+}

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

@@ -15,6 +15,10 @@ export type MessageFromMainTab = {
     type: 'response-cannot-decode';
     id: string;
     durationInSeconds: number | null;
+} | {
+    type: 'response-cannot-decode-prores';
+    id: string;
+    durationInSeconds: number | null;
 } | {
     type: 'response-cannot-decode-alpha';
     id: string;

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

@@ -8,6 +8,9 @@ export type ExtractFrameViaBroadcastChannelResult = {
 } | {
     type: 'cannot-decode';
     durationInSeconds: number | null;
+} | {
+    type: 'cannot-decode-prores';
+    durationInSeconds: number | null;
 } | {
     type: 'cannot-decode-alpha';
     durationInSeconds: number | null;

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

@@ -8,6 +8,9 @@ type ExtractFrameResult = {
 } | {
     type: 'cannot-decode';
     durationInSeconds: number | null;
+} | {
+    type: 'cannot-decode-prores';
+    durationInSeconds: number | null;
 } | {
     type: 'cannot-decode-alpha';
     durationInSeconds: number | null;

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

@@ -7,7 +7,7 @@ type AudioSinks = {
     sampleSink: AudioSampleSink;
 };
 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 type VideoSinkResult = VideoSinks | 'no-video-track' | 'cannot-decode' | 'cannot-decode-prores' | 'cannot-decode-alpha' | 'unknown-container-format' | 'network-error';
 export declare const getSinks: (src: string, logLevel: "error" | "info" | "trace" | "verbose" | "warn", credentials: RequestCredentials | undefined, requestInit?: MediaRequestInit | undefined) => Promise<{
     getVideo: () => Promise<VideoSinkResult>;
     getAudio: (index: number | null) => Promise<AudioSinkResult>;

package/package.json

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