title: headless chrome capture screen video or animation
body: <p>I try to capture some animations from a website and stitch them together using ffmpeg.
  As far as I understand the docs <a href="https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-startScreencast" rel="noreferrer">startScreencast</a> is the way to go.</p>
  
  <p>If I understand that right I can start the screencast with </p>
  
  <p><code>await Page.startScreencast({format: 'png', everyNthFrame: 1});</code> </p>
  
  <p>and listen to <strong>every</strong> incoming frame with </p>
  
  <pre><code>Page.screencastFrame(image =&gt;{
    const {data, metadata} = image;
    console.log(metadata);
  });
  </code></pre>
  
  <p>But it's never prints out something. So I assume it's not called.</p>
  
  <p>I archived my goal with something like this:</p>
  
  <pre><code>let counter = 0;
  while(counter &lt; 500){
    await Page.startScreencast({format: 'png', everyNthFrame: 1});
    const {data, metadata} = await Page.screencastFrame();
    console.log(metadata);
    counter += 1;
  }
  </code></pre>
  
  <p>Which feels like a non-performant hack.
  So any suggestions on how to use <code>startScreencast</code> and <code>screencastFrame</code> properly?</p>