@remotion/media 4.0.358 → 4.0.361

package/dist/audio/audio-for-rendering.js

@@ -81,6 +81,9 @@ export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted
                 setReplaceWithHtml5Audio(true);
                 return;
             }
+            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 === 'network-error') {
                 if (disallowFallbackToHtml5Audio) {
                     cancelRender(new Error(`Cannot decode ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));

package/dist/browser-can-use-webgl2.d.ts

@@ -0,0 +1 @@
+export declare const canBrowserUseWebGl2: () => boolean;

package/dist/browser-can-use-webgl2.js

@@ -0,0 +1,13 @@
+let browserCanUseWebGl2 = null;
+const browserCanUseWebGl2Uncached = () => {
+    const canvas = new OffscreenCanvas(1, 1);
+    const context = canvas.getContext('webgl2');
+    return context !== null;
+};
+export const canBrowserUseWebGl2 = () => {
+    if (browserCanUseWebGl2 !== null) {
+        return browserCanUseWebGl2;
+    }
+    browserCanUseWebGl2 = browserCanUseWebGl2Uncached();
+    return browserCanUseWebGl2;
+};

package/dist/caches.d.ts

@@ -7,7 +7,7 @@ export declare const keyframeManager: {
         videoSampleSink: import("mediabunny").VideoSampleSink;
         src: string;
         logLevel: LogLevel;
-    }) => Promise<import("./video-extraction/keyframe-bank").KeyframeBank | null>;
+    }) => Promise<import("./video-extraction/keyframe-bank").KeyframeBank | "has-alpha" | null>;
     getCacheStats: () => Promise<{
         count: number;
         totalSize: number;

package/dist/caches.js

@@ -28,9 +28,9 @@ const getUncachedMaxCacheSize = (logLevel) => {
     if (window.remotion_initialMemoryAvailable !== undefined &&
         window.remotion_initialMemoryAvailable !== null) {
         const value = window.remotion_initialMemoryAvailable / 2;
-        if (value < 240 * 1024 * 1024) {
-            Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `Using cache size set based on minimum value of 240MB (which is more than half of the available system memory!)`);
-            return 240 * 1024 * 1024;
+        if (value < 500 * 1024 * 1024) {
+            Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `Using cache size set based on minimum value of 500MB (which is more than half of the available system memory!)`);
+            return 500 * 1024 * 1024;
         }
         if (value > 20000 * 1024 * 1024) {
             Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `Using cache size set based on maximum value of 20GB (which is less than half of the available system memory)`);

package/dist/esm/index.mjs

@@ -361,7 +361,8 @@ class MediaPlayer {
         }
         this.canvasSink = new CanvasSink(videoTrack, {
           poolSize: 2,
-          fit: "contain"
+          fit: "contain",
+          alpha: true
         });
         this.canvas.width = videoTrack.displayWidth;
         this.canvas.height = videoTrack.displayHeight;
@@ -582,6 +583,7 @@ class MediaPlayer {
   }
   drawCurrentFrame() {
     if (this.context && this.nextFrame) {
+      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
       this.context.drawImage(this.nextFrame.canvas, 0, 0);
     }
     if (this.onVideoFrameCallback && this.canvas) {
@@ -1527,6 +1529,21 @@ var makeAudioManager = () => {
 // src/video-extraction/keyframe-manager.ts
 import { Internals as Internals9 } from "remotion";
 
+// src/browser-can-use-webgl2.ts
+var browserCanUseWebGl2 = null;
+var browserCanUseWebGl2Uncached = () => {
+  const canvas = new OffscreenCanvas(1, 1);
+  const context = canvas.getContext("webgl2");
+  return context !== null;
+};
+var canBrowserUseWebGl2 = () => {
+  if (browserCanUseWebGl2 !== null) {
+    return browserCanUseWebGl2;
+  }
+  browserCanUseWebGl2 = browserCanUseWebGl2Uncached();
+  return browserCanUseWebGl2;
+};
+
 // src/render-timestamp-range.ts
 var renderTimestampRange = (timestamps) => {
   if (timestamps.length === 0) {
@@ -1927,6 +1944,10 @@ var makeKeyframeManager = () => {
     const startPacket = await packetSink.getKeyPacket(timestamp, {
       verifyKeyPackets: true
     });
+    const hasAlpha = startPacket?.sideData.alpha;
+    if (hasAlpha && !canBrowserUseWebGl2()) {
+      return "has-alpha";
+    }
     if (!startPacket) {
       return null;
     }
@@ -2038,9 +2059,9 @@ var getUncachedMaxCacheSize = (logLevel) => {
   }
   if (window.remotion_initialMemoryAvailable !== undefined && window.remotion_initialMemoryAvailable !== null) {
     const value = window.remotion_initialMemoryAvailable / 2;
-    if (value < 240 * 1024 * 1024) {
-      Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on minimum value of 240MB (which is more than half of the available system memory!)`);
-      return 240 * 1024 * 1024;
+    if (value < 500 * 1024 * 1024) {
+      Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on minimum value of 500MB (which is more than half of the available system memory!)`);
+      return 500 * 1024 * 1024;
     }
     if (value > 20000 * 1024 * 1024) {
       Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on maximum value of 20GB (which is less than half of the available system memory)`);
@@ -2302,6 +2323,12 @@ var extractFrameInternal = async ({
     src,
     logLevel
   });
+  if (keyframeBank === "has-alpha") {
+    return {
+      type: "cannot-decode-alpha",
+      durationInSeconds: await sink.getDuration()
+    };
+  }
   if (!keyframeBank) {
     return {
       type: "success",
@@ -2367,6 +2394,12 @@ var extractFrameAndAudio = async ({
     if (frame?.type === "unknown-container-format") {
       return { type: "unknown-container-format" };
     }
+    if (frame?.type === "cannot-decode-alpha") {
+      return {
+        type: "cannot-decode-alpha",
+        durationInSeconds: frame.durationInSeconds
+      };
+    }
     if (audio === "unknown-container-format") {
       if (frame !== null) {
         frame?.frame?.close();
@@ -2426,6 +2459,15 @@ if (window.remotion_broadcastChannel && window.remotion_isMainTab) {
           window.remotion_broadcastChannel.postMessage(cannotDecodeResponse);
           return;
         }
+        if (result.type === "cannot-decode-alpha") {
+          const cannotDecodeAlphaResponse = {
+            type: "response-cannot-decode-alpha",
+            id: data.id,
+            durationInSeconds: result.durationInSeconds
+          };
+          window.remotion_broadcastChannel.postMessage(cannotDecodeAlphaResponse);
+          return;
+        }
         if (result.type === "network-error") {
           const networkErrorResponse = {
             type: "response-network-error",
@@ -2544,6 +2586,14 @@ var extractFrameViaBroadcastChannel = ({
         window.remotion_broadcastChannel.removeEventListener("message", onMessage);
         return;
       }
+      if (data.type === "response-cannot-decode-alpha") {
+        resolve({
+          type: "cannot-decode-alpha",
+          durationInSeconds: data.durationInSeconds
+        });
+        window.remotion_broadcastChannel.removeEventListener("message", onMessage);
+        return;
+      }
       throw new Error(`Invalid message: ${JSON.stringify(data)}`);
     };
     window.remotion_broadcastChannel.addEventListener("message", onMessage);
@@ -2673,6 +2723,9 @@ var AudioForRendering = ({
         setReplaceWithHtml5Audio(true);
         return;
       }
+      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 === "network-error") {
         if (disallowFallbackToHtml5Audio) {
           cancelRender2(new Error(`Cannot decode ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));
@@ -3236,6 +3289,18 @@ var VideoForRendering = ({
         });
         return;
       }
+      if (result.type === "cannot-decode-alpha") {
+        if (disallowFallbackToOffthreadVideo) {
+          cancelRender3(new Error(`Cannot decode alpha component for ${src}, and 'disallowFallbackToOffthreadVideo' was set. Failing the render.`));
+        }
+        if (window.remotion_isMainTab) {
+          Internals15.Log.info({ logLevel, tag: "@remotion/media" }, `Cannot decode alpha component for ${src}, falling back to <OffthreadVideo>`);
+        }
+        setReplaceWithOffthreadVideo({
+          durationInSeconds: result.durationInSeconds
+        });
+        return;
+      }
       if (result.type === "network-error") {
         if (disallowFallbackToOffthreadVideo) {
           cancelRender3(new Error(`Cannot decode ${src}, and 'disallowFallbackToOffthreadVideo' was set. Failing the render.`));
@@ -3253,7 +3318,9 @@ var VideoForRendering = ({
       } = result;
       if (imageBitmap) {
         onVideoFrame?.(imageBitmap);
-        const context = canvasRef.current?.getContext("2d");
+        const context = canvasRef.current?.getContext("2d", {
+          alpha: true
+        });
         if (!context) {
           return;
         }
@@ -3263,7 +3330,9 @@ var VideoForRendering = ({
         context.drawImage(imageBitmap, 0, 0);
         imageBitmap.close();
       } else if (window.remotion_videoEnabled) {
-        const context = canvasRef.current?.getContext("2d");
+        const context = canvasRef.current?.getContext("2d", {
+          alpha: true
+        });
         if (context) {
           context.clearRect(0, 0, context.canvas.width, context.canvas.height);
         }
@@ -3344,7 +3413,7 @@ var VideoForRendering = ({
       delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined,
       style,
       allowAmplificationDuringRender: true,
-      transparent: fallbackOffthreadVideoProps?.transparent ?? false,
+      transparent: fallbackOffthreadVideoProps?.transparent ?? true,
       toneMapped: fallbackOffthreadVideoProps?.toneMapped ?? true,
       audioStreamIndex: audioStreamIndex ?? 0,
       name,

package/dist/extract-frame-and-audio.js

@@ -40,6 +40,12 @@ export const extractFrameAndAudio = async ({ src, timeInSeconds, logLevel, durat
         if (frame?.type === 'unknown-container-format') {
             return { type: 'unknown-container-format' };
         }
+        if (frame?.type === 'cannot-decode-alpha') {
+            return {
+                type: 'cannot-decode-alpha',
+                durationInSeconds: frame.durationInSeconds,
+            };
+        }
         if (audio === 'unknown-container-format') {
             if (frame !== null) {
                 frame?.frame?.close();

package/dist/video/media-player.js

@@ -258,6 +258,7 @@ export class MediaPlayer {
                 this.canvasSink = new CanvasSink(videoTrack, {
                     poolSize: 2,
                     fit: 'contain',
+                    alpha: true,
                 });
                 this.canvas.width = videoTrack.displayWidth;
                 this.canvas.height = videoTrack.displayHeight;
@@ -473,6 +474,7 @@ export class MediaPlayer {
     }
     drawCurrentFrame() {
         if (this.context && this.nextFrame) {
+            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
             this.context.drawImage(this.nextFrame.canvas, 0, 0);
         }
         if (this.onVideoFrameCallback && this.canvas) {

package/dist/video/video-for-rendering.js

@@ -88,6 +88,18 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
                 });
                 return;
             }
+            if (result.type === 'cannot-decode-alpha') {
+                if (disallowFallbackToOffthreadVideo) {
+                    cancelRender(new Error(`Cannot decode alpha component for ${src}, and 'disallowFallbackToOffthreadVideo' was set. Failing the render.`));
+                }
+                if (window.remotion_isMainTab) {
+                    Internals.Log.info({ logLevel, tag: '@remotion/media' }, `Cannot decode alpha component for ${src}, falling back to <OffthreadVideo>`);
+                }
+                setReplaceWithOffthreadVideo({
+                    durationInSeconds: result.durationInSeconds,
+                });
+                return;
+            }
             if (result.type === 'network-error') {
                 if (disallowFallbackToOffthreadVideo) {
                     cancelRender(new Error(`Cannot decode ${src}, and 'disallowFallbackToOffthreadVideo' was set. Failing the render.`));
@@ -101,7 +113,9 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
             const { frame: imageBitmap, audio, durationInSeconds: assetDurationInSeconds, } = result;
             if (imageBitmap) {
                 onVideoFrame?.(imageBitmap);
-                const context = canvasRef.current?.getContext('2d');
+                const context = canvasRef.current?.getContext('2d', {
+                    alpha: true,
+                });
                 if (!context) {
                     return;
                 }
@@ -121,7 +135,9 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
                 // In the case of https://discord.com/channels/809501355504959528/809501355504959531/1424400511070765086
                 // A video that only starts at time 0.033sec
                 // we shall not crash here but clear the canvas
-                const context = canvasRef.current?.getContext('2d');
+                const context = canvasRef.current?.getContext('2d', {
+                    alpha: true,
+                });
                 if (context) {
                     context.clearRect(0, 0, context.canvas.width, context.canvas.height);
                 }
@@ -195,7 +211,7 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
             .join(' ');
     }, [className]);
     if (replaceWithOffthreadVideo) {
-        const fallback = (_jsx(Internals.InnerOffthreadVideo, { src: src, playbackRate: playbackRate ?? 1, muted: muted ?? false, acceptableTimeShiftInSeconds: fallbackOffthreadVideoProps?.acceptableTimeShiftInSeconds, loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? 'repeat', delayRenderRetries: delayRenderRetries ?? undefined, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined, style: style, allowAmplificationDuringRender: true, transparent: fallbackOffthreadVideoProps?.transparent ?? false, toneMapped: fallbackOffthreadVideoProps?.toneMapped ?? true, audioStreamIndex: audioStreamIndex ?? 0, name: name, className: className, onVideoFrame: onVideoFrame, volume: volumeProp, id: id, onError: fallbackOffthreadVideoProps?.onError, toneFrequency: fallbackOffthreadVideoProps?.toneFrequency ?? 1, 
+        const fallback = (_jsx(Internals.InnerOffthreadVideo, { src: src, playbackRate: playbackRate ?? 1, muted: muted ?? false, acceptableTimeShiftInSeconds: fallbackOffthreadVideoProps?.acceptableTimeShiftInSeconds, loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? 'repeat', delayRenderRetries: delayRenderRetries ?? undefined, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined, style: style, allowAmplificationDuringRender: true, transparent: fallbackOffthreadVideoProps?.transparent ?? true, toneMapped: fallbackOffthreadVideoProps?.toneMapped ?? true, audioStreamIndex: audioStreamIndex ?? 0, name: name, className: className, onVideoFrame: onVideoFrame, volume: volumeProp, id: id, onError: fallbackOffthreadVideoProps?.onError, toneFrequency: fallbackOffthreadVideoProps?.toneFrequency ?? 1, 
             // these shouldn't matter during rendering / should not appear at all
             showInTimeline: false, crossOrigin: undefined, onAutoPlayError: () => undefined, pauseWhenBuffering: false, trimAfter: undefined, trimBefore: undefined, useWebAudioApi: false, startFrom: undefined, endAt: undefined, stack: stack, _remotionInternalNativeLoopPassed: false }));
         if (loop) {

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-alpha';
+    durationInSeconds: number | null;
 } | {
     type: 'network-error';
 } | {

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

@@ -28,6 +28,15 @@ if (window.remotion_broadcastChannel && window.remotion_isMainTab) {
                     window.remotion_broadcastChannel.postMessage(cannotDecodeResponse);
                     return;
                 }
+                if (result.type === 'cannot-decode-alpha') {
+                    const cannotDecodeAlphaResponse = {
+                        type: 'response-cannot-decode-alpha',
+                        id: data.id,
+                        durationInSeconds: result.durationInSeconds,
+                    };
+                    window.remotion_broadcastChannel.postMessage(cannotDecodeAlphaResponse);
+                    return;
+                }
                 if (result.type === 'network-error') {
                     const networkErrorResponse = {
                         type: 'response-network-error',
@@ -138,6 +147,14 @@ export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel,
                 window.remotion_broadcastChannel.removeEventListener('message', onMessage);
                 return;
             }
+            if (data.type === 'response-cannot-decode-alpha') {
+                resolve({
+                    type: 'cannot-decode-alpha',
+                    durationInSeconds: data.durationInSeconds,
+                });
+                window.remotion_broadcastChannel.removeEventListener('message', onMessage);
+                return;
+            }
             throw new Error(`Invalid message: ${JSON.stringify(data)}`);
         };
         window.remotion_broadcastChannel.addEventListener('message', onMessage);

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

@@ -7,6 +7,9 @@ type ExtractFrameResult = {
 } | {
     type: 'cannot-decode';
     durationInSeconds: number | null;
+} | {
+    type: 'cannot-decode-alpha';
+    durationInSeconds: number | null;
 } | {
     type: 'unknown-container-format';
 };

package/dist/video-extraction/extract-frame.js

@@ -42,6 +42,12 @@ const extractFrameInternal = async ({ src, timeInSeconds: unloopedTimeInSeconds,
         src,
         logLevel,
     });
+    if (keyframeBank === 'has-alpha') {
+        return {
+            type: 'cannot-decode-alpha',
+            durationInSeconds: await sink.getDuration(),
+        };
+    }
     if (!keyframeBank) {
         return {
             type: 'success',

package/dist/video-extraction/keyframe-manager.d.ts

@@ -8,7 +8,7 @@ export declare const makeKeyframeManager: () => {
         videoSampleSink: VideoSampleSink;
         src: string;
         logLevel: LogLevel;
-    }) => Promise<KeyframeBank | null>;
+    }) => Promise<KeyframeBank | "has-alpha" | null>;
     getCacheStats: () => Promise<{
         count: number;
         totalSize: number;

package/dist/video-extraction/keyframe-manager.js

@@ -1,4 +1,5 @@
 import { Internals } from 'remotion';
+import { canBrowserUseWebGl2 } from '../browser-can-use-webgl2';
 import { getMaxVideoCacheSize, getTotalCacheStats, SAFE_BACK_WINDOW_IN_SECONDS, } from '../caches';
 import { renderTimestampRange } from '../render-timestamp-range';
 import { getFramesSinceKeyframe } from './get-frames-since-keyframe';
@@ -104,6 +105,10 @@ export const makeKeyframeManager = () => {
         const startPacket = await packetSink.getKeyPacket(timestamp, {
             verifyKeyPackets: true,
         });
+        const hasAlpha = startPacket?.sideData.alpha;
+        if (hasAlpha && !canBrowserUseWebGl2()) {
+            return 'has-alpha';
+        }
         if (!startPacket) {
             // e.g. https://discord.com/channels/809501355504959528/809501355504959531/1424400511070765086
             // The video has an offset and the first frame is at time 0.033sec

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/media",
-	"version": "4.0.358",
+	"version": "4.0.361",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"module": "dist/esm/index.mjs",
@@ -22,7 +22,7 @@
 	},
 	"dependencies": {
 		"mediabunny": "1.23.0",
-		"remotion": "4.0.357",
+		"remotion": "4.0.361",
 		"webdriverio": "9.19.2"
 	},
 	"peerDependencies": {
@@ -30,7 +30,7 @@
 		"react-dom": ">=16.8.0"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.357",
+		"@remotion/eslint-config-internal": "4.0.361",
 		"@vitest/browser": "^3.2.4",
 		"eslint": "9.19.0",
 		"react": "19.0.0",