@remotion/web-renderer 4.0.400 → 4.0.401

package/dist/esm/index.mjs

@@ -37,13 +37,7 @@ var __callDispose = (stack, error, hasError) => {
 };
 
 // src/render-media-on-web.tsx
-import {
-  AudioSampleSource,
-  BufferTarget,
-  Output,
-  StreamTarget,
-  VideoSampleSource
-} from "mediabunny";
+import { BufferTarget, StreamTarget } from "mediabunny";
 import { Internals as Internals7 } from "remotion";
 
 // src/add-sample.ts
@@ -404,6 +398,11 @@ var getRealFrameRange = (durationInFrames, frameRange) => {
   return frameRange;
 };
 
+// src/get-audio-sample-source.ts
+import {
+  AudioSampleSource
+} from "mediabunny";
+
 // src/get-audio-encoding-config.ts
 import {
   canEncodeAudio,
@@ -427,6 +426,23 @@ var getDefaultAudioEncodingConfig = async () => {
   return null;
 };
 
+// src/get-audio-sample-source.ts
+var addAudioSampleSource = async ({
+  muted,
+  output
+}) => {
+  if (muted) {
+    return null;
+  }
+  const defaultAudioEncodingConfig = await getDefaultAudioEncodingConfig();
+  if (!defaultAudioEncodingConfig) {
+    throw new Error("No default audio encoding config found");
+  }
+  const audioSampleSource = new AudioSampleSource(defaultAudioEncodingConfig);
+  output.addAudioTrack(audioSampleSource);
+  return { audioSampleSource, [Symbol.dispose]: () => audioSampleSource.close() };
+};
+
 // src/internal-state.ts
 var makeInternalState = () => {
   let drawnPrecomposedPixels = 0;
@@ -473,6 +489,30 @@ var makeInternalState = () => {
   };
 };
 
+// src/mediabunny-cleanups.ts
+import { Output, VideoSampleSource } from "mediabunny";
+var makeOutputWithCleanup = (options) => {
+  const output = new Output(options);
+  return {
+    output,
+    [Symbol.dispose]: () => {
+      if (output.state === "finalized" || output.state === "canceled") {
+        return;
+      }
+      output.cancel();
+    }
+  };
+};
+var makeVideoSampleSourceCleanup = (encodingConfig) => {
+  const videoSampleSource = new VideoSampleSource(encodingConfig);
+  return {
+    videoSampleSource,
+    [Symbol.dispose]: () => {
+      videoSampleSource.close();
+    }
+  };
+};
+
 // src/mediabunny-mappings.ts
 import {
   Mp4OutputFormat,
@@ -1322,7 +1362,7 @@ var calculateTransforms = ({
   if (!elementComputedStyle) {
     throw new Error("Element computed style not found");
   }
-  const needs3DTransformViaWebGL = !totalMatrix.is2D;
+  const needs3DTransformViaWebGL = !totalMatrix.isIdentity;
   const needsMaskImage = maskImageInfo !== null;
   return {
     dimensions,
@@ -2777,16 +2817,13 @@ var processNode = async ({
         });
       }
       if (precompositing.needs3DTransformViaWebGL) {
-        const t = handle3dTransform({
+        drawable = handle3dTransform({
           matrix: totalMatrix,
           precomposeRect,
           tempCanvas: drawable,
           rectAfterTransforms,
           internalState
         });
-        if (t) {
-          drawable = t;
-        }
       }
       const previousTransform = context.getTransform();
       if (drawable) {
@@ -3406,13 +3443,12 @@ var internalRenderMediaOnWeb = async ({
   licenseKey,
   muted
 }) => {
-  let __stack = [];
+  let __stack2 = [];
   try {
     const outputTarget = userDesiredOutputTarget === null ? await canUseWebFsWriter() ? "web-fs" : "arraybuffer" : userDesiredOutputTarget;
     if (outputTarget === "web-fs") {
       await cleanupStaleOpfsFiles();
     }
-    const cleanupFns = [];
     const format = containerToMediabunnyContainer(container);
     if (codec && !format.getSupportedCodecs().includes(codecToMediabunnyCodec(codec))) {
       return Promise.reject(new Error(`Codec ${codec} is not supported for container ${container}`));
@@ -3432,7 +3468,7 @@ var internalRenderMediaOnWeb = async ({
     if (signal?.aborted) {
       return Promise.reject(new Error("renderMediaOnWeb() was cancelled"));
     }
-    const scaffold = __using(__stack, await createScaffold({
+    const scaffold = __using(__stack2, await createScaffold({
       width: resolved.width,
       height: resolved.height,
       fps: resolved.fps,
@@ -3451,73 +3487,20 @@ var internalRenderMediaOnWeb = async ({
       defaultOutName: resolved.defaultOutName
     }), 0);
     const { delayRenderScope, div, timeUpdater, collectAssets } = scaffold;
-    const internalState = __using(__stack, makeInternalState(), 0);
+    const internalState = __using(__stack2, makeInternalState(), 0);
     const artifactsHandler = handleArtifacts();
     const webFsTarget = outputTarget === "web-fs" ? await createWebFsTarget() : null;
     const target = webFsTarget ? new StreamTarget(webFsTarget.stream) : new BufferTarget;
-    const output = new Output({
+    const outputWithCleanup = __using(__stack2, makeOutputWithCleanup({
       format,
       target
-    });
+    }), 0);
     try {
-      if (signal?.aborted) {
-        throw new Error("renderMediaOnWeb() was cancelled");
-      }
-      await waitForReady({
-        timeoutInMilliseconds: delayRenderTimeoutInMilliseconds,
-        scope: delayRenderScope,
-        signal,
-        apiName: "renderMediaOnWeb",
-        internalState
-      });
-      if (signal?.aborted) {
-        throw new Error("renderMediaOnWeb() was cancelled");
-      }
-      cleanupFns.push(() => {
-        if (output.state === "finalized" || output.state === "canceled") {
-          return;
-        }
-        output.cancel();
-      });
-      const videoSampleSource = new VideoSampleSource({
-        codec: codecToMediabunnyCodec(codec),
-        bitrate: typeof videoBitrate === "number" ? videoBitrate : getQualityForWebRendererQuality(videoBitrate),
-        sizeChangeBehavior: "deny",
-        hardwareAcceleration,
-        latencyMode: "quality",
-        keyFrameInterval: keyframeIntervalInSeconds,
-        alpha: transparent ? "keep" : "discard"
-      });
-      cleanupFns.push(() => {
-        videoSampleSource.close();
-      });
-      output.addVideoTrack(videoSampleSource);
-      let audioSampleSource = null;
-      if (!muted) {
-        const defaultAudioEncodingConfig = await getDefaultAudioEncodingConfig();
-        if (!defaultAudioEncodingConfig) {
-          return Promise.reject(new Error("No default audio encoding config found"));
-        }
-        audioSampleSource = new AudioSampleSource(defaultAudioEncodingConfig);
-        cleanupFns.push(() => {
-          audioSampleSource?.close();
-        });
-        output.addAudioTrack(audioSampleSource);
-      }
-      await output.start();
-      if (signal?.aborted) {
-        throw new Error("renderMediaOnWeb() was cancelled");
-      }
-      const progress = {
-        renderedFrames: 0,
-        encodedFrames: 0
-      };
-      const throttledOnProgress = createThrottledProgressCallback(onProgress);
-      for (let frame = realFrameRange[0];frame <= realFrameRange[1]; frame++) {
+      let __stack = [];
+      try {
         if (signal?.aborted) {
           throw new Error("renderMediaOnWeb() was cancelled");
         }
-        timeUpdater.current?.update(frame);
         await waitForReady({
           timeoutInMilliseconds: delayRenderTimeoutInMilliseconds,
           scope: delayRenderScope,
@@ -3528,102 +3511,144 @@ var internalRenderMediaOnWeb = async ({
         if (signal?.aborted) {
           throw new Error("renderMediaOnWeb() was cancelled");
         }
-        const createFrameStart = performance.now();
-        const imageData = await createFrame({
-          div,
-          width: resolved.width,
-          height: resolved.height,
-          logLevel,
-          internalState
-        });
-        internalState.addCreateFrameTime(performance.now() - createFrameStart);
+        const videoSampleSource = __using(__stack, makeVideoSampleSourceCleanup({
+          codec: codecToMediabunnyCodec(codec),
+          bitrate: typeof videoBitrate === "number" ? videoBitrate : getQualityForWebRendererQuality(videoBitrate),
+          sizeChangeBehavior: "deny",
+          hardwareAcceleration,
+          latencyMode: "quality",
+          keyFrameInterval: keyframeIntervalInSeconds,
+          alpha: transparent ? "keep" : "discard"
+        }), 0);
+        outputWithCleanup.output.addVideoTrack(videoSampleSource.videoSampleSource);
+        const audioSampleSource = __using(__stack, await addAudioSampleSource({
+          muted,
+          output: outputWithCleanup.output
+        }), 0);
+        await outputWithCleanup.output.start();
         if (signal?.aborted) {
           throw new Error("renderMediaOnWeb() was cancelled");
         }
-        const timestamp = Math.round((frame - realFrameRange[0]) / resolved.fps * 1e6);
-        const videoFrame = new VideoFrame(imageData, {
-          timestamp
-        });
-        progress.renderedFrames++;
-        throttledOnProgress?.({ ...progress });
-        let frameToEncode = videoFrame;
-        if (onFrame) {
-          const returnedFrame = await onFrame(videoFrame);
+        const progress = {
+          renderedFrames: 0,
+          encodedFrames: 0
+        };
+        const throttledOnProgress = createThrottledProgressCallback(onProgress);
+        for (let frame = realFrameRange[0];frame <= realFrameRange[1]; frame++) {
           if (signal?.aborted) {
             throw new Error("renderMediaOnWeb() was cancelled");
           }
-          frameToEncode = validateVideoFrame({
-            originalFrame: videoFrame,
-            returnedFrame,
-            expectedWidth: resolved.width,
-            expectedHeight: resolved.height,
-            expectedTimestamp: timestamp
+          timeUpdater.current?.update(frame);
+          await waitForReady({
+            timeoutInMilliseconds: delayRenderTimeoutInMilliseconds,
+            scope: delayRenderScope,
+            signal,
+            apiName: "renderMediaOnWeb",
+            internalState
           });
-        }
-        const audioCombineStart = performance.now();
-        const assets = collectAssets.current.collectAssets();
-        if (onArtifact) {
-          await artifactsHandler.handle({
-            imageData,
-            frame,
-            assets,
-            onArtifact
+          if (signal?.aborted) {
+            throw new Error("renderMediaOnWeb() was cancelled");
+          }
+          const createFrameStart = performance.now();
+          const imageData = await createFrame({
+            div,
+            width: resolved.width,
+            height: resolved.height,
+            logLevel,
+            internalState
+          });
+          internalState.addCreateFrameTime(performance.now() - createFrameStart);
+          if (signal?.aborted) {
+            throw new Error("renderMediaOnWeb() was cancelled");
+          }
+          const timestamp = Math.round((frame - realFrameRange[0]) / resolved.fps * 1e6);
+          const videoFrame = new VideoFrame(imageData, {
+            timestamp
           });
+          progress.renderedFrames++;
+          throttledOnProgress?.({ ...progress });
+          let frameToEncode = videoFrame;
+          if (onFrame) {
+            const returnedFrame = await onFrame(videoFrame);
+            if (signal?.aborted) {
+              throw new Error("renderMediaOnWeb() was cancelled");
+            }
+            frameToEncode = validateVideoFrame({
+              originalFrame: videoFrame,
+              returnedFrame,
+              expectedWidth: resolved.width,
+              expectedHeight: resolved.height,
+              expectedTimestamp: timestamp
+            });
+          }
+          const audioCombineStart = performance.now();
+          const assets = collectAssets.current.collectAssets();
+          if (onArtifact) {
+            await artifactsHandler.handle({
+              imageData,
+              frame,
+              assets,
+              onArtifact
+            });
+          }
+          if (signal?.aborted) {
+            throw new Error("renderMediaOnWeb() was cancelled");
+          }
+          const audio = muted ? null : onlyInlineAudio({ assets, fps: resolved.fps, frame });
+          internalState.addAudioMixingTime(performance.now() - audioCombineStart);
+          const addSampleStart = performance.now();
+          await Promise.all([
+            addVideoSampleAndCloseFrame(frameToEncode, videoSampleSource.videoSampleSource),
+            audio && audioSampleSource ? addAudioSample(audio, audioSampleSource.audioSampleSource) : Promise.resolve()
+          ]);
+          internalState.addAddSampleTime(performance.now() - addSampleStart);
+          progress.encodedFrames++;
+          throttledOnProgress?.({ ...progress });
+          if (signal?.aborted) {
+            throw new Error("renderMediaOnWeb() was cancelled");
+          }
         }
-        if (signal?.aborted) {
-          throw new Error("renderMediaOnWeb() was cancelled");
+        onProgress?.({ ...progress });
+        videoSampleSource.videoSampleSource.close();
+        audioSampleSource?.audioSampleSource.close();
+        await outputWithCleanup.output.finalize();
+        Internals7.Log.verbose({ logLevel, tag: "web-renderer" }, `Render timings: waitForReady=${internalState.getWaitForReadyTime().toFixed(2)}ms, createFrame=${internalState.getCreateFrameTime().toFixed(2)}ms, addSample=${internalState.getAddSampleTime().toFixed(2)}ms, audioMixing=${internalState.getAudioMixingTime().toFixed(2)}ms`);
+        if (webFsTarget) {
+          sendUsageEvent({
+            licenseKey: licenseKey ?? null,
+            succeeded: true,
+            apiName: "renderMediaOnWeb"
+          });
+          await webFsTarget.close();
+          return {
+            getBlob: () => {
+              return webFsTarget.getBlob();
+            },
+            internalState
+          };
         }
-        const audio = muted ? null : onlyInlineAudio({ assets, fps: resolved.fps, frame });
-        internalState.addAudioMixingTime(performance.now() - audioCombineStart);
-        const addSampleStart = performance.now();
-        await Promise.all([
-          addVideoSampleAndCloseFrame(frameToEncode, videoSampleSource),
-          audio && audioSampleSource ? addAudioSample(audio, audioSampleSource) : Promise.resolve()
-        ]);
-        internalState.addAddSampleTime(performance.now() - addSampleStart);
-        progress.encodedFrames++;
-        throttledOnProgress?.({ ...progress });
-        if (signal?.aborted) {
-          throw new Error("renderMediaOnWeb() was cancelled");
+        if (!(target instanceof BufferTarget)) {
+          throw new Error("Expected target to be a BufferTarget");
         }
-      }
-      onProgress?.({ ...progress });
-      videoSampleSource.close();
-      audioSampleSource?.close();
-      await output.finalize();
-      Internals7.Log.verbose({ logLevel, tag: "web-renderer" }, `Render timings: waitForReady=${internalState.getWaitForReadyTime().toFixed(2)}ms, createFrame=${internalState.getCreateFrameTime().toFixed(2)}ms, addSample=${internalState.getAddSampleTime().toFixed(2)}ms, audioMixing=${internalState.getAudioMixingTime().toFixed(2)}ms`);
-      const mimeType = getMimeType(container);
-      if (webFsTarget) {
         sendUsageEvent({
           licenseKey: licenseKey ?? null,
           succeeded: true,
           apiName: "renderMediaOnWeb"
         });
-        await webFsTarget.close();
         return {
           getBlob: () => {
-            return webFsTarget.getBlob();
+            if (!target.buffer) {
+              throw new Error("The resulting buffer is empty");
+            }
+            return Promise.resolve(new Blob([target.buffer], { type: getMimeType(container) }));
           },
           internalState
         };
+      } catch (_catch) {
+        var _err = _catch, _hasErr = 1;
+      } finally {
+        __callDispose(__stack, _err, _hasErr);
       }
-      if (!(target instanceof BufferTarget)) {
-        throw new Error("Expected target to be a BufferTarget");
-      }
-      sendUsageEvent({
-        licenseKey: licenseKey ?? null,
-        succeeded: true,
-        apiName: "renderMediaOnWeb"
-      });
-      return {
-        getBlob: () => {
-          if (!target.buffer) {
-            throw new Error("The resulting buffer is empty");
-          }
-          return Promise.resolve(new Blob([target.buffer], { type: mimeType }));
-        },
-        internalState
-      };
     } catch (err) {
       if (!signal?.aborted) {
         sendUsageEvent({
@@ -3635,13 +3660,11 @@ var internalRenderMediaOnWeb = async ({
         });
       }
       throw err;
-    } finally {
-      cleanupFns.forEach((fn) => fn());
     }
-  } catch (_catch) {
-    var _err = _catch, _hasErr = 1;
+  } catch (_catch2) {
+    var _err2 = _catch2, _hasErr2 = 1;
   } finally {
-    __callDispose(__stack, _err, _hasErr);
+    __callDispose(__stack2, _err2, _hasErr2);
   }
 };
 var renderMediaOnWeb = (options) => {

package/dist/get-audio-sample-source.d.ts

@@ -0,0 +1,8 @@
+import { AudioSampleSource, type BufferTarget, type Output, type OutputFormat, type StreamTarget } from 'mediabunny';
+export declare const addAudioSampleSource: ({ muted, output, }: {
+    muted: boolean;
+    output: Output<OutputFormat, BufferTarget | StreamTarget>;
+}) => Promise<{
+    audioSampleSource: AudioSampleSource;
+    [Symbol.dispose]: () => void;
+} | null>;

package/dist/mediabunny-cleanups.d.ts

@@ -0,0 +1,10 @@
+import type { OutputFormat, OutputOptions, Target, VideoEncodingConfig } from 'mediabunny';
+import { Output, VideoSampleSource } from 'mediabunny';
+export declare const makeOutputWithCleanup: <T extends OutputFormat, U extends Target>(options: OutputOptions<T, U>) => {
+    output: Output<T, U>;
+    [Symbol.dispose]: () => void;
+};
+export declare const makeVideoSampleSourceCleanup: (encodingConfig: VideoEncodingConfig) => {
+    videoSampleSource: VideoSampleSource;
+    [Symbol.dispose]: () => void;
+};

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/web-renderer"
 	},
 	"name": "@remotion/web-renderer",
-	"version": "4.0.400",
+	"version": "4.0.401",
 	"main": "dist/index.js",
 	"type": "module",
 	"sideEffects": false,
@@ -18,14 +18,14 @@
 	"author": "Remotion <jonny@remotion.dev>",
 	"license": "UNLICENSED",
 	"dependencies": {
-		"@remotion/licensing": "4.0.400",
-		"remotion": "4.0.400",
+		"@remotion/licensing": "4.0.401",
+		"remotion": "4.0.401",
 		"mediabunny": "1.27.3"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.400",
-		"@remotion/player": "4.0.400",
-		"@remotion/media": "4.0.400",
+		"@remotion/eslint-config-internal": "4.0.401",
+		"@remotion/player": "4.0.401",
+		"@remotion/media": "4.0.401",
 		"@typescript/native-preview": "7.0.0-dev.20260105.1",
 		"@vitejs/plugin-react": "4.1.0",
 		"@vitest/browser-playwright": "4.0.9",