Skip to main content

使用 SSR API 进行渲染

NPM 包 @remotion/renderer 为你提供了用于以编程方式渲染媒体的“服务器端渲染（Server-Side Rendering）”API。 这些函数可在 Node.js 和 Bun 中使用。

🌐 The NPM package @remotion/renderer provides you with "Server-Side Rendering" APIs for rendering media programmatically.
These functions can be used in Node.js and Bun.

渲染视频需要三个步骤：

🌐 Rendering a video takes three steps:

创建一个 Remotion 包

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

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

示例脚本​

🌐 Example script

按照这个带注释的示例查看如何渲染视频：

🌐 Follow this commented example to see how to render a video:

render.mjs
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 API 以了解其选项：

🌐 This flow is customizable. Click on one of the SSR APIs to read about its options:

Linux 依赖​

🌐 Linux Dependencies

如果你使用的是 Linux，Chrome 无头模式 Shell 需要安装一些共享库。请参阅 Linux 依赖。

🌐 If you are on Linux, Chrome Headless Shell requires some shared libraries to be installed. See Linux Dependencies.

Next.js 中的 SSR API​

🌐 SSR APIs in Next.js

如果你正在使用 Next.js，你将无法使用 @remotion/bundler，因为在 我可以在 Next.js 中渲染视频吗？ 中解释的限制。请参阅该页面以获取可能的替代方案。 我们推荐在 Next.js 中使用 Lambda。

🌐 If you are using Next.js, you will not be able to use @remotion/bundler because of the limitations explained in Can I render videos in Next.js? Refer to the page for possible alternatives.
We recommend Lambda for use in Next.js.

另请参阅​

🌐 See also

Last updated on