@revideo/renderer

renderVideo()

The renderVideo function lets you render (parameterized) videos in a nodejs process. It uses a headless browser to achieve this.

Example Usage​

import {renderVideo} from '@revideo/renderer';

function logProgressToConsole(id: number, progress: number) {
  console.log(`[${id}] Progress: ${(progress * 100).toFixed(1)}%`);
}

renderVideo({
  projectFile: './src/project.ts',
  variables: {color: 'white'},
  settings: {
    outFile: 'video.mp4',
    workers: 1,
    range: [1, 3],
    dimensions: [1080, 1792],
    logProgress: true,
    ffmpeg: {
      ffmpegLogLevel: 'error',
      ffmpegPath: 'ffmpeg',
    },
    puppeteer: {
      args: ['--no-sandbox'],
    }
    progressCallback: logProgressToConsole
  }
});

Arguments​

The input arguments are a RenderVideoProps object, which has the following properties:

projectFile​

string

Points towards your project file. This will probably be ./src/project.ts.

variables?​

Record<string, any>

Parameters / or variables passed to your video. See here learn more about parameterized videos.

settings?​

A RenderSettings object with the following properties:

outFile?​

string, has to end with '.mp4'

The file name of the video output

outDir?​

string

The output directory of the rendered video. default="./output"

range?​

[number, number]

The start and end second of the video. Can be used to only render a part of the video.

workers?​

number

The number of processes you want to use to parallelize rendering, default is 1. Rendering a 100s long video with 10 workers means that 10 processes handle 10s of video each. Your laptop will probably render fastest with one worker, but VMs with a lot of computing power can benefit from using more than one

dimensions?​

[number, number]

Dimensions of the video to render as [x,y]. Uses the value specified in project.meta by default.

logProgress?​

boolean

Logs render progress to the console if set to true.

ffmpeg?​

FFmpeg options - is an instance of FfmpegSettings. These overwrite the following settings set through environment variables:

ffmpegLogLevel?​

error | warning | info | verbose, debug | trace

The log level of FFmpeg. Can be one of error, warning, info, verbose, debug, trace. Default is error.

ffmpegPath?​

The path to the FFmpeg binary. If not specified, the FFmpeg binary shipped with Revideo will be used.

puppeteer?​

BrowserLaunchArgumentOptions

Launch options for puppeteer - is an instance of puppeteer's BrowserLaunchArgumentOptions

viteBasePort?​

number

The "base port" we use for the vite server. When you have three workers and a base port 5000, the vite servers created by the three workers will use port 5000, 5001, and 5002. Default is 9000.

viteConfig?​

InlineConfig

Configuration of the vite server used for rendering, an instance of InlineConfig. You can use these options to configure the server port, the cache directory, and more.

progressCallback?​

(worker: number, progress: number) => void

A function that gets called with the progress of the rendering process, can be used to report progress back to users (e.g. in a web app). The function gets called with two arguments: the id of the worker that is calling the function, and the progress of the rendering process (float between 0 and 1). Does nothing by default

Return Value​

The function returns a string containing the path to the rendered video.

renderPartialVideo()

The renderPartialVideo() function lets you render partial videos if you want to distribute the rendering workload across multiple workers. You can find an example of this in our Cloud Functions example. To use renderPartialVideo(), you don't have to manually assign a range of frames or timestamps to render. Instead, you just pass the worker id and the total number of workers your rendering job uses, and the function will figure out the frames to render by itself.

Since merging partial videos gives you audio issues (audio becomes laggy), this function returns the path to the audio file and mute video file of the partial video. Afterwards, you should first concatenate all of the partial audio files and then concatenate all of the partial mute video files, and then merge the full audio and video to obtain your final mp4 file.

To do this, you can use the concatenateMedia() and mergeAudioWithVideo() functions from @revideo/ffmpeg.

Example Usage​

import {renderPartialVideo} from '@revideo/renderer';

const {audioFile, videoFile} = renderPartialVideo({
  projectFile: './src/project.ts',
  variables: {color: 'white'},
  numWorkers: 10,
  workerId: 3,
  settings: {
    dimensions: [1080, 1792],
    logProgress: true,
    fmpeg: {
      ffmpegLogLevel: 'error',
      ffmpegPath: 'ffmpeg',
    },
    puppeteer: {
      args: ['--no-sandbox'],
    },
  },
});

Arguments​

An object of type RenderPartialVideoProps with the following attributes:

projectFile:​

string

A string pointing towards your Vite config file. This will probably be ./src/project.ts.

workerId​

number

The id of the worker. We start counting at 0, so if you have 5 workers, values from 0 to 4 are accepted.

numWorkers​

number

The number of workers you use in total. This informs the function which range of the video to render. For instance, worker 0 out of 10 workers would render 1/10 of the full video, whereas worker 0 out of 2 would render half of the video.

variables?​

Record<string, any>

Parameters / or variables passed to your video..

settings?​

A Omit<RenderSettings, 'workers'> object with the following properties:

outFile?​

string, has to end with '.mp4'

The file name of the video output

outDir?​

string

The output directory of the rendered video. default="./output"

range?​

[number, number]

The start and end second of the video. Can be used to only render a part of the video.

dimensions?​

[number, number]

Dimensions of the video to render as [x,y]. Uses the value specified in project.meta by default.

logProgress?​

boolean

Logs render progress to the console if set to true.

ffmpeg?​

FFmpeg options - is an instance of FfmpegSettings. These overwrite the following settings set through environment variables:

ffmpegLogLevel?​

error | warning | info | verbose, debug | trace

The log level of FFmpeg. Can be one of error, warning, info, verbose, debug, trace. Default is error.

ffmpegPath?​

The path to the FFmpeg binary. If not specified, the FFmpeg binary shipped with Revideo will be used.

puppeteer?​

BrowserLaunchArgumentOptions

Launch options for puppeteer - is an instance of puppeteer's BrowserLaunchArgumentOptions

viteBasePort?​

number

The "base port" we use for the vite server. When you have three workers and a base port 5000, the vite servers created by the three workers will use port 5000, 5001, and 5002. Default is 9000.

viteConfig?​

InlineConfig

Configuration of the vite server used for rendering, an instance of InlineConfig. You can use these options to configure the server port, the cache directory, and more.

progressCallback?​

(worker: number, progress: number) => void

A function that gets called with the progress of the rendering process, can be used to report progress back to users (e.g. in a web app). The function gets called with two arguments: the id of the worker that is calling the function, and the progress of the rendering process (float between 0 and 1). Does nothing by default

Return Value​

{ audioFile: string, videoFile: string }

Paths to the audio and video files of the partial render.