Skip to main content

触发工件v4.0.176

🌐 Emitting Artifactsv4.0.176

有时你希望在渲染视频时生成额外的文件。例如：

🌐 Sometimes you wish to generate additional files when rendering your video. For example:

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

你可以使用 <Artifact> 组件从你的视频中导出任意文件。

🌐 You can use the <Artifact> component to emit arbitrary files from your video.

note

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

示例​

🌐 Example

MyComp.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}</>;
};

神器规则​

🌐 Rules of artifacts

该资源应仅在视频的单一帧中渲染。否则，该资源将被多次发出。

可以发出多个资源，但它们的文件名可能不相同。

对于 content 属性，可以传入 string，或者用于二进制数据的 Uint8Array。传入 Uint8Array 不应被认为更快，因为它需要被序列化。

正在生成缩略图v4.0.290​

🌐 Emitting thumbnailsv4.0.290

你可以将当前帧的图片数据作为工件输出。

🌐 You can emit the image data of the current frame as an artifact.

Emitting the first frame as a thumbnail
import {Artifact, useCurrentFrame} from 'remotion';

export const MyComp: React.FC = () => {
  const frame = useCurrentFrame();
  return <>{frame === 0 ? <Artifact content={Artifact.Thumbnail} filename="thumbnail.jpeg" /> : null}</>;
};

应将content属性设置为Artifact.Thumbnail。

imageFormat 设置决定了图片的格式。你传入的扩展名没有意义。

文物的其他规则仍然适用。

接收物品​

🌐 Receiving artifacts

在命令行接口或工作室中​

🌐 In the CLI or Studio

在渲染视频时，工件会保存到 out/[composition-id]/[filename]。

🌐 Artifacts get saved to out/[composition-id]/[filename] when rendering a video.

使用 renderMedia()、renderStill() 或 renderFrames()​

🌐 Using renderMedia(), renderStill() or renderFrames()

使用 onArtifact 回调来接收工件。

🌐 Use the onArtifact callback to receive the artifacts.

render.mjs
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,
});

使用 renderMediaOnWeb() 或 renderStillOnWeb()​

🌐 Using renderMediaOnWeb() or renderStillOnWeb()

使用 onArtifact 回调在使用 renderMediaOnWeb() 渲染时接收产物。

🌐 Use the onArtifact callback to receive artifacts when rendering using renderMediaOnWeb().

Receiving artifacts with renderMediaOnWeb()
const MyComp: React.FC = () => {
  const frame = useCurrentFrame();
  return <>{frame === 0 && <Artifact filename="metadata.json" content={JSON.stringify({title: 'My Video'})} />}</>;
};

const artifacts: EmittedArtifact[] = [];

await renderMediaOnWeb({
  composition: {
    ...composition,
    component: MyComp,
  },
  onArtifact: (artifact) => {
    console.log(artifact.filename); // string
    console.log(artifact.content); // string | Uint8Array
    console.log(artifact.frame); // number
    artifacts.push(artifact);
  },
});

同样的回调可用于 renderStillOnWeb()：

🌐 The same callback is available for renderStillOnWeb():

Receiving artifacts with renderStillOnWeb()

const MyComp: React.FC = () => {
  return <Artifact filename="thumbnail.png" content={Artifact.Thumbnail} />;
};

const artifacts: EmittedArtifact[] = [];

await renderStillOnWeb({
  composition: {
    ...composition,
    component: MyComp,
  },
  frame: 0,
  imageFormat: 'png',
  onArtifact: (artifact) => {
    artifacts.push(artifact);
  },
});

使用 Remotion Lambda CLI​

🌐 Using the Remotion Lambda CLI

使用 npx remotion lambda render 或 npx remotion lambda still 时，工件会保存到 S3 存储桶中的键 renders/[render-id]/artifacts/[filename] 下。

🌐 When using npx remotion lambda render or npx remotion lambda still, artifacts get saved to the S3 bucket under the key renders/[render-id]/artifacts/[filename].

它们将被记录到控制台，你可以点击它们来下载。 --privacy 选项也适用于工件。

🌐 They will get logged to the console and you can click them to download them.
The --privacy option also applies to artifacts.

使用 renderMediaOnLambda()​

🌐 Using renderMediaOnLambda()

使用 renderMediaOnLambda() 时，工件会保存到 S3 存储桶中，键为 renders/[render-id]/artifacts/[filename]。

🌐 When using renderMediaOnLambda(), artifacts get saved to the S3 bucket under the key renders/[render-id]/artifacts/[filename].

你可以从 getRenderProgress() 获取当前接收资源的列表。

🌐 You can obtain a list of currently received assets from getRenderProgress().

progress.ts
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()​

🌐 Using renderStillOnLambda()

使用 renderStillOnLambda() 时，工件会保存到 S3 存储桶中，键为 renders/[render-id]/artifacts/[filename]。

🌐 When using renderStillOnLambda(), artifacts get saved to the S3 bucket under the key renders/[render-id]/artifacts/[filename].

你可以从 renderStillOnLambda() 的 artifacts 字段获取已接收资源的列表。

🌐 You can obtain a list of received assets from artifacts field of renderStillOnLambda().

still.ts
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​

🌐 Using Cloud Run

在 Cloud Run Alpha 中，不支持发出工件，并且会抛出错误。 我们计划在未来修改 Cloud Run，以使用与 Lambda 相同的运行时，并将引入此功能。

🌐 In the Cloud Run Alpha, emitting artifacts is not supported and will throw an error.
We plan on revising Cloud Run to use the same runtime as Lambda in the future and will bring this feature along.

另请参阅​

🌐 See also

Last updated on