@remotion/web-renderer 4.0.382 → 4.0.384

package/dist/get-audio-encoding-config.d.ts

@@ -0,0 +1,2 @@
+import { type AudioEncodingConfig } from 'mediabunny';
+export declare const getDefaultAudioEncodingConfig: () => Promise<AudioEncodingConfig | null>;

package/dist/get-audio-encoding-config.js

@@ -0,0 +1,18 @@
+import { canEncodeAudio, QUALITY_MEDIUM, } from 'mediabunny';
+export const getDefaultAudioEncodingConfig = async () => {
+    const preferredDefaultAudioEncodingConfig = {
+        codec: 'aac',
+        bitrate: QUALITY_MEDIUM,
+    };
+    if (await canEncodeAudio(preferredDefaultAudioEncodingConfig.codec, preferredDefaultAudioEncodingConfig)) {
+        return preferredDefaultAudioEncodingConfig;
+    }
+    const backupDefaultAudioEncodingConfig = {
+        codec: 'opus',
+        bitrate: QUALITY_MEDIUM,
+    };
+    if (await canEncodeAudio(backupDefaultAudioEncodingConfig.codec, backupDefaultAudioEncodingConfig)) {
+        return backupDefaultAudioEncodingConfig;
+    }
+    return null;
+};

package/dist/render-media-on-web.js

@@ -1,8 +1,11 @@
-import { BufferTarget, Output, VideoSample, VideoSampleSource } from 'mediabunny';
+import { AudioSampleSource, BufferTarget, Output, VideoSampleSource, } from 'mediabunny';
 import { Internals } from 'remotion';
+import { addAudioSample, addVideoSampleAndCloseFrame } from './add-sample';
 import { handleArtifacts } from './artifact';
+import { onlyInlineAudio } from './audio';
 import { createScaffold } from './create-scaffold';
 import { getRealFrameRange } from './frame-range';
+import { getDefaultAudioEncodingConfig } from './get-audio-encoding-config';
 import { codecToMediabunnyCodec, containerToMediabunnyContainer, getDefaultVideoCodecForContainer, getQualityForWebRendererQuality, } from './mediabunny-mappings';
 import { createFrame } from './take-screenshot';
 import { createThrottledProgressCallback } from './throttle-progress';
@@ -55,10 +58,7 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
         defaultCodec: resolved.defaultCodec,
         defaultOutName: resolved.defaultOutName,
     });
-    const artifactsHandler = handleArtifacts({
-        ref: collectAssets,
-        onArtifact,
-    });
+    const artifactsHandler = handleArtifacts();
     cleanupFns.push(() => {
         cleanupScaffold();
     });
@@ -100,6 +100,16 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
             videoSampleSource.close();
         });
         output.addVideoTrack(videoSampleSource);
+        // TODO: Should be able to customize
+        const defaultAudioEncodingConfig = await getDefaultAudioEncodingConfig();
+        if (!defaultAudioEncodingConfig) {
+            return Promise.reject(new Error('No default audio encoding config found'));
+        }
+        const audioSampleSource = new AudioSampleSource(defaultAudioEncodingConfig);
+        cleanupFns.push(() => {
+            audioSampleSource.close();
+        });
+        output.addAudioTrack(audioSampleSource);
         await output.start();
         if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
             throw new Error('renderMediaOnWeb() was cancelled');
@@ -125,7 +135,16 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
                 width: resolved.width,
                 height: resolved.height,
             });
-            await artifactsHandler.handle({ imageData, frame: i });
+            const assets = collectAssets.current.collectAssets();
+            if (onArtifact) {
+                await artifactsHandler.handle({
+                    imageData,
+                    frame: i,
+                    assets,
+                    onArtifact,
+                });
+            }
+            const audio = onlyInlineAudio(assets);
             if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
                 throw new Error('renderMediaOnWeb() was cancelled');
             }
@@ -147,10 +166,12 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
                     expectedTimestamp: timestamp,
                 });
             }
-            await videoSampleSource.add(new VideoSample(frameToEncode));
+            await Promise.all([
+                addVideoSampleAndCloseFrame(frameToEncode, videoSampleSource),
+                audio ? addAudioSample(audio, audioSampleSource) : Promise.resolve(),
+            ]);
             progress.encodedFrames++;
             throttledOnProgress === null || throttledOnProgress === void 0 ? void 0 : throttledOnProgress({ ...progress });
-            frameToEncode.close();
             if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
                 throw new Error('renderMediaOnWeb() was cancelled');
             }
@@ -158,6 +179,7 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
         // Call progress one final time to ensure final state is reported
         onProgress === null || onProgress === void 0 ? void 0 : onProgress({ ...progress });
         videoSampleSource.close();
+        audioSampleSource.close();
         await output.finalize();
         return output.target.buffer;
     }

package/dist/render-still-on-web.js

@@ -37,10 +37,7 @@ async function internalRenderStillOnWeb({ frame, delayRenderTimeoutInMillisecond
         defaultCodec: resolved.defaultCodec,
         defaultOutName: resolved.defaultOutName,
     });
-    const artifactsHandler = handleArtifacts({
-        ref: collectAssets,
-        onArtifact,
-    });
+    const artifactsHandler = handleArtifacts();
     try {
         if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
             throw new Error('renderStillOnWeb() was cancelled');
@@ -60,7 +57,10 @@ async function internalRenderStillOnWeb({ frame, delayRenderTimeoutInMillisecond
             height: resolved.height,
             imageFormat,
         });
-        await artifactsHandler.handle({ imageData, frame });
+        const assets = collectAssets.current.collectAssets();
+        if (onArtifact) {
+            await artifactsHandler.handle({ imageData, frame, assets, onArtifact });
+        }
         return imageData;
     }
     finally {

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.382",
+	"version": "4.0.384",
 	"main": "dist/index.js",
 	"sideEffects": false,
 	"scripts": {
@@ -16,14 +16,14 @@
 	"author": "Remotion <jonny@remotion.dev>",
 	"license": "UNLICENSED",
 	"dependencies": {
-		"remotion": "4.0.382",
-		"mediabunny": "1.25.3"
+		"remotion": "4.0.384",
+		"mediabunny": "1.25.8"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.382",
-		"@remotion/player": "4.0.382",
-		"@remotion/media": "4.0.382",
-		"@vitejs/plugin-react": "^5.1.0",
+		"@remotion/eslint-config-internal": "4.0.384",
+		"@remotion/player": "4.0.384",
+		"@remotion/media": "4.0.384",
+		"@vitejs/plugin-react": "4.1.0",
 		"@vitest/browser-playwright": "4.0.9",
 		"playwright": "1.55.1",
 		"eslint": "9.19.0",