Code Monkey home page Code Monkey logo

Comments (6)

alvitoraidhy avatar alvitoraidhy commented on July 17, 2024 4

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.

from puppeteer-stream.

JijaProGamer avatar JijaProGamer commented on July 17, 2024 2

(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

from puppeteer-stream.

JijaProGamer avatar JijaProGamer commented on July 17, 2024

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

from puppeteer-stream.

atulmy avatar atulmy commented on July 17, 2024

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

from puppeteer-stream.

dokicro avatar dokicro commented on July 17, 2024

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

from puppeteer-stream.

JijaProGamer avatar JijaProGamer commented on July 17, 2024

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

from puppeteer-stream.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.