How to use Page.startScreencast command of Chrome DevTools Protocol in electron to record as image or video?

Question

I want to record my electron app's content using Page.startScreencast command of Chrome DevTools Protocol?

Could not find out any exmaple use. How can achieve this?

Answer 1

Sorry my answer is based on Puppeteer, I have no experience in electron. But it seems it is possible to use them together. Not sure it will answer your use case though. There might be a better way to access Chrome Devtools Protocol directly with some Electron's APIs.

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

For a classical Puppeteer / Node solution

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')