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.

ts
const stitchFramesToVideo: (options: {
  dir: string;
  fps: number;
  width: number;
  height: number;
  outputLocation: string;
  force: boolean;
  assetsInfo: RenderAssetInfo;
  pixelFormat?: PixelFormat;
  codec?: Codec;
  crf?: number;
  onProgress?: (progress: number) => void;
  onDownload?: (src: number) => void;
  verbose?: boolean;
  ffmpegExecutable?: FfmpegExecutable;
}) => Promise<void>;
ts
const stitchFramesToVideo: (options: {
  dir: string;
  fps: number;
  width: number;
  height: number;
  outputLocation: string;
  force: boolean;
  assetsInfo: RenderAssetInfo;
  pixelFormat?: PixelFormat;
  codec?: Codec;
  crf?: number;
  onProgress?: (progress: number) => void;
  onDownload?: (src: number) => void;
  verbose?: boolean;
  ffmpegExecutable?: FfmpegExecutable;
}) => Promise<void>;

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 ffmepg 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.

outputLocation​

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

force​

Whether in case of an existing file in outputLocation it should be overwritten. Type boolean.

assetsInfo​

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

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.

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}...`);
};

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.

Return value​

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

See also​