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.