Skip to main content

stitchFramesToVideo()

Part of the @remotion/renderer package.

Takes a series of images and audio information generated by renderFrames() and encodes it to a video.

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.

Arguments​

An object with the following properties:

dir​

A string containing the absolute path of the directory where the frames are located. This will be the directory where the ffmpeg command will be executed.

fps​

A number specifying the desired frame rate of the output video.

width​

A number specifying the desired output width in pixels for the video.

height​

A number specifying the desired output height in pixels for the video.

assetsInfo​

Information about the audio mix. This is part of the return value of renderFrames().

outputLocation?​

optional since v3.0.26

An absolute path specify where the output file should be written to.

If not specified or set to null, the file will be returned in-memory as a buffer.

force?​

optional

Whether Remotion should overwrite the file in outputLocation if it already exists. true by default.

pixelFormat?​

optional

Sets the pixel format. See here for available values. The default is yuv420p.

codec?​

optional

Set a codec. See the encoding guide for available values and guidance on which one to choose. The default is h264.

audioBitrate?​

string - optional, available from v3.2.32

Specify the target bitrate for the generated video.
The syntax for FFMPEGs -b:v parameter should be used.
FFMPEG may encode the video in a way that will not result in the exact video bitrate specified.
This option cannot be set if --crf is set. Example values: 512K for 512 kbps, 1M for 1 Mbps.
Default: 320k

videoBitrate?​

string - optional, available from v3.2.32

Specify the target bitrate for the generated video.
The syntax for FFMPEGs -b:v parameter should be used.
FFMPEG may encode the video in a way that will not result in the exact video bitrate specified.
This option cannot be set if --crf is set. Example values: 512K for 512 kbps, 1M for 1 Mbps.

crf?​

optional

The constant rate factor of the output, a parameter which controls quality. See here for more information about this parameter. Default is depending on the codec.

proResProfile?​

optional

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

onProgress?​

optional

Callback function which informs about the encoding progress. The frameNumber value is a number.

ts
const onProgress = (frameNumber: number) => {
  console.log(`Encoding progress: on ${frameNumber} frame`);
};
ts
const onProgress = (frameNumber: number) => {
  console.log(`Encoding progress: on ${frameNumber} frame`);
};

onDownload?​

optional

Notifies when a remote asset needs to be downloaded in order to extract the audio track.

ts
const onDownload = (src: string) => {
  console.log(`Downloading ${src}...`);
};
ts
const onDownload = (src: string) => {
  console.log(`Downloading ${src}...`);
};

numberOfGifLoops?​

optional, available since v3.1

Set the looping behavior. This option may only be set when rendering GIFs. See here for more details.

muted?​

optional, available since v3.2.1

Disables audio output. This option may only be set in combination with a video codec and should also be passed to renderFrames().

verbose?​

optional

A boolean value that when set to true, will log all kinds of debug information. Default false.

ffmpegExecutable?​

optional

A custom FFMPEG executable to be used. By default, a binary called ffmpeg will be searched in your PATH.

ffprobeExecutable?​

optional, available from v3.0.17

An absolute path overriding the ffprobe executable to use.

cancelSignal?​

optional, available from v3.0.15

A token that allows the render to be cancelled. See: makeCancelSignal()

ffmpegOverride?​

function - optional - available from v3.2.22

Modifies the FFMPEG command that Remotion uses under the hood. It works reducer-style, meaning that you pass a function that takes a command as an argument and returns a new command.

tsx
import type { FfmpegOverrideFn } from "@remotion/renderer";
 
const ffmpegOverride: FfmpegOverrideFn = ({ type, args }) => {
  console.log(type); // "stitcher" | "pre-stitcher
  return [...args, "-vf", "eq=brightness=0:saturation=1"];
};
tsx
import type { FfmpegOverrideFn } from "@remotion/renderer";
 
const ffmpegOverride: FfmpegOverrideFn = ({ type, args }) => {
  console.log(type); // "stitcher" | "pre-stitcher
  return [...args, "-vf", "eq=brightness=0:saturation=1"];
};

The function you pass must accept an object as it's only parameter which contains the following properties:

  • type: Either "stitcher" or "pre-stitcher". If enough memory and CPU is available, Remotion may use parallel rendering and encoding, which means that a pre-stitcher process gets spawned before all frames are rendered. You can tell whether parallel encoding is enabled by adding --log=verbose to your render command.
  • args: An array of strings that is passed as arguments to the FFMPEG command.

Your function must return a modified array of strings.

danger

Using this feature is discouraged. Before using it, we want to make you aware of some caveats:

  • The render command can change with any new Remotion version, even when it is a patch upgrade. This might break your usage of this feature.
  • Depending on the selected codec, available CPU and RAM, Remotion may or may not use "parallel encoding" which will result in multiple FFMPEG commands being executed. Your function must be able to handle being called multiple times.
  • This feature is not available when using Remotion Lambda.

Before you use this hack, reach out to the Remotion team on Discord and ask us if we are open to implement the feature you need in a clean way - we often do implement new features quickly based on users feedback.

Return value​

stitchFramesToVideo() returns a promise which resolves to nothing. If everything goes well, the output will be placed in outputLocation.

See also​