Skip to main content

使用 SSR APIs 进行渲染

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

渲染视频需要三个步骤:

创建一个 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 以了解其选项:

Linux 依赖

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

Next.js 中的 SSR APIs

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

参见