electron - 如何在电子中使用 Chrome DevTools 协议的 Page.startScreencast 命令录制为图像或视频？

Question

我想使用Chrome DevTools Protocol的Page.startScreencast命令记录我的电子应用程序的内容？

找不到任何示例用途。怎样才能做到这一点？

Answer 1

对不起，我的回答是基于 Puppeteer，我没有电子经验。但似乎可以一起使用它们。不确定它是否会回答您的用例。使用一些 Electron 的 API 直接访问 Chrome Devtools 协议可能会有更好的方法。

https://www.npmjs.com/package/puppeteer-in-electron

对于经典的 Puppeteer / Node 解决方案

import { Browser, Page } from 'puppeteer'

const browser = await puppeteer.launch({
    // your params
  })

const page = await browser.newPage()
const yourWebSite = 'http://www.whatYouWantToCapture.com'
await page.goto(yourWebSite, {
    waitUntil: 'networkidle0', // Ensure page is finished loading
  })

const client = await page.target().createCDPSession()

//Register a callback on every frame rendered by the browser (framerate depends on a lot of factors)
client.on('Page.screencastFrame', async (frameObject) => {

  // Do what you want with frame, ex write to file on disk
  await fs.writeFile(Date.now()+'.jpeg', frameObject.data, 'base64')
  await this.client.send('Page.screencastFrameAck', {
      sessionId: frameObject.sessionId,
  })
)

// When you want to start
client.send('Page.startScreencast',{
  format: 'jpeg',
  quality: 100,
  maxWidth: 1920,
  maxHeight: 1080,
  everyNthFrame: 1,
})

// When you want to stop
client.send('Page.stopScreencast')