node.js - Page.startScreencast Chrome DevTools 协议(protocol)低 FPS 问题

Question

对于 puppeteer，我正在使用 Chrome DevTools 协议(protocol) Page.startScreencast截取网页截图并使用 FFMPEG 将这些截图转换为视频
这是我创建的工具的简化版本:

const browser = await puppeteer.launch({
     headless: true,
});
const page = await browser.newPage();
page.setViewport({
    width: 678,
    height: 1080,
});

await page.goto(`https://youtu.be/7G6FfKXvZX8`,
     {
        waitUntil: 'networkidle0',
     }
);

const client = await this.page.target().createCDPSession();
client.on('Page.screencastFrame', async (frameObject) => {

   await writeImageFilename(frameObject.data);
   await client.send('Page.screencastFrameAck', {
      sessionId: frameObject.sessionId,
   });
}

client.send('Page.startScreencast', {
   format: 'png',
   quality: 100,
   maxWidth: 678,
   maxHeight: 1080,
   everyNthFrame: 1,
});
await page.waitForTimeout(6000);
client.send('Page.stopScreencast');

// Helper func
async writeImageFilename(data) {
   const filename = path.join(
      '/tmp',
      Date.now().toString() + '.png'
    );
    fs.writeFileSync(filename, data, 'base64');
    return filename;
}

(为了简单起见，我没有包含 ffmpeg 部分。)
上面的脚本基本上会上传到 youtube，并在 6 秒内拍摄 60 个屏幕截图。这样我可以创建一个 FFMPEG 10 fps 视频。
但这就是问题所在。在 6 秒内捕获 60 帧是非常慢的性能。
有没有办法增加这个数字？

Answer 1

“上面的脚本基本上youtube，6秒60张截图。”
我不认为这是严格正确的。
“nthFrame”不是时间派生的，而是由 chrome 生成的帧。
如果 chrome UI 在 60 秒内没有变化，则不会发送任何帧。
在 chrome 制作动画时，每一帧都会作为截屏事件发送给您。
但是，需要注意的是，在 ack 之前，chrome 将不会再发送任何截屏事件。已经收到。
我相信 chrome 会继续渲染，但不会在您没有“确认”时提供任何更新的截屏视频(我想它认为轰炸消费者没有意义？)
具有较低的“第 n 帧”将导致更流畅的动画，但更多的截屏事件，但在当前截屏“未确认”时没有事件。
此外，质量越高，要处理的 screnecast 事件就越大。
我个人会:

增加第n帧

降低质量

“确认”截屏视频作为“screencastFrame”监听器的第一行

将图像存储到内存中，然后离线保存到磁盘

您确认和处理的速度越快，您收到的图像就越多