remotion: <Artifact> API

package.json

@@ -21,7 +21,7 @@
   },
   "pnpm": {
     "overrides": {
-      "caniuse-lite": "1.0.30001577"
+      "caniuse-lite": "1.0.30001636"
     }
   },
   "devDependencies": {

packages/cli/src/benchmark.ts

@@ -489,6 +489,7 @@ export const benchmarkCommand = async (
 						}).value,
 					compositionStart: 0,
 					onBrowserDownload,
+					onArtifact: () => undefined,
 				},
 				(run, progress) => {
 					benchmarkProgress.update(

packages/cli/src/on-artifact.ts

@@ -0,0 +1,51 @@
+import type {OnArtifact} from '@remotion/renderer';
+import type {ArtifactProgress} from '@remotion/studio-shared';
+import {existsSync, mkdirSync, writeFileSync} from 'fs';
+import path from 'path';
+
+export const handleOnArtifact = ({
+	artifactState,
+	onProgress,
+	compositionId,
+}: {
+	artifactState: ArtifactProgress;
+	onProgress: (artifact: ArtifactProgress) => void;
+	compositionId: string;
+}) => {
+	const initialProgress = {...artifactState};
+
+	const onArtifact: OnArtifact = (artifact) => {
+		// It would be nice in the future to customize the artifact output destination
+
+		const relativeOutputDestination = path.join(
+			'out',
+			compositionId,
+			artifact.filename.replace('/', path.sep),
+		);
+		const defaultOutName = path.join(process.cwd(), relativeOutputDestination);
+
+		if (!existsSync(path.dirname(defaultOutName))) {
+			mkdirSync(path.dirname(defaultOutName), {
+				recursive: true,
+			});
+		}
+
+		const alreadyExisted = existsSync(defaultOutName);
+
+		writeFileSync(defaultOutName, artifact.content);
+
+		initialProgress.received.push({
+			absoluteOutputDestination: defaultOutName,
+			filename: artifact.filename,
+			sizeInBytes: artifact.content.length,
+			alreadyExisted,
+			relativeOutputDestination,
+		});
+	};
+
+	onProgress(initialProgress);
+
+	return {
+		onArtifact,
+	};
+};

packages/cli/src/progress-bar.ts

@@ -8,6 +8,7 @@ import type {
 	StitchingProgressInput,
 } from '@remotion/studio-server';
 import {StudioServerInternals} from '@remotion/studio-server';
+import {formatBytes, type ArtifactProgress} from '@remotion/studio-shared';
 import {chalk} from './chalk';
 import {
 	getFileSizeDownloadBar,
@@ -192,6 +193,30 @@ const makeRenderingProgress = ({
 		.join(' ');
 };
 
+const makeArtifactProgress = (artifactState: ArtifactProgress) => {
+	const {received} = artifactState;
+	if (received.length === 0) {
+		return null;
+	}
+
+	return received
+		.map((artifact) => {
+			return [
+				chalk.blue((artifact.alreadyExisted ? '○' : '+').padEnd(LABEL_WIDTH)),
+				chalk.blue(
+					makeHyperlink({
+						url: 'file://' + artifact.absoluteOutputDestination,
+						fallback: artifact.absoluteOutputDestination,
+						text: artifact.relativeOutputDestination,
+					}),
+				),
+				chalk.gray(`${formatBytes(artifact.sizeInBytes)}`),
+			].join(' ');
+		})
+		.filter(truthy)
+		.join('\n');
+};
+
 export const getRightLabelWidth = (totalFrames: number) => {
 	return `${totalFrames}/${totalFrames}`.length;
 };
@@ -237,7 +262,7 @@ export const makeRenderingAndStitchingProgress = ({
 	progress: number;
 	message: string;
 } => {
-	const {rendering, stitching, downloads, bundling} = prog;
+	const {rendering, stitching, downloads, bundling, artifactState} = prog;
 	const output = [
 		rendering ? makeRenderingProgress(rendering) : null,
 		makeMultiDownloadProgress(downloads, rendering?.totalFrames ?? 0),
@@ -247,6 +272,7 @@ export const makeRenderingAndStitchingProgress = ({
 					stitchingProgress: stitching,
 					isUsingParallelEncoding,
 				}),
+		makeArtifactProgress(artifactState),
 	]
 		.filter(truthy)
 		.join('\n');

packages/cli/src/progress-types.ts

@@ -12,4 +12,7 @@ export const initialAggregateRenderProgress = (): AggregateRenderProgress => ({
 		bytes: 0,
 		doneIn: null,
 	},
+	artifactState: {
+		received: [],
+	},
 });

packages/cli/src/render-flows/render.ts

@@ -28,6 +28,7 @@ import type {
 	RenderingProgressInput,
 	StitchingProgressInput,
 } from '@remotion/studio-server';
+import type {ArtifactProgress} from '@remotion/studio-shared';
 import fs, {existsSync} from 'node:fs';
 import os from 'node:os';
 import path from 'node:path';
@@ -42,6 +43,7 @@ import {makeHyperlink} from '../hyperlinks/make-link';
 import {getVideoImageFormat} from '../image-formats';
 import {Log} from '../log';
 import {makeOnDownload} from '../make-on-download';
+import {handleOnArtifact} from '../on-artifact';
 import {parsedCli, quietFlagProvided} from '../parsed-cli';
 import {
 	LABEL_WIDTH,
@@ -219,6 +221,8 @@ export const renderVideoFlow = async ({
 		doneIn: null,
 	};
 
+	let artifactState: ArtifactProgress = {received: []};
+
 	const updateRenderProgress = ({
 		newline,
 		printToConsole,
@@ -232,6 +236,7 @@ export const renderVideoFlow = async ({
 			downloads,
 			bundling: bundlingProgress,
 			copyingState,
+			artifactState,
 		};
 
 		const {output, message, progress} = makeRenderingAndStitchingProgress({
@@ -322,6 +327,15 @@ export const renderVideoFlow = async ({
 			onBrowserDownload,
 		});
 
+	const {onArtifact} = handleOnArtifact({
+		artifactState,
+		onProgress: (progress) => {
+			artifactState = progress;
+			updateRenderProgress({newline: false, printToConsole: true});
+		},
+		compositionId,
+	});
+
 	const {value: codec, source: codecReason} =
 		BrowserSafeApis.options.videoCodecOption.getValue(
 			{
@@ -429,6 +443,7 @@ export const renderVideoFlow = async ({
 		codec: shouldOutputImageSequence ? undefined : codec,
 		uiImageFormat,
 	});
+
 	if (shouldOutputImageSequence) {
 		fs.mkdirSync(absoluteOutputFile, {
 			recursive: true,
@@ -491,6 +506,7 @@ export const renderVideoFlow = async ({
 			compositionStart: 0,
 			forSeamlessAacConcatenation,
 			onBrowserDownload,
+			onArtifact,
 		});
 
 		Log.info({indent, logLevel}, chalk.blue(`▶ ${absoluteOutputFile}`));
@@ -580,6 +596,7 @@ export const renderVideoFlow = async ({
 		forSeamlessAacConcatenation,
 		compositionStart: 0,
 		onBrowserDownload,
+		onArtifact,
 	});
 	if (!updatesDontOverwrite) {
 		updateRenderProgress({newline: true, printToConsole: true});

packages/cli/src/render-flows/still.ts

@@ -27,6 +27,7 @@ import {getCompositionWithDimensionOverride} from '../get-composition-with-dimen
 import {makeHyperlink} from '../hyperlinks/make-link';
 import {Log} from '../log';
 import {makeOnDownload} from '../make-on-download';
+import {handleOnArtifact} from '../on-artifact';
 import {parsedCli, quietFlagProvided} from '../parsed-cli';
 import type {OverwriteableCliOutput} from '../progress-bar';
 import {
@@ -124,15 +125,13 @@ export const renderStillFlow = async ({
 	const updateRenderProgress = ({
 		newline,
 		printToConsole,
-		isUsingParallelEncoding,
 	}: {
 		newline: boolean;
 		printToConsole: boolean;
-		isUsingParallelEncoding: boolean;
 	}) => {
 		const {output, progress, message} = makeRenderingAndStitchingProgress({
 			prog: aggregate,
-			isUsingParallelEncoding,
+			isUsingParallelEncoding: false,
 		});
 		if (printToConsole) {
 			renderProgress.update(updatesDontOverwrite ? message : output, newline);
@@ -176,7 +175,6 @@ export const renderStillFlow = async ({
 				updateRenderProgress({
 					newline: false,
 					printToConsole: true,
-					isUsingParallelEncoding: false,
 				});
 			},
 			indentOutput: indent,
@@ -309,7 +307,6 @@ export const renderStillFlow = async ({
 	updateRenderProgress({
 		newline: false,
 		printToConsole: true,
-		isUsingParallelEncoding: false,
 	});
 
 	const onDownload: RenderMediaOnDownload = makeOnDownload({
@@ -321,6 +318,19 @@ export const renderStillFlow = async ({
 		isUsingParallelEncoding: false,
 	});
 
+	const {onArtifact} = handleOnArtifact({
+		artifactState: aggregate.artifactState,
+		compositionId,
+		onProgress: (progress) => {
+			aggregate.artifactState = progress;
+
+			updateRenderProgress({
+				newline: false,
+				printToConsole: true,
+			});
+		},
+	});
+
 	await RenderInternals.internalRenderStill({
 		composition: config,
 		frame: stillFrame,
@@ -352,6 +362,7 @@ export const renderStillFlow = async ({
 		offthreadVideoCacheSizeInBytes,
 		binariesDirectory,
 		onBrowserDownload,
+		onArtifact,
 	});
 
 	aggregate.rendering = {
@@ -363,7 +374,6 @@ export const renderStillFlow = async ({
 	updateRenderProgress({
 		newline: true,
 		printToConsole: true,
-		isUsingParallelEncoding: false,
 	});
 	Log.info(
 		{indent, logLevel},

packages/cloudrun/src/functions/render-media-single-thread.ts

@@ -1,6 +1,10 @@
 import type * as ff from '@google-cloud/functions-framework';
 import {Storage} from '@google-cloud/storage';
-import type {ChromiumOptions, RenderMediaOnProgress} from '@remotion/renderer';
+import type {
+	ChromiumOptions,
+	OnArtifact,
+	RenderMediaOnProgress,
+} from '@remotion/renderer';
 import {RenderInternals} from '@remotion/renderer';
 import {NoReactInternals} from 'remotion/no-react';
 import {VERSION} from 'remotion/version';
@@ -60,6 +64,10 @@ export const renderMediaSingleThread = async (
 			enableMultiProcessOnLinux: true,
 		};
 
+		const onArtifact: OnArtifact = () => {
+			throw new Error('Emitting artifacts is not supported in Cloud Run');
+		};
+
 		await RenderInternals.internalRenderMedia({
 			composition: {
 				...composition,
@@ -127,6 +135,7 @@ export const renderMediaSingleThread = async (
 			onBrowserDownload: () => {
 				throw new Error('Should not download a browser in Cloud Run');
 			},
+			onArtifact,
 		});
 
 		const storage = new Storage();

packages/cloudrun/src/functions/render-still-single-thread.ts

@@ -98,6 +98,9 @@ export const renderStillSingleThread = async (
 			onBrowserDownload: () => {
 				throw new Error('Should not download a browser in Cloud Run');
 			},
+			onArtifact: () => {
+				throw new Error('Emitting artifacts is not supported in Cloud Run');
+			},
 		});
 		Log.info({indent: false, logLevel: body.logLevel}, 'Still rendered');
 

packages/core/src/Artifact.tsx

@@ -0,0 +1,61 @@
+import type React from 'react';
+import {useContext, useEffect, useState} from 'react';
+import {RenderAssetManager} from './RenderAssetManager';
+import {getRemotionEnvironment} from './get-remotion-environment';
+import {useCurrentFrame} from './use-current-frame';
+
+export const Artifact: React.FC<{
+	readonly filename: string;
+	readonly content: string | Uint8Array;
+}> = ({filename, content}) => {
+	const {registerRenderAsset, unregisterRenderAsset} =
+		useContext(RenderAssetManager);
+
+	const [env] = useState(() => getRemotionEnvironment());
+
+	const frame = useCurrentFrame();
+
+	const [id] = useState(() => {
+		return String(Math.random());
+	});
+
+	useEffect(() => {
+		if (!env.isRendering) {
+			return;
+		}
+
+		if (content instanceof Uint8Array) {
+			registerRenderAsset({
+				type: 'artifact',
+				id,
+				content: btoa(new TextDecoder('utf8').decode(content)),
+				filename,
+				frame,
+				binary: true,
+			});
+		} else {
+			registerRenderAsset({
+				type: 'artifact',
+				id,
+				content,
+				filename,
+				frame,
+				binary: false,
+			});
+		}
+
+		return () => {
+			return unregisterRenderAsset(id);
+		};
+	}, [
+		content,
+		env.isRendering,
+		filename,
+		frame,
+		id,
+		registerRenderAsset,
+		unregisterRenderAsset,
+	]);
+
+	return null;
+};