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.

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

onProgress?#

optional

Callback function which informs about the encoding progress. The progress value is a number between 0 and 1.

const onProgress = (progress: number) => {
console.log(`Encoding progress: ${progress * 100}%`)
}

onDownload?#

optional

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

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

verbose#

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

Return value#

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

See also#