How to Record a Video of Website Using Headless Chrome

headless chrome capture screen video or animation

Every received frame also has to be acknowledged.

    await Page.navigate({url: 'http://www.goodboydigital.com/pixijs/examples/12-2/'});
    await Page.loadEventFired();
    await Page.startScreencast({format: 'png', everyNthFrame: 1});

    let counter = 0;
    while(counter < 100){
      const {data, metadata, sessionId} = await Page.screencastFrame();
      console.log(metadata);
      await Page.screencastFrameAck({sessionId: sessionId});
    }

link to github issue for detailed explanation.

using puppeteer-recorder to record video of browser

Add two empty functions called prepare and render in the options.

await record({
  browser: global_browser, // Optional: a puppeteer Browser instance,
  page, // Optional: a puppeteer Page instance,
  output: path + 'output.webm',
  fps: 60,
  frames: 60 * 5, // 5 seconds at 60 fps,
  prepare: function () {}, // <-- add this line
  render: function () {} // <-- add this line
});

Basically it's missing some default functions and the error is not handled properly.

video recording multiple instances of chrome driver

You can use ffmpeg or avconv (a fork of ffmpeg) for it.

avconv \
-f x11grab \         # input for grabbing from X11
-r 15 \              # Frame rate
-s 400x300 \         # Size and width of area to capture
-i :0.0 \            # The display number you created with xvfb
-vcodec libx264 \    # the video codec
/tmp/output-file.mp4

---

Related Topics