Server-Side Rendering
Remotion's rendering engine is built with Node.JS, which makes it easy to render a video in the cloud.
Render a video on AWS Lambda
The easiest and fastest way to render videos in the cloud is to use @remotion/lambda
.
Render a video using Node.JS APIs
The NPM package @remotion/renderer
provides you with an API for rendering media programmatically. You can make a video in three steps:
Follow this commented example to see how to render a video:
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 itconstbundleLocation = awaitbundle ({entryPoint :path .resolve ("./src/index"),// If you have a Webpack override, make sure to add it herewebpackOverride : (config ) =>config ,});// Parametrize the video by passing arbitrary 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 videoawaitrenderMedia ({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 itconstbundleLocation = awaitbundle ({entryPoint :path .resolve ("./src/index"),// If you have a Webpack override, make sure to add it herewebpackOverride : (config ) =>config ,});// Parametrize the video by passing arbitrary 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 videoawaitrenderMedia ({composition ,serveUrl :bundleLocation ,codec : "h264",outputLocation : `out/${compositionId }.mp4`,inputProps ,});console .log ("Render done!");
This flow is highly customizable. Click on one of the SSR APIs to read about it's options:
getCompositions()
- Get a list of available compositions from a Remotion project.selectComposition()
- Get a list of available compositions from a Remotion project.renderMedia()
- Render a video or audio.renderFrames()
- Render an image sequence.renderStill()
- Render a still image.stitchFramesToVideo()
- Encode a video based on an image sequenceopenBrowser()
- Share a browser instance across function calls for improved performance.
Render using GitHub Actions
The Hello World starter template includes a GitHub Actions workflow file .github/workflows/render-video.yml
.
Actions
tab.Render video
workflow on the left.Run workflow
button should appear. Click it.Run workflow
. Artifacts
.Note that running the workflow may incur costs. However, the workflow will only run if you actively trigger it.
See also: Passing input props in GitHub Actions
Render a video using Docker
See: Dockerizing a Remotion project
Render a video using GCP Cloud Run
An official Remotion package for Cloud Run is in development. Register your interest in Discord if you want to be a beta tester.