buildmymcpserver/remotion/scripts/postprocess.mjs

// Re-encode the raw Remotion output to a browser-safe MP4 then delete
// the raw file. The previous pipeline used `-c:v copy` which preserved
// `pix_fmt=yuvj420p` (JPEG full-range) — Chrome refuses to decode that
// correctly and the video ships as a black square on the marketing page.
//
// Flags below were verified to produce a tag the browsers accept:
//   pix_fmt=yuv420p, color_range=tv, profile=Main, level=4.0, BT.709.

import { spawnSync } from 'node:child_process';
import { existsSync, unlinkSync } from 'node:fs';
import { resolve, dirname } from 'node:path';
import { fileURLToPath } from 'node:url';

const __dirname = dirname(fileURLToPath(import.meta.url));
const root = resolve(__dirname, '..');
const rawPath = resolve(root, 'out', 'hero-raw.mp4');
const outPath = resolve(root, 'out', 'hero.mp4');

if (!existsSync(rawPath)) {
  console.error(`postprocess: input not found at ${rawPath}`);
  process.exit(1);
}

const ffmpegArgs = [
  '-y',
  '-i', rawPath,
  '-c:v', 'libx264',
  '-profile:v', 'main',
  '-level', '4.0',
  '-vf', 'format=yuv420p,colorspace=bt709:iall=bt709:fast=1',
  '-color_range', 'tv',
  '-color_primaries', 'bt709',
  '-color_trc', 'bt709',
  '-colorspace', 'bt709',
  '-preset', 'slow',
  '-crf', '23',
  '-c:a', 'aac',
  '-b:a', '96k',
  '-ar', '44100',
  '-movflags', '+faststart',
  outPath,
];

const result = spawnSync('ffmpeg', ffmpegArgs, { stdio: 'inherit' });
if (result.status !== 0) {
  console.error(`postprocess: ffmpeg exited with code ${result.status}`);
  process.exit(result.status ?? 1);
}

unlinkSync(rawPath);
console.log(`postprocess: wrote ${outPath} and removed raw input`);