Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

headless chrome can't capture screenvideo or animation

See original GitHub issue

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;

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();
          counter += 1;

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

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:2
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

mafredricommented, May 19, 2017

@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-iocommented, May 22, 2017

@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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

headless chrome capture screen video or animation
Save this question. Show activity on this post. I try to capture some animations from a website and stitch them together using ffmpeg....
Read more >
Capture CSS Animations into video with frame precision
Running headless Chrome and executing DevTools protocol command HeadlessExperimental.beginFrame() fetching the screenshots seems like the way to go. Now I'm ...
Read more >
Using a headless browser to capture page screenshots
Puppeteer - A headless Chrome node API · Launch the browser · Open a new page · Navigate to the chosen URL ·...
Read more >
How to perform server-side rendering in Verge3D - Soft8Soft
Unmasked Vendor/Renderer lines say that Chrome Headless uses real GPU of the ... With Puppeteer you can also capture videos of your Verge3D...
Read more >
Set up Chrome Remote Desktop for Linux on Compute Engine
Create a headless Compute Engine VM instance to run Chrome Remote ... with Chrome Remote Desktop (Light Locker displays a blank screen that ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found