Skip to main content

getCompositions()

Part of the @remotion/renderer package.

Gets the compositions defined in a Remotion project based on a webpack bundle. Spins up a browser with Puppeteer and evaluates the Remotion root.

ts
const getCompositions: (
  bundleOrServeUrl: string,
  options: {
    inputProps?: object | null;
    envVariables?: Record<string, string>;
    puppeteerInstance?: PuppeteerBrowser;
    onBrowserLog?: (log: BrowserLog) => void;
    browserExecutable?: BrowserExecutable;
    ffmpegExecutable?: FfmpegExecutable;
  }
) => Promise<TComposition[]>;
ts
const getCompositions: (
  bundleOrServeUrl: string,
  options: {
    inputProps?: object | null;
    envVariables?: Record<string, string>;
    puppeteerInstance?: PuppeteerBrowser;
    onBrowserLog?: (log: BrowserLog) => void;
    browserExecutable?: BrowserExecutable;
    ffmpegExecutable?: FfmpegExecutable;
  }
) => Promise<TComposition[]>;

Arguments​

bundleOrServeUrl​

A string pointing to a Webpack bundle generated by bundle() or a URL that hosts the the bundled Remotion project.

options?​

optional

An object containing one or more of the following options:

inputProps?​

optional

Define custom props that can be retrieved using getInputProps() at runtime. Useful for setting a dynamic duration or dimensions for your video.

puppeteerInstance?​

optional - available since v3.0.0

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.

browserExecutable?​

optional, available from v2.3.1

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.

ffmpegExecutable?​

optional, available from v3.0.11

An absolute path overriding the ffmpeg executable to use.

onBrowserLog?​

optional - Available since v3.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 printed
  • stackTrace: 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, verbose
tsx
getCompositions({
  // ...
  onBrowserLog: (info) => {
    console.log(`${info.type}: ${info.text}`);
    console.log(
      info.stackTrace
        .map((stack) => {
          return `  ${stack.url}:${stack.lineNumber}:${stack.columnNumber}`;
        })
        .join("\n")
    );
  },
});
tsx
getCompositions({
  // ...
  onBrowserLog: (info) => {
    console.log(`${info.type}: ${info.text}`);
    console.log(
      info.stackTrace
        .map((stack) => {
          return `  ${stack.url}:${stack.lineNumber}:${stack.columnNumber}`;
        })
        .join("\n")
    );
  },
});

timeoutInMilliseconds?​

optional, available from v2.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

chromiumOptions?​

optional, available from v2.6.5

Allows you to set certain Chromium / Google Chrome flags. See: Chromium flags.

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 is swangle (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: null.

Return value​

Returns a promise that resolves to an array of available compositions. Example value:

ts
[
  {
    id: "HelloWorld",
    width: 1920,
    height: 1080,
    fps: 30,
    durationInFrames: 120,
    defaultProps: {
      title: "Hello World",
    },
  },
  {
    id: "Title",
    width: 1080,
    height: 1080,
    fps: 30,
    durationInFrames: 90,
    defaultProps: undefined,
  },
];
ts
[
  {
    id: "HelloWorld",
    width: 1920,
    height: 1080,
    fps: 30,
    durationInFrames: 120,
    defaultProps: {
      title: "Hello World",
    },
  },
  {
    id: "Title",
    width: 1080,
    height: 1080,
    fps: 30,
    durationInFrames: 90,
    defaultProps: undefined,
  },
];

The defaultProps only get returned since v2.5.7.

See also​