Skip to main content

发出工件v4.0.176

有时候在渲染视频时,您希望生成额外的文件。例如:

  • 一个 .srt 字幕文件
  • 一个包含视频章节的 .txt 文件
  • 一个用于视频中使用的资产的 CREDITS 文件
  • 渲染中的调试信息

您可以使用 <Artifact> 组件来从您的视频中发出任意文件。

note

目前 @remotion/cloudrun 不支持发出工件。

示例

MyComp.tsx
tsx
import React from 'react';
import {Artifact, useCurrentFrame} from 'remotion';
import {generateSubtitles} from './subtitles';
 
export const MyComp: React.FC = () => {
const frame = useCurrentFrame();
return (
<>
{frame === 0 ? (
<Artifact filename="captions.srt" content={generateSubtitles()} />
) : null}
</>
);
};
MyComp.tsx
tsx
import React from 'react';
import {Artifact, useCurrentFrame} from 'remotion';
import {generateSubtitles} from './subtitles';
 
export const MyComp: React.FC = () => {
const frame = useCurrentFrame();
return (
<>
{frame === 0 ? (
<Artifact filename="captions.srt" content={generateSubtitles()} />
) : null}
</>
);
};

工件规则

资产应该仅在视频的一个单独帧中渲染。 否则,该资产将被发出多次。

可以发出多个资产,但它们可能不具有相同的文件名。

对于 content 属性,可以传递一个 string,或者一个 Uint8Array 用于二进制数据。传递一个 Uint8Array 不应被认为更快,因为它必须被序列化。


接收工件

在 CLI 或 Studio 中

在渲染视频时,工件将保存到 out/[composition-id]/[filename]

使用 renderMedia()renderStill()renderFrames()

使用 onArtifact 回调来接收工件。

render.mjs
tsx
import {renderMedia, OnArtifact} from '@remotion/renderer';
 
const onArtifact: OnArtifact = (artifact) => {
console.log(artifact.filename); // string
console.log(artifact.content); // string | Uint8Array
console.log(artifact.frame); // number, frame in the composition which emitted this
 
// Example action: Write the artifact to disk
fs.writeFileSync(artifact.filename, artifact.content);
};
 
await renderMedia({
composition,
serveUrl,
onArtifact,
codec: 'h264',
inputProps,
});
render.mjs
tsx
import {renderMedia, OnArtifact} from '@remotion/renderer';
 
const onArtifact: OnArtifact = (artifact) => {
console.log(artifact.filename); // string
console.log(artifact.content); // string | Uint8Array
console.log(artifact.frame); // number, frame in the composition which emitted this
 
// Example action: Write the artifact to disk
fs.writeFileSync(artifact.filename, artifact.content);
};
 
await renderMedia({
composition,
serveUrl,
onArtifact,
codec: 'h264',
inputProps,
});

使用 Remotion Lambda CLI

当使用 npx remotion lambda rendernpx remotion lambda still 时,工件将保存到 S3 存储桶中的键 renders/[render-id]/artifacts/[filename]

它们将被记录到控制台,并且您可以单击它们来下载。
--privacy 选项也适用于工件。

使用 renderMediaOnLambda()

当使用 renderMediaOnLambda() 时,工件将保存到 S3 存储桶中的键 renders/[render-id]/artifacts/[filename]

您可以从getRenderProgress()获取当前接收到的资产列表。

progress.ts
tsx
import {getRenderProgress} from '@remotion/lambda/client';
 
const renderProgress = await getRenderProgress({
renderId: 'hi',
functionName: 'hi',
bucketName: 'hi',
region: 'eu-central-1',
});
 
for (const artifact of renderProgress.artifacts) {
console.log(artifact.filename); // "hello-world.txt"
console.log(artifact.sizeInBytes); // 12
console.log(artifact.s3Url); // "https://s3.eu-central-1.amazonaws.com/remotion-lambda-abcdef/renders/abcdef/artifacts/hello-world.txt"
console.log(artifact.s3Key); // "renders/abcdef/artifacts/hello-world.txt"
}
progress.ts
tsx
import {getRenderProgress} from '@remotion/lambda/client';
 
const renderProgress = await getRenderProgress({
renderId: 'hi',
functionName: 'hi',
bucketName: 'hi',
region: 'eu-central-1',
});
 
for (const artifact of renderProgress.artifacts) {
console.log(artifact.filename); // "hello-world.txt"
console.log(artifact.sizeInBytes); // 12
console.log(artifact.s3Url); // "https://s3.eu-central-1.amazonaws.com/remotion-lambda-abcdef/renders/abcdef/artifacts/hello-world.txt"
console.log(artifact.s3Key); // "renders/abcdef/artifacts/hello-world.txt"
}

使用 renderStillOnLambda()

当使用renderStillOnLambda()时,资产将保存到 S3 存储桶中的键为 renders/[render-id]/artifacts/[filename]

您可以从renderStillOnLambda()artifacts字段中获取已接收资产的列表。

still.ts
tsx
import {renderStillOnLambda} from '@remotion/lambda/client';
 
const stillResponse = await renderStillOnLambda({
functionName,
region,
serveUrl,
composition,
inputProps,
imageFormat,
privacy,
});
 
for (const artifact of stillResponse.artifacts) {
console.log(artifact.filename); // "hello-world.txt"
console.log(artifact.sizeInBytes); // 12
console.log(artifact.s3Url); // "https://s3.eu-central-1.amazonaws.com/remotion-lambda-abcdef/renders/abcdef/artifacts/hello-world.txt"
console.log(artifact.s3Key); // "renders/abcdef/artifacts/hello-world.txt"
}
still.ts
tsx
import {renderStillOnLambda} from '@remotion/lambda/client';
 
const stillResponse = await renderStillOnLambda({
functionName,
region,
serveUrl,
composition,
inputProps,
imageFormat,
privacy,
});
 
for (const artifact of stillResponse.artifacts) {
console.log(artifact.filename); // "hello-world.txt"
console.log(artifact.sizeInBytes); // 12
console.log(artifact.s3Url); // "https://s3.eu-central-1.amazonaws.com/remotion-lambda-abcdef/renders/abcdef/artifacts/hello-world.txt"
console.log(artifact.s3Key); // "renders/abcdef/artifacts/hello-world.txt"
}

使用 Cloud Run

在 Cloud Run Alpha 中,不支持发出资产并将引发错误。
我们计划在未来修改 Cloud Run 以使用与 Lambda 相同的运行时,并将带来此功能。

另请参阅