使用 SSR APIs 进行渲染
NPM 包 @remotion/renderer
为您提供了用于以编程方式渲染媒体的 "Server-Side Rendering" APIs。
这些函数可在 Node.js 和 Bun 中使用。
渲染视频需要三个步骤:
1 创建一个 Remotion Bundle
2 选择要渲染的合成并计算其元数据
3 渲染视频、音频、静态图像序列。
示例脚本
按照下面的示例注释来查看如何渲染视频:
render.mjstsx
import {bundle } from '@remotion/bundler';import {renderMedia ,selectComposition } from '@remotion/renderer';importpath from 'path';// The composition you want to renderconstcompositionId = 'HelloWorld';// You only have to create a bundle once, and you may reuse it// for multiple renders that you can parametrize using input props.constbundleLocation = awaitbundle ({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.constinputProps = {foo : 'bar',};// Get the composition you want to render. Pass `inputProps` if you// want to customize the duration or other metadata.constcomposition = awaitselectComposition ({serveUrl :bundleLocation ,id :compositionId ,inputProps ,});// Render the video. Pass the same `inputProps` again// if your video is parametrized with data.awaitrenderMedia ({composition ,serveUrl :bundleLocation ,codec : 'h264',outputLocation : `out/${compositionId }.mp4`,inputProps ,});console .log ('Render done!');
render.mjstsx
import {bundle } from '@remotion/bundler';import {renderMedia ,selectComposition } from '@remotion/renderer';importpath from 'path';// The composition you want to renderconstcompositionId = 'HelloWorld';// You only have to create a bundle once, and you may reuse it// for multiple renders that you can parametrize using input props.constbundleLocation = awaitbundle ({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.constinputProps = {foo : 'bar',};// Get the composition you want to render. Pass `inputProps` if you// want to customize the duration or other metadata.constcomposition = awaitselectComposition ({serveUrl :bundleLocation ,id :compositionId ,inputProps ,});// Render the video. Pass the same `inputProps` again// if your video is parametrized with data.awaitrenderMedia ({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