Vercel 上的 Remotion

你在 Vercel 上渲染视频有两个选项：

🌐 You have two options for rendering your videos on Vercel:

客户端渲染：使用你电脑的浏览器和计算资源渲染视频
基于云的渲染：使用云服务器渲染你的视频

使用 Vercel Sandbox 渲染

🌐 Rendering using Vercel Sandbox

你可以快速将你的 Remotion 项目部署到 Vercel，以将渲染任务分担给 Vercel Sandbox：

🌐 You can quickly deploy your Remotion project to Vercel to offload rendering to a Vercel Sandbox:

注意：系统会提示你创建一个 Blob 存储。它必须是公开的。

Vercel Sandbox 允许你按需渲染视频，而无需管理 Lambda 或 AWS 基础设施。每次渲染都会生成一个临时的 Linux 虚拟机，并可完全访问 Remotion 渲染器。

🌐 Vercel Sandbox allows you to render videos on-demand without managing Lambda or AWS infrastructure. Each render spawns an ephemeral Linux VM with full access to the Remotion renderer.

请参阅专门的 Vercel Sandbox 页面获取完整文档。

🌐 See the dedicated Vercel Sandbox page for full documentation.

工作室部署

🌐 Studio Deployment

你可以通过连接仓库并设置以下配置，在 Vercel 上部署任何 Remotion 项目：

🌐 You can deploy any Remotion project on Vercel by connecting the repository and setting the following settings:

构建命令：bunx remotion bundle
输出目录: build
安装命令：保持默认

客户端渲染

🌐 Client-side rendering

在你的 remotion.config.ts 文件中启用实验性客户端渲染：

🌐 Enable experimental client-side rendering in your remotion.config.ts file:

remotion.config.ts
Config.setExperimentalClientSideRenderingEnabled(true);

这将使你能够在 Vercel 部署上进行客户端视频渲染。

🌐 This will make it possible to render videos client-side on your Vercel deployment.

请注意，这将使用你电脑的浏览器和计算资源，在渲染运行时会使你的电脑变慢。如果你在等待长时间渲染，你可能想要在云端渲染以释放你电脑的资源。

🌐 Note that this will use your computer's browser and compute resources, making your computer slower while the render is running. If you are waiting on long renders, you may want to render in the cloud to free up your computer's resources.

从 Vercel 无服务器函数触发 Lambda 渲染

🌐 Triggering Lambda renders from Vercel Serverless functions

你可以从 Vercel 无服务器函数触发 Remotion Lambda 渲染。查看用于渲染视频的示例端点：

🌐 You can trigger Remotion Lambda renders from Vercel Serverless functions.
See an example endpoint for rendering a video:

应用路由示例

src/app/api/lambda/render/route.ts
import {AwsRegion, RenderMediaOnLambdaOutput} from '@remotion/lambda/client';
import {renderMediaOnLambda, speculateFunctionName} from '@remotion/lambda/client';
import {NextResponse} from 'next/server';

const DISK = 10240;
const RAM = 2048;
const REGION = 'eu-central-1';
const SITE_NAME = 'https://remotion-helloworld.vercel.app';
const TIMEOUT = 120;

export const POST = async (req: Request, res: NextResponse) => {
  if (!process.env.AWS_ACCESS_KEY_ID && !process.env.REMOTION_AWS_ACCESS_KEY_ID) {
    throw new TypeError('Set up Remotion Lambda to render videos. See the README.md for how to do so.');
  }
  if (!process.env.AWS_SECRET_ACCESS_KEY && !process.env.REMOTION_AWS_SECRET_ACCESS_KEY) {
    throw new TypeError('The environment variable REMOTION_AWS_SECRET_ACCESS_KEY is missing. Add it to your .env file.');
  }

  const body = await req.json();

  const result = await renderMediaOnLambda({
    codec: 'h264',
    functionName: speculateFunctionName({
      diskSizeInMb: DISK,
      memorySizeInMb: RAM,
      timeoutInSeconds: TIMEOUT,
    }),
    region: REGION as AwsRegion,
    serveUrl: SITE_NAME,
    composition: body.id,
    inputProps: body.inputProps,
    downloadBehavior: {
      type: 'download',
      fileName: 'video.mp4',
    },
  });

  return result;
};

另请参见：

🌐 See also:

从 Vercel 部署渲染

🌐 Rendering from a Vercel deployment

部署可以作为服务 URL使用，以使用任何服务器端渲染原语来呈现视频。

🌐 Deployments can be used as Serve URLs to render videos using any server-side rendering primitive.

示例：

🌐 Example:

npx remotion render https://remotion-helloworld.vercel.app HelloWorld

在 Vercel 上渲染

🌐 Rendering on Vercel

部署 Vercel 模板：

🌐 Deploy the Vercel template:

注意：系统会提示你创建一个 Blob 存储。它必须是公开的。

渲染将在 Vercel Sandbox 内完成，渲染结果将存储在 Vercel Blob 中。

🌐 Rendering will be done inside a Vercel Sandbox and the render will be stored in Vercel Blob.

note

该模板不包含速率限制或缓存。在公开发布应用之前，请先实现这些功能，并设置 Vercel 支出管理以控制成本。沙箱快照、渲染视频及其他 Vercel Blob 数据会永久保留——在不再需要时请删除它们。

模板

🌐 Templates

这些模板适用于构建能够生成视频的应用。

🌐 These templates are recommended for building applications that can generate videos.

使用 Vercel Sandbox 渲染​

工作室部署​

客户端渲染​

从 Vercel 无服务器函数触发 Lambda 渲染​

从 Vercel 部署渲染​

在 Vercel 上渲染​

模板​