Chapter 146: renderFrames()

Core Idea

_Part of the @remotion/renderer package.

Key Concepts

• Arguments
• composition
• onStart
• onFrameUpdate
• outputDir
• inputProps
• serveUrl
• imageFormat?

Code Examples

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}`);
};

• What it demonstrates: Usage pattern for renderFrames() from the official docs.

Key Takeaways

1. Understand arguments when working with renderFrames().
2. Understand composition when working with renderFrames().
3. Understand onstart when working with renderFrames().
4. Understand onframeupdate when working with renderFrames().
5. Understand outputdir when working with renderFrames().

Connects To

• Chromium Flags: related page in the Rendering & SSR section.
• Compare ssr: related page in the Rendering & SSR section.
• Dataset Render: related page in the Rendering & SSR section.