Node.js Puppeteer Project to Record Screen and Save it as MP4 Video File Using FFMPEG Library

Welcome folks today in this blog post we will be recording screen inside the browser and save it as mp4 video file using ffmpeg library and puppeteer library in command line. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new node.js project using the below command as shown below

npm init -y

npm i puppeteer

npm i puppeteer-screen-recorder

And after that you need to make a index.js file and copy paste the following code

index.js

const puppeteer = require("puppeteer");
 
const { PuppeteerScreenRecorder } = require("puppeteer-screen-recorder");
(async () => {
  // insitiate puppetter
 
  const browser = await puppeteer.launch({
    headless: false,
    args: ["--autoplay-policy=no-user-gesture-required"],
  });
 
  const page = await browser.newPage();
 
  // record this video file
 
  const recorder = new PuppeteerScreenRecorder(page);
 
  await recorder.start("output.mp4");
 
  await page.goto("https://google.com");
 
  await page.waitForSelector(
    "body > div.L3eUgb > div.o3j99.ikrT4e.om7nvf > form > div:nth-child(1) > div.A8SBwf > div.RNNXgb > div > div.a4bIc > input"
  );
 
  await page.type('input[aria-label="Search"]', "Coding Shiksha");
 
  await page.keyboard.press("Enter");
 
  await page.waitForTimeout(4000); // 4 seconds
 
  await page.type('input[aria-label="Search"]', "Programming Tutorials");
 
  await page.keyboard.press("Enter");
 
  await page.waitForTimeout(4000); // 4 seconds
 
  // stop the recording
 
  await recorder.stop();
 
  await browser.close();
})();

const puppeteer = require("puppeteer");

const { PuppeteerScreenRecorder } = require("puppeteer-screen-recorder");

(async () => {

// insitiate puppetter

const browser = await puppeteer.launch({

headless: false,

args: ["--autoplay-policy=no-user-gesture-required"],

});

const page = await browser.newPage();

// record this video file

const recorder = new PuppeteerScreenRecorder(page);

await recorder.start("output.mp4");

await page.goto("https://google.com");

await page.waitForSelector(

"body > div.L3eUgb > div.o3j99.ikrT4e.om7nvf > form > div:nth-child(1) > div.A8SBwf > div.RNNXgb > div > div.a4bIc > input"

);

await page.type('input[aria-label="Search"]', "Coding Shiksha");

await page.keyboard.press("Enter");

await page.waitForTimeout(4000); // 4 seconds

await page.type('input[aria-label="Search"]', "Programming Tutorials");

await page.keyboard.press("Enter");

await page.waitForTimeout(4000); // 4 seconds

// stop the recording

await recorder.stop();

await browser.close();

})();

As you can see we are importing the puppeteer library and then we are recording the screen and saving it as mp4 video file inside the command line.