Chapter 153: Server-Side Rendering (v1 and v2)

Core Idea

:::info This documentation is how server-side rendering worked in Remotion v1 and Remotion v2. To see rendering in 3.

Key Concepts

• Render a video programmatically
• API reference

Code Examples

import {
  getCompositions,
  renderFrames,
  stitchFramesToVideo,
} from "@remotion/renderer";

const start = async () => {
  // The composition you want to render
  const compositionId = "HelloWorld";

  // Create a webpack bundle of the entry file.
  const bundleLocation = await bundle(require.resolve("./src/index.ts"));

  // Extract all the compositions you have defined in your project
  // from the webpack bundle.
  const comps = await getCompositions(bundleLocation, {
    // You can pass custom input props that you can retrieve using getInputProps()
    // in the composition list. Use this if you want to dynamically set the duration or
    // dimensions of the video.
    inputProps: {
      custom: "data",
    },
  });

  // Select the composition you want to render.
  const composition = comps.find((c) => c.id === compositionId);

  // Ensure the composition exists
  if (!composition) {
    throw new Error(`No composition with the ID ${compositionId} found`);
  }

  // We create a temporary directory for storing the frames
  const framesDir = await fs.promises.mkdtemp(
    path.join(os.tmpdir(), "remotion-"),
  );

  // We create JPEGs for all frames
  const { assetsInfo } = await renderFrames({
    config: composition,
    // Path of the webpack bundle you have created
    bundle: bundleLocation,
    // Get's called after bundling is finished and the
    // actual rend
// ...(truncated)

• What it demonstrates: Usage pattern for Server-Side Rendering (v1 and v2) from the official docs.

Key Takeaways

1. Understand render a video programmatically when working with Server-Side Rendering (v1 and v2).
2. Understand api reference when working with Server-Side Rendering (v1 and v2).

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.