Skip to main content

renderFrames()

@remotion/renderer 包的一部分。

使用 Puppeteer 渲染一系列图像，并计算混音音频的信息。

如果您只想渲染静态图像，请使用 renderStill()。

info

在 Remotion 3.0 中，我们添加了 renderMedia() API，它将 renderFrames() 和 stitchFramesToVideo() 结合为一个简化的步骤，并且执行渲染速度更快。如果可以的话，请优先使用 renderMedia()。

info

remotion.config.ts 中的配置和 CLI 标志不适用于此函数。您必须显式传递所有选项。

参数​

接受一个具有以下键的对象：

composition​

VideoConfig

描述使用 id、width、height、fps 和 durationInFrames、defaultProps 和 props 的合成的对象。
调用 selectComposition() 或 getCompositions() 来获取可能配置的数组。

onStart​

一旦渲染器准备好开始渲染并计算要渲染的帧数，将调用的回调函数：

tsx
import {OnStartData} from '@remotion/renderer';
 
const onStart = ({
  frameCount,
  parallelEncoding, // available from v4.0.52
  resolvedConcurrency, // available from v4.0.180
}: OnStartData) => {
  console.log(`Beginning to render ${frameCount}.`);
 
  if (parallelEncoding) {
    console.log('Parallel encoding is enabled.');
  }
 
  console.log(`Using concurrency: ${resolvedConcurrency}`);
};
tsx
import {OnStartData} from '@remotion/renderer';
 
const onStart = ({
  frameCount,
  parallelEncoding, // available from v4.0.52
  resolvedConcurrency, // available from v4.0.180
}: OnStartData) => {
  console.log(`Beginning to render ${frameCount}.`);
 
  if (parallelEncoding) {
    console.log('Parallel encoding is enabled.');
  }
 
  console.log(`Using concurrency: ${resolvedConcurrency}`);
};

onFrameUpdate​

每当一帧完成渲染时调用的回调函数。传递一个参数，其中包含已渲染的帧数（不是已渲染帧的帧数）。

在 v3.0.0 中，添加了第二个参数：frame，返回刚刚渲染的帧数。

在 v3.2.30 中，添加了第三个参数：timeToRenderInMilliseconds，描述渲染该帧所花费的时间（以毫秒为单位）。

ts
const onFrameUpdate = (
  framesRendered: number,
  frame: number,
  timeToRenderInMilliseconds: number,
) => {
  console.log(`${framesRendered} frames rendered.`);
 
  // From v3.0.0
  console.log(`${frame} was just rendered.`);
 
  // From v3.2.30
  console.log(`It took ${timeToRenderInMilliseconds}ms to render that frame.`);
};
ts
const onFrameUpdate = (
  framesRendered: number,
  frame: number,
  timeToRenderInMilliseconds: number,
) => {
  console.log(`${framesRendered} frames rendered.`);
 
  // From v3.0.0
  console.log(`${frame} was just rendered.`);
 
  // From v3.2.30
  console.log(`It took ${timeToRenderInMilliseconds}ms to render that frame.`);
};

outputDir​

一个指定应将帧保存到的目录（绝对路径）的 string。将此选项传递为 null，并使用 onFrameBuffer 回调来获取帧的 Buffer，而不是将其写入任何位置。

inputProps​

传递给视频所选组合的输入属性。。
必须是一个 JSON 对象。
从根组件中，可以使用 getInputProps() 来读取这些属性。
您可以使用 calculateMetadata() 来转换输入属性。

serveUrl​

可以是 Webpack 捆绑包，也可以是指向捆绑的 Remotion 项目的 URL。调用 bundle() 来生成捆绑包。您可以传递文件位置，也可以将其部署为网站并传递 URL。

imageFormat​

自 v4.0 起可选 - 默认为 "jpeg"

  • 默认选择 jpeg，因为它是最快的。
  • 如果您希望图像序列具有 alpha 通道（用于透明度），请选择 png。
  • 如果您只想渲染音频，请选择 none。

concurrency?​

可选

一个 number，指定应同时启动多少个渲染进程，一个 string，指定要使用的 CPU 线程百分比，或 null，让 Remotion 根据主机机器的 CPU 自行决定。默认值是可用 CPU 线程的一半。

scale?v2.6.7​

number - 默认值: 1

按您传入的因子缩放输出帧。 例如，一个 1280x720px 的帧将在缩放因子为 1.5 的情况下变为 1920x1080px 的帧。像字体和 HTML 标记这样的矢量元素将以更多细节进行渲染。

jpegQuality?​

可选

设置生成的 JPEG 图像的质量。必须是介于 0 和 100 之间的整数。默认是由浏览器决定，当前默认值为 80。

仅当 imageFormat 为 'jpeg' 时才适用，否则此选项无效。

port?​

优先使用特定端口来提供 Remotion 项目。如果未指定，将使用随机端口。

frameRange?​

可选

指定要渲染的单个帧（传递一个 number）或一系列帧（传递一个元组 [number, number]）。通过传递 null（默认值），将渲染组合的所有帧。

mutedv3.2.1​

可选

禁用音频输出。此选项只能与视频编解码器一起设置，并且还应传递给stitchFramesToVideo()。

logLevel?v4.0.0​

One of verbose, info, warn, error.
Determines how much is being logged to the console.
verbose will also log console.log's from the browser.
Default info.

onArtifact?v4.0.176​

[处理由<Artifact>组件发出的工件](/docs/artifacts#using-rendermedia-renderstill-or-renderframes)。

puppeteerInstance?​

可选

已打开的 Puppeteer Browser 实例。使用openBrowser()创建一个新实例。在多个函数调用之间重用浏览器可以加快渲染过程。您负责自行打开和关闭浏览器。如果不指定此选项，将在最后打开并关闭一个新浏览器。

envVariables?v2.2.0​

可选

包含环境变量键值对的对象，这些变量将被注入到您的 Remotion 项目中，并且可以通过读取全局 process.env 对象来访问。

onBrowserLog?v3.0.0​

可选

在您的项目调用console.log或控制台的另一个方法时调用。浏览器日志有三个属性：

  • text：正在打印的消息
  • stackTrace：包含以下属性的对象数组：
    • url：记录日志的资源的 URL。
    • lineNumber：文件中调用日志的基于 0 的行号。
    • columnNumber：文件中调用日志的基于 0 的列号。
  • type：控制台方法之一 - log、debug、info、error、warning、dir、dirxml、table、trace、clear、startGroup、startGroupCollapsed、endGroup、assert、profile、profileEnd、count、timeEnd、verbose
tsx
renderFrames({
  onBrowserLog: (info) => {
    console.log(`${info.type}: ${info.text}`);
    console.log(
      info.stackTrace
        .map((stack) => {
          return `  ${stack.url}:${stack.lineNumber}:${stack.columnNumber}`;
        })
        .join('\n'),
    );
  },
});
tsx
renderFrames({
  onBrowserLog: (info) => {
    console.log(`${info.type}: ${info.text}`);
    console.log(
      info.stackTrace
        .map((stack) => {
          return `  ${stack.url}:${stack.lineNumber}:${stack.columnNumber}`;
        })
        .join('\n'),
    );
  },
});

browserExecutable?v3.0.11​

可选

定义应使用的浏览器可执行文件在磁盘上的绝对路径的字符串。默认情况下，Remotion 将尝试自动检测并下载一个可用的浏览器。如果定义了 puppeteerInstance，则它将优先于 browserExecutable。

cancelSignal?v3.0.15​

可选

一个令牌，允许取消渲染。参见：makeCancelSignal()

onFrameBuffer?v3.0.0​

可选

如果您将 outputDir 设置为 null，则将调用此方法，传递当前帧的缓冲区。这主要由 Remotion 内部使用以实现 renderMedia()，对最终用户的用处可能有限。

timeoutInMilliseconds?v2.6.3​

可选

描述一个帧可能需要多长时间来解析所有 delayRender() 调用，然后在渲染超时并失败之前。默认值：30000

everyNthFramev3.1.0​

可选

仅渲染每第 n 帧。例如，仅每第二帧，每第三帧等。仅用于渲染 GIF。点击此处了解更多详情。

chromiumOptions?v2.6.5​

可选

允许您设置某些 Chromium / Google Chrome 标志。参见：Chromium 标志.

note

Chromium 标志需要在浏览器启动时设置。如果您使用 puppeteerInstance 传递一个实例，则传递给 renderFrames() 的选项将不适用，而是传递给 openBrowser() 的标志。

disableWebSecurity?​

布尔值 - 默认为 false

这将主要禁用 CORS 和其他安全功能。

enableMultiProcessOnLinux?v4.0.42​

布尔值 - 默认为 true

Removes the --single-process flag that gets passed to Chromium on Linux by default. This will make the render faster because multiple processes can be used, but may cause issues with some Linux distributions or if window server libraries are missing.
Default: false until v4.0.136, then true from v4.0.137 on because newer Chrome versions don't allow rendering with the --single-process flag.
This flag will be removed in Remotion v5.0.

ignoreCertificateErrors?​

布尔值 - 默认为 false

导致无效的 SSL 证书（如自签名证书）被忽略。

headless?​

If disabled, the render will open an actual Chrome window where you can see the render happen. The default is headless mode.

gl?​

字符串

Changelog
  • From Remotion v2.6.7 until v3.0.7, the default for Remotion Lambda was swiftshader, but from v3.0.8 the default is swangle (Swiftshader on Angle) since Chrome 101 added support for it.
  • From Remotion v2.4.3 until v2.6.6, the default was angle, however it turns out to have a small memory leak that could crash long Remotion renders.

Select the OpenGL renderer backend for Chromium.
Accepted values:

  • "angle"
  • "egl"
  • "swiftshader"
  • "swangle"
  • "vulkan" (from Remotion v4.0.41)
  • "angle-egl" (from Remotion v4.0.51)

The default is null, letting Chrome decide, except on Lambda where the default is "swangle"

userAgent?v3.3.83​

允许您设置头less Chrome 浏览器所假定的自定义用户代理。

offthreadVideoCacheSizeInBytes?v4.0.23​

From v4.0, Remotion has a cache for <OffthreadVideo> frames. The default is null, corresponding to half of the system memory available when the render starts.
This option allows to override the size of the cache. The higher it is, the faster the render will be, but the more memory will be used.
The used value will be printed when running in verbose mode.
Default: null

binariesDirectory?v4.0.120​

The directory where the platform-specific binaries and libraries that Remotion needs are located. Those include an ffmpeg and ffprobe binary, a Rust binary for various tasks, and various shared libraries. If the value is set to null, which is the default, then the path of a platform-specific package located at node_modules/@remotion/compositor-* is selected.
This option is useful in environments where Remotion is not officially supported to run like bundled serverless functions or Electron.

onBrowserDownload?v4.0.137​

Gets called when no compatible local browser is detected on the system and this API needs to download a browser. Return a callback to observe progress. See here for how to use this option.

quality?​

在 v4.0.0 中更名为 jpegQuality。

dumpBrowserLogs?​

可选 - 默认为 false，在 v4.0 中已弃用

已弃用，建议使用 logLevel。

parallelism?​

在 v3.2.17 中更名为 concurrency。 在 v4.0.0 中移除。

ffmpegExecutable​

在 v4.0 中移除，可选

一个绝对路径，用于覆盖要使用的 ffmpeg 可执行文件。

ffprobeExecutable? v3.0.17​

在 v4.0 中移除，可选

一个绝对路径，用于覆盖要使用的 ffprobe 可执行文件。

返回值​

一个解析为包含以下属性的对象的 Promise：

  • frameCount: number - 描述渲染了多少帧。
  • assetsInfo: RenderAssetInfo - 可传递给 stitchFramesToVideo() 以混合音频的信息。此对象的形状应被视为 Remotion 内部，并且可能会随着 Remotion 版本的更改而更改。

参见​