headless chrome can't capture screenvideo or animation

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 printed out something. So I assume it’s not triggered.

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?

[mafredri]

@t-io I was curious so I decided to implement this in my Go library (cdp) and I think I know why this is not working for you, there are two reasons:

1. After receiving a frame, you must acknowledge it (Page.screencastFrameAck) with the received session ID (e.g. do this in your screencastFrame-handler)
2. No events also means there will be no frames, try scrolling, highlighting, writing, etc. that will trigger new frames to be created

Implemented in Go, the relevant part would look like this.

All this makes sense, from a protocol standpoint, on the other hand it’s not very intuitive for a user, easy to miss.

[t-io]

@mafredri thanks a lot! You are totally right. I was not aware of the fact that you have to acknowledge the frames. After I adjusted my code according your example it works.
All the frames are triggered and saved.