server.tsx

/**
 * This is an example of a server that returns dynamic video.
 * Run `npm run server` to try it out!
 * If you don't want to render videos on a server, you can safely
 * delete this file.
 */

import { bundle } from '@remotion/bundler';
import {
  getCompositions,
  renderFrames,
  stitchFramesToVideo,
} from '@remotion/renderer';
import express from 'express';
import fs from 'fs';
import os from 'os';
import path from 'path';

const app = express();
const port = 8000;
const compositionId = 'HelloWorld';

const cache = new Map<string, string>();

app.get('/', async (req, res) => {
  const sendFile = (file: string) => {
    fs.createReadStream(file)
      .pipe(res)
      .on('close', () => {
        res.end();
      });
  };
  try {
    if (cache.get(JSON.stringify(req.query))) {
      sendFile(cache.get(JSON.stringify(req.query)) as string);
      return;
    }
    const bundled = await bundle(path.join(__dirname, './src/index.tsx'), () => {
      /* intentionally blank */
    });
    const comps = await getCompositions(bundled);
    const video = comps.find((c) => c.id === compositionId);
    if (!video) {
      throw new Error(`No video called ${compositionId}`);
    }
    res.set('content-type', 'video/mp4');

    const tmpDir = await fs.promises.mkdtemp(
      path.join(os.tmpdir(), 'remotion-')
    );
    await renderFrames({
      config: video,
      webpackBundle: bundled,
      onStart: () => console.log('Rendering frames...'),
      onFrameUpdate: (f) => {
        if (f % 10 === 0) {
          console.log(`Rendered frame ${f}`);
        }
      },
      parallelism: null,
      outputDir: tmpDir,
      userProps: req.query,
      compositionId,
      imageFormat: 'jpeg',
    });

    const finalOutput = path.join(tmpDir, 'out.mp4');
    await stitchFramesToVideo({
      dir: tmpDir,
      force: true,
      fps: video.fps,
      height: video.height,
      width: video.width,
      outputLocation: finalOutput,
      imageFormat: 'jpeg',
    });
    cache.set(JSON.stringify(req.query), finalOutput);
    sendFile(finalOutput);
    console.log('Video rendered and sent!');
  } catch (err) {
    console.error(err);
    res.json({
      error: err,
    });
  }
});

app.listen(port);

console.log(
  [
    `The server has started on http://localhost:${port}!`,
    'You can render a video by passing props as URL parameters.',
    '',
    'If you are running Hello World, try this:',
    '',
    `http://localhost:${port}?titleText=Hello,+World!&titleColor=red`,
    '',
  ].join('\n')
);