Make an mp4 out of a Chrome DevTools trace with screenshots.

trace-to-mp4.js

#!/usr/bin/env node
const fs = require('fs');
const path = require('path');
const execSync = require('child_process').execSync;

if (process.argv.length < 3) {
  console.log(`node ${path.relative('.', process.argv[1])} [DevToolsProfile]`);
  process.exit(1);
}
let traceFile = path.resolve(process.argv[2])

let trace = JSON.parse(fs.readFileSync(traceFile, 'utf8'));
trace = trace.filter(event => event.name === "Screenshot").sort((a, b) => a.ts - b.ts);
trace.forEach((event, i) => {
  let buffer = Buffer.from(event.args.snapshot, "base64");
  let n = i.toString();
  while (n.length < 4) n = "0" + n;
  fs.writeFileSync(`screen${n}.jpg`, buffer);
});

let { name } = path.parse(traceFile);
execSync(`ffmpeg -r 60 -f image2 -i screen%04d.jpg -vcodec libx264 -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" ${name}.mp4`, {stdio: 'inherit'});