headless chrome capture screen video or animation

Question

I try to capture some animations from a website and stitch them together using ffmpeg. As far as I understand the docs startScreencast is the way to go.

If I understand that right I can start the screencast with

await Page.startScreencast({format: 'png', everyNthFrame: 1});

and listen to every incoming frame with

Page.screencastFrame(image =>{
  const {data, metadata} = image;
  console.log(metadata);
});

But it's never prints out something. So I assume it's not called.

I archived my goal with something like this:

let counter = 0;
while(counter < 500){
  await Page.startScreencast({format: 'png', everyNthFrame: 1});
  const {data, metadata} = await Page.screencastFrame();
  console.log(metadata);
  counter += 1;
}

Which feels like a non-performant hack. So any suggestions on how to use startScreencast and screencastFrame properly?

Answer 1

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.

Answer 2

I had the same issue. It did not print anything because the process terminated before the first frame event was received, which makes sense to me. I solved it by keeping the process alive for at least 5 seconds.

This worked for me:

await Page.startScreencast({
  format: 'png',
  everyNthFrame: 1,
});

Page.screencastFrame(image => {
  const {data, metadata, sessionId} = image;
  console.log(metadata);
  Page.screencastFrameAck({sessionId: sessionId});
});

await new Promise(r => setTimeout(r, 5000)); // wait 5 seconds

This way, we don't need any loop.

Note that it also worked for me without acknowledging every frame.

The frame rates are pretty low on my machine (~10fps despite having chrome render at 60 FPS). Maybe it only sends every frame which actually has different content.