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.

ts
const stitchFramesToVideo: (options: {
  dir: string;
  fps: number;
  width: number;
  height: number;
  outputLocation: string;
  force: boolean;
  assetsInfo: RenderAssetInfo;
  imageFormat?: "png" | "jpeg" | "none";
  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;
  imageFormat?: "png" | "jpeg" | "none";
  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().

imageFormat?

optional

Either jpeg, png or none. It should match what you passed into the renderFrames() function.

info

For backwards compatibility, if you omit this parameter, it will use 'png'. Make sure to explicitly set this to jpeg to take advantage of faster rendering.

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