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 render 或 npx 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 相同的运行时，并将带来此功能。

另请参阅​