google-chrome - headless chrome 捕获屏幕视频或动画

Question

我尝试从网站上捕获一些动画并使用 ffmpeg 将它们拼接在一起。 据我了解文档 startScreencast是要走的路。

如果我理解正确，我可以开始截屏视频

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

并使用

收听每个传入的帧

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

但它永远不会打印出任何东西。所以我假设它没有被调用。

我用这样的东西归档了我的目标:

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

这感觉像是一个性能不佳的 hack。 那么关于如何正确使用 startScreencast 和 screencastFrame 有什么建议吗？

Answer 1

每个接收到的帧也必须被确认。

    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});
    }

链接到 github issue详细解释。