使用 SSR APIs 进行渲染

NPM 包 @remotion/renderer 为您提供了用于以编程方式渲染媒体的 "Server-Side Rendering" APIs。
这些函数可在 Node.js 和 Bun 中使用。

渲染视频需要三个步骤：

1

创建一个 Remotion Bundle

2

选择要渲染的合成并计算其元数据

3

渲染视频、音频、静态图像序列。

示例脚本

按照下面的示例注释来查看如何渲染视频：

render.mjs
tsx
import {bundle} from '@remotion/bundler';
import {renderMedia, selectComposition} from '@remotion/renderer';
import path from 'path';
 
// The composition you want to render
const compositionId = 'HelloWorld';
 
// You only have to create a bundle once, and you may reuse it
// for multiple renders that you can parametrize using input props.
const bundleLocation = await bundle({
  entryPoint: path.resolve('./src/index.ts'),
  // If you have a webpack override in remotion.config.ts, pass it here as well.
  webpackOverride: (config) => config,
});
 
// Parametrize the video by passing props to your component.
const inputProps = {
  foo: 'bar',
};
 
// Get the composition you want to render. Pass `inputProps` if you
// want to customize the duration or other metadata.
const composition = await selectComposition({
  serveUrl: bundleLocation,
  id: compositionId,
  inputProps,
});
 
// Render the video. Pass the same `inputProps` again
// if your video is parametrized with data.
await renderMedia({
  composition,
  serveUrl: bundleLocation,
  codec: 'h264',
  outputLocation: `out/${compositionId}.mp4`,
  inputProps,
});
 
console.log('Render done!');

render.mjs
tsx
import {bundle} from '@remotion/bundler';
import {renderMedia, selectComposition} from '@remotion/renderer';
import path from 'path';
 
// The composition you want to render
const compositionId = 'HelloWorld';
 
// You only have to create a bundle once, and you may reuse it
// for multiple renders that you can parametrize using input props.
const bundleLocation = await bundle({
  entryPoint: path.resolve('./src/index.ts'),
  // If you have a webpack override in remotion.config.ts, pass it here as well.
  webpackOverride: (config) => config,
});
 
// Parametrize the video by passing props to your component.
const inputProps = {
  foo: 'bar',
};
 
// Get the composition you want to render. Pass `inputProps` if you
// want to customize the duration or other metadata.
const composition = await selectComposition({
  serveUrl: bundleLocation,
  id: compositionId,
  inputProps,
});
 
// Render the video. Pass the same `inputProps` again
// if your video is parametrized with data.
await renderMedia({
  composition,
  serveUrl: bundleLocation,
  codec: 'h264',
  outputLocation: `out/${compositionId}.mp4`,
  inputProps,
});
 
console.log('Render done!');

此流程是可定制的。单击其中一个 SSR APIs 以了解其选项：

• getCompositions() - 从 Remotion 项目获取可用合成列表。
• selectComposition() - 从 Remotion 项目获取可用合成列表。
• renderMedia() - 渲染视频或音频。
• renderFrames() - 渲染图像序列。
• renderStill() - 渲染静态图像。
• stitchFramesToVideo() - 基于图像序列编码视频
• openBrowser() - 在函数调用之间共享浏览器实例以提高性能。

Linux 依赖

如果您使用的是 Linux，Chrome Headless Shell 需要安装一些共享库。请参阅 Linux 依赖。

Next.js 中的 SSR APIs

如果您使用 Next.js，则无法使用 @remotion/bundler，因为在 Can I render videos in Next.js? 中解释了的限制。请参考该页面以获取可能的替代方案。
我们建议在 Next.js 中使用 Lambda。

参见

• 服务器端渲染