renderFrames()
Part of the @remotion/renderer
package.
Renders a series of images using Puppeteer and computes information for mixing audio.
If you want to render only a still image, use renderStill().
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.
Configuration in remotion.config.ts
and CLI flags do not apply to this function. You must pass all options explicitly.
Arguments
Takes an object with the following keys:
composition
VideoConfig
An object describing a composition using id
, width
, height
, fps
and durationInFrames
, defaultProps
and props
.
Call selectComposition()
or getCompositions()
to get an array of possible configs.
onStart
A callback that fires after the setup process (validation, browser launch) has finished. Example value
ts
constonStart = () => {console .log ("Starting rendering...");};
ts
constonStart = () => {console .log ("Starting rendering...");};
onFrameUpdate
A callback function that gets called whenever a frame finished rendering. An argument is passed containing how many frames have been rendered (not the frame number of the rendered frame).
In v3.0.0
, a second argument was added: frame
, returning the frame number that was just rendered.
In v3.2.30
, a third argument was rendered: timeToRenderInMilliseconds
, describing the time it took to render that frame in milliseconds.
ts
constonFrameUpdate = (framesRendered : number,frame : number,timeToRenderInMilliseconds : number) => {console .log (`${framesRendered } frames rendered.`);// From v3.0.0console .log (`${frame } was just rendered.`);// From v3.2.30console .log (`It took ${timeToRenderInMilliseconds }ms to render that frame.`);};
ts
constonFrameUpdate = (framesRendered : number,frame : number,timeToRenderInMilliseconds : number) => {console .log (`${framesRendered } frames rendered.`);// From v3.0.0console .log (`${frame } was just rendered.`);// From v3.2.30console .log (`It took ${timeToRenderInMilliseconds }ms to render that frame.`);};
outputDir
A string
specifying the directory (absolute path) to which frames should be saved. Pass null
to this option and use the onFrameBuffer
callback instead to get a Buffer
of the frame rather than to write it to any location.
inputProps
Custom props which will be passed to the component. Useful for rendering videos with dynamic content. Can be an object of any shape.
serveUrl
Either a Webpack bundle or a URL pointing to a bundled Remotion project. Call bundle()
to generate a bundle. You can either pass the file location or deploy it as a website and pass the URL.
imageFormat
optional since v4.0 - default "jpeg"
- Choose
jpeg
by default because it is the fastest. - Choose
png
if you want your image sequence to have an alpha channel (for transparency). - Choose
none
if you only want to render audio.
concurrency?
optional
A number
specifying how many render processes should be started in parallel, a string
specifying the percentage of the CPU threads to use, or null
to let Remotion decide based on the CPU of the host machine. Default is half of the CPU threads available.
scale?
v2.6.7
number - default: 1
Scales the output frames by the factor you pass in. For example, a 1280x720px frame will become a 1920x1080px frame with a scale factor of 1.5
. Vector elements like fonts and HTML markups will be rendered with extra details.
jpegQuality?
optional
Sets the quality of the generated JPEG images. Must be an integer between 0 and 100. Default is to leave it up to the browser, current default is 80.
Only applies if imageFormat
is 'jpeg'
, otherwise this option is invalid.
frameRange?
optional
Specify a single frame (passing a number
) or a range of frames (passing a tuple [number, number]
) to be rendered. By passing null
(default) all frames of a composition get rendered.
muted
v3.2.1
optional
Disables audio output. This option may only be set in combination with a video codec and should also be passed to stitchFramesToVideo()
.
logLevel?
v4.0.0
One of verbose
, info
, warn
, error
. Determines how much is being logged to the console.
verbose
will also log console.log
's from the browser.
puppeteerInstance?
optional
An already open Puppeteer Browser
instance. Use openBrowser()
to create a new instance. Reusing a browser across multiple function calls can speed up the rendering process. You are responsible for opening and closing the browser yourself. If you don't specify this option, a new browser will be opened and closed at the end.
envVariables?
v2.2.0
optional
An object containing key-value pairs of environment variables which will be injected into your Remotion projected and which can be accessed by reading the global process.env
object.
onBrowserLog?
v3.0.0
optional
Gets called when your project calls console.log
or another method from console. A browser log has three properties:
text
: The message being printedstackTrace
: An array of objects containing the following properties:url
: URL of the resource that logged.lineNumber
: 0-based line number in the file where the log got called.columnNumber
: 0-based column number in the file where the log got called.
type
: The console method - one oflog
,debug
,info
,error
,warning
,dir
,dirxml
,table
,trace
,clear
,startGroup
,startGroupCollapsed
,endGroup
,assert
,profile
,profileEnd
,count
,timeEnd
,verbose
tsx
renderFrames ({onBrowserLog : (info ) => {console .log (`${info .type }: ${info .text }`);console .log (info .stackTrace .map ((stack ) => {return ` ${stack .url }:${stack .lineNumber }:${stack .columnNumber }`;}).join ("\n"));},});
tsx
renderFrames ({onBrowserLog : (info ) => {console .log (`${info .type }: ${info .text }`);console .log (info .stackTrace .map ((stack ) => {return ` ${stack .url }:${stack .lineNumber }:${stack .columnNumber }`;}).join ("\n"));},});
browserExecutable?
v3.0.11
optional
A string defining the absolute path on disk of the browser executable that should be used. By default Remotion will try to detect it automatically and download one if none is available. If puppeteerInstance
is defined, it will take precedence over browserExecutable
.
cancelSignal?
v3.0.15
optional
A token that allows the render to be cancelled. See: makeCancelSignal()
onFrameBuffer?
v3.0.0
optional
If you passed null
to outputDir
, this method will be called passing a buffer of the current frame. This is mostly used internally by Remotion to implement renderMedia()
and might have limited usefulness for end users.
timeoutInMilliseconds?
v2.6.3
optional
A number describing how long one frame may take to resolve all delayRender()
calls before the [render times out and fails(/docs/timeout). Default: 30000
everyNthFrame
v3.1.0
optional
Renders only every nth frame. For example only every second frame, every third frame and so on. Only meant for rendering GIFs. See here for more details.
chromiumOptions?
v2.6.5
optional
Allows you to set certain Chromium / Google Chrome flags. See: Chromium flags.
Chromium flags need to be set at browser launch. If you pass an instance using puppeteerInstance
, options passed to renderFrames()
will not apply, but rather the flags that have been passed to openBrowser()
.
disableWebSecurity
boolean - default false
This will most notably disable CORS among other security features.
ignoreCertificateErrors
boolean - default false
Results in invalid SSL certificates, such as self-signed ones, being ignored.
headless
boolean - default true
If disabled, the render will open an actual Chrome window where you can see the render happen.
gl
string
Changelog
- From Remotion v2.6.7 until v3.0.7, the default for Remotion Lambda was
swiftshader
, but from v3.0.8 the default isswangle
(Swiftshader on Angle) since Chrome 101 added support for it. - From Remotion v2.4.3 until v2.6.6, the default was
angle
, however it turns out to have a small memory leak that could crash long Remotion renders.
Select the OpenGL renderer backend for Chromium. Accepted values:
"angle"
,"egl"
,"swiftshader"
"swangle"
null
- Chromiums default
Default for local rendering: null
.
Default for Lambda rendering: "swangle"
.
userAgent
v3.3.83
Lets you set a custom user agent that the headless Chrome browser assumes.
quality?
quality?
Renamed to jpegQuality
in v4.0.0
.
dumpBrowserLogs?
dumpBrowserLogs?
optional - default false
, deprecated in v4.0
Deprecated in favor of logLevel
.
parallelism?
parallelism?
Renamed to concurrency
in v3.2.17.
Removed in v4.0.0
.
ffmpegExecutable
ffmpegExecutable
removed in v4.0, optional
An absolute path overriding the ffmpeg
executable to use.
ffprobeExecutable?
v3.0.17
ffprobeExecutable?
removed in v4.0, optional
An absolute path overriding the ffprobe
executable to use.
Return value
A promise resolving to an object containing the following properties:
frameCount
:number
- describing how many frames got rendered.assetsInfo
:RenderAssetInfo
- information that can be passed tostitchFramesToVideo()
to mix audio. The shape of this object should be considered as Remotion internals and may change across Remotion versions.