@remotion/media 4.0.490 → 4.0.491

package/dist/esm/index.mjs

@@ -1122,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 = {
@@ -1815,6 +1816,9 @@ class MediaPlayer {
           }
           const canDecode = await videoTrack.canDecode();
           if (!canDecode) {
+            if (videoTrack.codec === "prores") {
+              return { type: "cannot-decode-prores" };
+            }
             return { type: "cannot-decode" };
           }
           if (this.isDisposalError()) {
@@ -2533,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);
@@ -3916,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);
@@ -4174,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" };
   }
@@ -4329,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" };
     }
@@ -4416,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",
@@ -4562,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);
@@ -4735,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;
@@ -4973,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) => {
@@ -5228,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;
@@ -5238,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,
@@ -5554,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;

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';
 } | {

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.490",
+	"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.490",
+		"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.490",
-		"@remotion/player": "4.0.490",
+		"@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",