puppeteer-stream is using using the resolution of the screen instead of the resolution of the browser

[JijaProGamer]

So puppeteer-stream is recording the video in 1440x900 (The resolution of my screen) instead of 1350x2400 (The resolution of the browser)

The code to record is this:

    browser = await puppeteer_stream.launch(puppeteer, {
        //headless: true,
        executablePath: "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
        args: [`--window-size=1350,2400`],
        //args: ["--start-maximized"],
        defaultViewport: null
    })

    page = await browser.newPage()

    await page.setViewport({
        width: 1350,
        height: 2400
    })

    await page.goto("http://localhost:5085/player.html", { waitUntil: "networkidle2" })

[alvitoraidhy]

Hi. I managed to record to a resolution that I desired using this code. Hopefully it helps

const browser = await launch({
  executablePath: RECORD_CHROME_BIN,
  args: [
    "--no-zygote",
    "--no-sandbox",
    "--disable-gpu",
    "--single-process",
    "--headless=chrome",
    "--start-fullscreen",
    "--ignore-certificate-errors",
    "--disable-software-rasterizer",
    `--window-size=${RECORD_CONFIG.width},${RECORD_CONFIG.height}`,
  ],
});

const page = await browser.newPage();

await page.setViewport({ width: 0, height: 0 });
await page.goto(url);

const videoConstraints = {
  mandatory: {
    minWidth: RECORD_CONFIG.width,
    minHeight: RECORD_CONFIG.height,
    maxWidth: RECORD_CONFIG.width,
    maxHeight: RECORD_CONFIG.height,
  },
};

const stream = await getStream(page, {
  audio: true,
  video: true,
  frameSize: 1000,
  // @ts-ignore
  videoConstraints,
});

In my case I set width and height to 1280 and 720.

[JijaProGamer]

Thanks, but I started using ffmpeg to record the browser so I cannot test this method. But thanks anyways!

[atulmy]

@JijaProGamer that is interesting. Can you point me in direction or code sample for using ffmpeg directly to record the browser tab?

[JijaProGamer]

(This code has been tested on windows. I dont think it works on linux)

ffmpeg -y -rtbufsize 30M -f gdigrab -thread_queue_size 4096 -probesize 5M -draw_mouse 0 -i title="Page Tittle - Google Chrome" -vcodec libx264 -preset slow -crf 0 -b:v 5M -pix_fmt rgb24 ./video.mkv

This basically records a application by the name of "Page Tittle - Google Chrome".

When you open a page, chrome sets the title of the process "Tittle - Google Chrome". Not sure about chromium and other browsers but it should be similar.

The page should be the one selected for ffmpeg to record. If you switch the page it will still record until closing ffmpeg.

-draw_mouse 0 will not show the mouse and -draw_mouse 1 will show it.

Example with audio (Using VB-Audio Virtual Cable, a audio loopback device. Set Chrome to use it instead of auto-selecting a audio device.):

ffmpeg -y -rtbufsize 30M -f gdigrab -thread_queue_size 4096 -probesize 5M -draw_mouse 0 -i title="Page Tittle - Google Chrome" -f dshow -thread_queue_size 4096 -itsoffset 0.5 -rtbufsize 30M -i audio="CABLE Output (VB-Audio Virtual Cable)" -acodec flac -vcodec libx264 -preset slow -crf 0 -b:a 328k -b:v 5M -pix_fmt rgb24 ./video.mkv

If the audio is out of sync change -itsoffset 0.5 to another number

[dokicro]

Are you getting better performance by using ffmpeg for screen capturing?

[JijaProGamer]

Yeah. With puppeteer-stream it uses VP8 software video encoding and libopus software audio encoding. With ffmpeg you could just copy the video stream (You should use a hardware encoder tho, its fast and barely uses storage) and you can just copy audio from ALSA, Pulseaudio or windows drivers