Skip to main content

renderMedia()

Available since v3.0 - Part of the @remotion/renderer package.

Render a video or an audio programmatically.

info

In Remotion 3.0, we added the renderMedia() API which combines renderFrames() and stitchFramesToVideo() into one simplified step and performs the render faster. Prefer renderMedia() if you can.

ts
const renderMedia: (options: {
  outputLocation: string;
  codec: Codec;
  composition: SmallTCompMetadata;
  inputProps?: unknown;
  parallelism?: number | null;
  crf?: number | null;
  imageFormat?: "png" | "jpeg" | "none";
  ffmpegExecutable?: FfmpegExecutable;
  pixelFormat?: PixelFormat;
  envVariables?: Record<string, string>;
  quality?: number;
  frameRange?: FrameRange | null;
  puppeteerInstance?: PuppeteerBrowser;
  overwrite?: boolean;
  onProgress?: RenderMediaOnProgress;
  onDownload?: RenderMediaOnDownload;
  proResProfile?: ProResProfile;
  dumpBrowserLogs?: boolean;
  onBrowserLog?: ((log: BrowserLog) => void) | undefined;
  onStart?: (data: OnStartData) => void;
  timeoutInMilliseconds?: number;
  chromiumOptions?: ChromiumOptions;
  scale?: number;
  serveUrl: string;
}) => Promise<void>;
ts
const renderMedia: (options: {
  outputLocation: string;
  codec: Codec;
  composition: SmallTCompMetadata;
  inputProps?: unknown;
  parallelism?: number | null;
  crf?: number | null;
  imageFormat?: "png" | "jpeg" | "none";
  ffmpegExecutable?: FfmpegExecutable;
  pixelFormat?: PixelFormat;
  envVariables?: Record<string, string>;
  quality?: number;
  frameRange?: FrameRange | null;
  puppeteerInstance?: PuppeteerBrowser;
  overwrite?: boolean;
  onProgress?: RenderMediaOnProgress;
  onDownload?: RenderMediaOnDownload;
  proResProfile?: ProResProfile;
  dumpBrowserLogs?: boolean;
  onBrowserLog?: ((log: BrowserLog) => void) | undefined;
  onStart?: (data: OnStartData) => void;
  timeoutInMilliseconds?: number;
  chromiumOptions?: ChromiumOptions;
  scale?: number;
  serveUrl: string;
}) => Promise<void>;

Arguments​

An object with the following properties:

serveUrl​

string

Either a local path pointing to a Remotion Webpack bundle generated by bundle() or a URL where the bundle is hosted.

output​

string

Where to save the output artifact to. Either an absolute path or a relative path that will be resolved relative to the current working directory. Must be a file path (not a folder).

composition​

TCompMetadata

An object describing a composition using id, width, height, fps and durationInFrames. Call getCompositions() to get an array of possible configs.

codec​

"h264" (default) | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv"

Choose a suitable codec for your output media. Refer to the Encoding guide to find the best codec for your use case.

inputProps​

object - optional

An object of arbitrary shape that will be passed as props to your composition and that can be retrieved using getInputProps().

parallelism​

number | null - optional

How many threads should be used for rendering frames. By default null, which will use half of the threads that your CPU has.
Type node -e "console.log(require('os').cpus().length)" into your command line to find out how many threads your CPU has.

crf​

number | null - optional

The constant rate factor, controlling the quality. See: Controllsing quality using the CRF setting.

imageFormat​

"jpeg" (default) | "png" | "none" - optional

In which image format the frames should be rendered.

ffmpegExecutable​

string - optional

An absolute path overriding the ffmpeg executable to use.

browserExecutable?​

optional, available from v3.0.11

A string defining the absolute path on disk of the browser executable that should be used. By default Remotion will try to detect it automatically and download one if none is available. If puppeteerInstance is defined, it will take precedence over browserExecutable.

pixelFormat​

string - optional

A custom pixel format to use. Usually used for special use cases like transparent videos.

envVariables​

Record<string, string> - optional

An object containing environment variables to be injected in your project.

See: Environment variables

quality​

number - optional

Sets the quality of the generated JPEG images. Must be an integer between 0 and 100. Default is to leave it up to the browser, current default is 80.

Only applies if imageFormat is 'jpeg', otherwise this option is invalid.

frameRange​

number | [number, number] - optional

Specify a single frame (passing a number) or a range of frames (passing a tuple [number, number]) to be rendered. By passing null (default) all frames of a composition get rendered.

puppeteerInstance​

puppeteer.Browser - optional

An already open Puppeteer Browser instance. Use openBrowser() to create a new instance. Reusing a browser across multiple function calls can speed up the rendering process. You are responsible for opening and closing the browser yourself. If you don't specify this option, a new browser will be opened and closed at the end.

overwrite​

boolean - optional

If set to false, the output file will not be written if a file already exists.

onStart​

function - optional

Callback function that gets called once the renderer has prepared to start rendering and has calculated the amount of frames that are going to be rendered:

tsx
import { OnStartData } from "@remotion/renderer";
 
const onStart = ({ frameCount }: OnStartData) => {
  console.log(`Beginning to render ${frameCount}.`);
};
tsx
import { OnStartData } from "@remotion/renderer";
 
const onStart = ({ frameCount }: OnStartData) => {
  console.log(`Beginning to render ${frameCount}.`);
};

onProgress​

function - optional

React to render progress. The following callback function is similar to how Remotion displays render progress on it's CLI:

tsx
import { RenderMediaOnProgress } from "@remotion/renderer";
 
const onProgress: RenderMediaOnProgress = ({
  renderedFrames,
  encodedFrames,
  encodedDoneIn,
  renderedDoneIn,
  stitchStage,
}) => {
  if (stitchStage === "encoding") {
    // First pass, parallel rendering of frames and encoding into video
    console.log("Encoding...");
  } else if (stitchStage === "muxing") {
    // Second pass, adding audio to the video
    console.log("Muxing audio...");
  }
  // Amount of frames rendered into images
  console.log(`${renderedFrames} rendered`);
  // Amount of frame encoded into a video
  console.log(`${encodedFrames} encoded`);
  // Time to create images of all frames
  if (renderedDoneIn !== null) {
    console.log(`Rendered in ${renderedDoneIn}ms`);
  }
  // Time to encode video from images
  if (encodedDoneIn !== null) {
    console.log(`Encoded in ${encodedDoneIn}ms`);
  }
};
tsx
import { RenderMediaOnProgress } from "@remotion/renderer";
 
const onProgress: RenderMediaOnProgress = ({
  renderedFrames,
  encodedFrames,
  encodedDoneIn,
  renderedDoneIn,
  stitchStage,
}) => {
  if (stitchStage === "encoding") {
    // First pass, parallel rendering of frames and encoding into video
    console.log("Encoding...");
  } else if (stitchStage === "muxing") {
    // Second pass, adding audio to the video
    console.log("Muxing audio...");
  }
  // Amount of frames rendered into images
  console.log(`${renderedFrames} rendered`);
  // Amount of frame encoded into a video
  console.log(`${encodedFrames} encoded`);
  // Time to create images of all frames
  if (renderedDoneIn !== null) {
    console.log(`Rendered in ${renderedDoneIn}ms`);
  }
  // Time to encode video from images
  if (encodedDoneIn !== null) {
    console.log(`Encoded in ${encodedDoneIn}ms`);
  }
};

onDownload​

function - optional

If an audio (or a video with sound) is included in your project, Remotion needs to download it in order to use it's audio in the output file. You can use this callback to react to a download happening and progressing.

tsx
import { RenderMediaOnDownload } from "@remotion/renderer";
 
const onDownload: RenderMediaOnDownload = (src) => {
  console.log(`Downloading ${src}...`);
  return ({ percent }) => {
    console.log(`${Math.round(percent * 100)}% done`);
  };
};
tsx
import { RenderMediaOnDownload } from "@remotion/renderer";
 
const onDownload: RenderMediaOnDownload = (src) => {
  console.log(`Downloading ${src}...`);
  return ({ percent }) => {
    console.log(`${Math.round(percent * 100)}% done`);
  };
};

proResProfile​

string - optional

Sets a ProRes profile. Only applies to videos rendered with prores codec. See Encoding guide for possible options.

dumpBrowserLogs​

boolean - optional

If true, will print browser console output to standard output.

onBrowserLog​

function - optional

Catch a console message being printed. Example:

tsx
import { BrowserLog } from "@remotion/renderer";
 
const onBrowserLog = (log: BrowserLog) => {
  // `type` is the console.* method: `log`, `warn`, `error`, etc.
  console.log(`[${log.type}]`);
  console.log(log.text);
  console.log(`at ${log.stackTrace}`);
};
tsx
import { BrowserLog } from "@remotion/renderer";
 
const onBrowserLog = (log: BrowserLog) => {
  // `type` is the console.* method: `log`, `warn`, `error`, etc.
  console.log(`[${log.type}]`);
  console.log(log.text);
  console.log(`at ${log.stackTrace}`);
};

timeoutInMilliseconds?​

optional

A number describing how long the render may take to resolve all delayRender() calls before it times out. Default: 30000

chromiumOptions?​

optional, available from v2.6.5

Allows you to set certain Chromium / Google Chrome flags. See: Chromium flags.

note

Chromium flags need to be set at browser launch. If you pass an instance using puppeteerInstance, options passed to renderMedia() will not apply, but rather the flags that have been passed to openBrowser().

disableWebSecurity​

boolean - default false

This will most notably disable CORS among other security features.

ignoreCertificateErrors​

boolean - default false

Results in invalid SSL certificates, such as self-signed ones, being ignored.

headless​

boolean - default true

If disabled, the render will open an actual Chrome window where you can see the render happen.

gl​

string

Select the OpenGL renderer backend for Chromium. Accepted values:

  • "angle",
  • "egl",
  • "swiftshader"
  • "swangle"
  • null - Chromiums default

Default for local rendering: null.
Default for Lambda rendering: "swangle".

See also​