Chapter 164: Remotion on Vercel

Core Idea

You have two options for rendering your videos on Vercel:

Key Concepts

• Rendering using Vercel Sandbox
• Studio Deployment
• Client-side rendering
• Triggering Lambda renders from Vercel Serverless functions
• Rendering from a Vercel deployment
• Rendering on Vercel
• Templates

Code Examples

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;
};

• What it demonstrates: Usage pattern for Remotion on Vercel from the official docs.

Key Takeaways

1. Understand rendering using vercel sandbox when working with Remotion on Vercel.
2. Understand studio deployment when working with Remotion on Vercel.
3. Understand client-side rendering when working with Remotion on Vercel.
4. Understand triggering lambda renders from vercel serverless functions when working with Remotion on Vercel.
5. Understand rendering from a vercel deployment when working with Remotion on Vercel.

Connects To

• Azure Container Apps: related page in the Deployment & Runtimes section.
• bun: related page in the Deployment & Runtimes section.
• Cloudflare Containers: related page in the Deployment & Runtimes section.