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

link到github issue详细解释。

Answer 2

我遇到了同样的问题。它没有打印任何东西，因为进程在收到第一帧事件之前就终止了，这对我来说很有意义。我通过让进程保持至少 5 秒来解决它。

这对我有用：

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

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

await new Promise(r => setTimeout(r, 5000)); // wait 5 seconds

这样，我们就不需要任何循环了。

请注意，它也适用于我，无需确认每一帧。

我的机器上的帧速率非常低（尽管 chrome 以 60 FPS 渲染，但仍约为 10fps）。也许它只发送实际具有不同内容的每一帧。

headless chrome 捕获屏幕视频或动画

headless chrome capture screen video or animation

google-chrome

video

ffmpeg

screen-capture

headless