Very loss quality video

[fagnersales]

• I'm submitting a ... [ ] bug report [ ] feature request [ ] question about the decisions made in the repository [x] question about how to use this project

• Summary I'm trying to record the screen while accessing an youtube video, but it results in a very loss quality video and I'm not sure why.

The code i'm testing:

import { PuppeteerScreenRecorder } from 'puppeteer-screen-recorder'
import puppeteer from 'puppeteer'
import fs from 'fs'

async function recordVideo(
  url: string,
  filePath: string,
  seconds: number
) {
  const file = fs.createWriteStream(filePath)

  const viewport = {
    width: 1024,
    height: 720
  }

  const browser = await puppeteer.launch({
    defaultViewport: viewport
  })

  const page = await browser.newPage()

  await page.setViewport(viewport)

  await page.goto(url)
  const recorder = new PuppeteerScreenRecorder(page, { fps: 60, recordDurationLimit: seconds })
  console.log('Recording')
  await page.keyboard.press('Space')
  await recorder.startStream(file)

  setTimeout(async () => {
    console.log(await recorder.stop())
    console.log('Stopped')
    browser.close()
  }, seconds * 1000)
}

recordVideo(
  'https://www.youtube.com/watch?v=o-2Bwsc2e1o',
  './video-stream.mp4',
  8
)

I also uploaded the result, so you guys can see it. https://youtu.be/DBszvKddl_4

The computer that I'm testing it:

• Windows 10
• Intel I5 3570
• Geforce GT 730 4GB
• 4GB DDR3 1333MHz

If some other information is needed, plase tell me!

[atulmy]

@fagnersales where you find a solution to the choppy video recording?

[kgeis]

The default settings for Chrome's screencasting lead to a low quality video output. This could be improved by adding format and quality options to puppeteer-screen-recorder and passing them to Page.startScreencast.

I would like to have such an improvement because I am trying to make training videos for my software, and the current video output quality is not good enough.

[florinvirdol]

Hi, Any updates on this, please? I'm also trying to record a video with high viewport sizes (1920, 1080) and it seems to have some lag.. :( Thank you! Btw, great job with the library!

[jrabek]

@prasanaworld I did some testing based on @kgeis comment about the format, and I definitely see better results with jpg compared to png (which seems to be the default?). Also noticed that even with jpg, quality of 25 versus 100 doesn't seem to have that big of a difference.

Not entirely sure why they would be different but it is definitely noticeable in terms of smoothness.

I agree that exposing a format in the options would be helpful.

[jrabek]

I tested by modifying the npm module in place:

 await currentSession.send('Page.startScreencast', {
                everyNthFrame: 1,
                format: "jpeg",
                quality: quality,
            });

Actual change would be this I suppose?

 await currentSession.send('Page.startScreencast', {
                everyNthFrame: 1,
                format: this.options.format,
                quality: quality,
            });

[jrabek]

I imagine this combined with https://github.com/prasanaworld/puppeteer-screen-recorder/pull/40 will be huge for being able to tweak the video quality.

[prasanaworld]

@jrabek Thanks for suggestion. I appreciate it..!!

In order to bring up more such healthy discussion and suggestion, created a public discussion forum.

[NvdB31]

For those looking to record pages that feature lots of animations/transitions, I found that Puppeteer by default launches without GPU hardware acceleration (at least in headless mode).

Enabling hardware acceleration by passing args: ['--use-gl=egl'], when launching Puppeteer significantly improves the smoothness of the video recording.