Recording code session to video

As I make some progress on the code animation stuff (see last experiment) thought it would be good to figure out how to generate a video of the animation.

The good news is, video recording is often used for testing websites, so I can use the same tools here.

Did some research and found playwright from Microsoft. It looks really good.

Installed it:

yarn add playwright

And then put together a small script. It was even able to get 4K output!

Here’s the code:

// generate.js
const { chromium } = require('playwright')

const run = async () => {
  const browser = await chromium.launch()
  const context = await browser.newContext({
    viewport: {
      width: 1920, height: 1080
    },
    recordVideo: {
      dir: '.',
      size: { width: 1920, height: 1080 }
    }
  })
  const page = await context.newPage()

  await page.goto('http://localhost:8080')
  await page.click('button.play')

  setTimeout(async () => {
    await browser.close()
  }, 5000)
}

run()

And then I can run it with:

node generate.js
vlc <video-path>

To turn the video into a GIF, it can be done with ffmpeg:

https://superuser.com/questions/556029/how-do-i-convert-a-video-to-gif-using-ffmpeg-with-reasonable-quality