packages/docs/docs/renderer/render-frames.mdx
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().
:::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.
:::
Takes an object with the following keys:
compositionVideoConfig
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.
onStartCallback function that gets called once the renderer has prepared to start rendering and has calculated the amount of frames that are going to be rendered:
import {OnStartData} from '@remotion/renderer';
const onStart = ({
frameCount,
parallelEncoding, // available from v4.0.52
resolvedConcurrency, // available from v4.0.180
}: OnStartData) => {
console.log(`Beginning to render ${frameCount}.`);
if (parallelEncoding) {
console.log('Parallel encoding is enabled.');
}
console.log(`Using concurrency: ${resolvedConcurrency}`);
};
onFrameUpdateA 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.
const onFrameUpdate = (framesRendered: number, frame: number, timeToRenderInMilliseconds: number) => {
console.log(`${framesRendered} frames rendered.`);
// From v3.0.0
console.log(`${frame} was just rendered.`);
// From v3.2.30
console.log(`It took ${timeToRenderInMilliseconds}ms to render that frame.`);
};
outputDirA 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.
inputPropsInput Props to pass to the selected composition of your video..
Must be a JSON object.
From the root component the props can be read using getInputProps().
You may transform input props using calculateMetadata().
serveUrlEither 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?Default: "jpeg". Choose jpeg by default because it is the fastest.
png if you want your image sequence to have an alpha channel (for transparency).none if you only want to render audio.imageSequencePattern? <AvailableFrom v="4.0.313" />A string pattern for naming the output image sequence files. You can use the following magic replacements:
[frame]: Will be replaced with the zero-padded frame number (e.g. 0001, 0002, ...)[ext]: Will be replaced with the image format extension (e.g. jpeg, png)Default: element-[frame].[ext]
Example:
renderFrames({
...otherOptions,
imageSequencePattern: 'frame_[frame]_custom.[ext]',
});
// Produces: frame_0001_custom.jpeg, frame_0002_custom.jpeg, ...
concurrency?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?<AvailableFrom v="2.6.7" />number - default: 1
<Options id="scale" />jpegQuality?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.
port?Prefer a specific port that will be used to serve the Remotion project. If not specified, a random port will be used.
frameRange?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. Pass [number, null] to render from a frame to the end of the composition.<AvailableFrom v="4.0.421" inline />
muted?<AvailableFrom v="3.2.1" />Disables audio output. This option may only be set in combination with a video codec and should also be passed to stitchFramesToVideo().
logLevel?<AvailableFrom v="4.0.0"/>onArtifact?<AvailableFrom v="4.0.176" />Handle an artifact that was emitted by the <Artifact> component.
puppeteerInstance?An already open 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.
:::note
Despite the name, not actually compatible with puppeteer, only with openBrowser().
:::
envVariables?<AvailableFrom v="2.2.0" />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?<AvailableFrom v="3.0.0" />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 of log, debug, info, error, warning, dir, dirxml, table, trace, clear, startGroup, startGroupCollapsed, endGroup, assert, profile, profileEnd, count, timeEnd, verboseinterface ConsoleMessageLocation {
/**
* URL of the resource if known or `undefined` otherwise.
*/
url?: string;
/**
* 0-based line number in the resource if known or `undefined` otherwise.
*/
lineNumber?: number;
/**
* 0-based column number in the resource if known or `undefined` otherwise.
*/
columnNumber?: number;
}
type BrowserLog = {
text: string;
stackTrace: ConsoleMessageLocation[];
type: 'log' | 'debug' | 'info' | 'error' | 'warning' | 'dir' | 'dirxml' | 'table' | 'trace' | 'clear' | 'startGroup' | 'startGroupCollapsed' | 'endGroup' | 'assert' | 'profile' | 'profileEnd' | 'count' | 'timeEnd' | 'verbose';
};
const renderFrames = (options: {onBrowserLog?: (log: BrowserLog) => void}) => {};
// ---cut---
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?<AvailableFrom v="3.0.11" />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?<AvailableFrom v="3.0.15" />A token that allows the render to be cancelled. See: makeCancelSignal()
onFrameBuffer?<AvailableFrom v="3.0.0" />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?<AvailableFrom v="2.6.3" />A number describing how long one frame may take to resolve all delayRender() calls before the render times out and fails. Default: 30000
everyNthFrame?<AvailableFrom v="3.1.0" />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?<AvailableFrom v="2.6.5" />Allows you to set certain Chromium / Google Chrome flags. See: Chromium flags.
:::note
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.
enableMultiProcessOnLinux?<AvailableFrom v="4.0.42" />boolean - default true
ignoreCertificateErrors?boolean - default false
Results in invalid SSL certificates, such as self-signed ones, being ignored.
headless?gl?string
<Options id="gl" />userAgent?<AvailableFrom v="3.3.83"/>Lets you set a custom user agent that the headless Chrome browser assumes.
darkMode?<AvailableFrom v="4.0.381"/>offthreadVideoCacheSizeInBytes?<AvailableFrom v="4.0.23"/>mediaCacheSizeInBytes?<AvailableFrom v="4.0.352"/>offthreadVideoThreads?<AvailableFrom v="4.0.261"/>binariesDirectory?<AvailableFrom v="4.0.120" />onBrowserDownload?<AvailableFrom v="4.0.137" />chromeMode?<AvailableFrom v="4.0.248" />quality?Renamed to jpegQuality in v4.0.0.
dumpBrowserLogs?Deprecated in v4.0 in favor of logLevel.
parallelism?Renamed to concurrency in v3.2.17.
Removed in v4.0.0.
ffmpegExecutableremoved in v4.0
An absolute path overriding the ffmpeg executable to use.
ffprobeExecutableremoved in v4.0
An absolute path overriding the ffprobe executable to use.
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 to stitchFramesToVideo() to mix audio. The shape of this object should be considered as Remotion internals and may change across Remotion versions.