PUPPETEER SCREEN RECORDER SERVER – EXPRESS.JS
Tags: javascript, node, puppeteerscreenrecorder, express
Published: 2022-10-12 12:06:22


It's imperative to spend some time learning about the implementation and operation of screen recording and include it in your projects. The power of screen recording outweighs that of any screen capture and video editing combo.

When a web application has screen recording enabled, users are more likely to save content, look for problems with, and find solutions for, digital screens. One key benefit of screen recording it its ability to demonstrate how to complete tasks on a computer step-by-step. It can also stop, fast-forward, and rewind videos. This method enables the student, teacher, or learner to readily study the content and understand what is happening.

In this article, I will guide you on implementing this functionality in a web browser using React and puppeteer-screen-recorder.

## Environment & Dependencies
1. **Node.js** is an open-source, cross-platform, back-end JavaScript runtime environment that runs on a JavaScript Engine and executes JavaScript code outside a web browser. It is primarily used for non-blocking, event-driven servers, due to its single-threaded nature.
2. [**puppeteer-screen-recorder**](https://www.npmjs.com/package/puppeteer-screen-recorder) is a puppeteer Plugin that uses the native chrome devtool protocol for capturing video frame by frame. Also supports an option to follow pages that are opened by the current page object.

## Prerequisites
• Knowledge of JavaScript programming.
• Knowledge in Express.JS and Node.JS
• A code editor such as [VSCode](https://code.visualstudio.com/)

## Getting Started
1. **Environment Setup:**
Navigate to you project directory on the command prompt

```javascript
// run the following command and follow the commands to set up your environment
npm init
```
Final output should look like the snippet below👇

![Environment Setup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4j6kqev789xj3rc6oeb.png)


**Install Dependencies**
1. express
2. nodemon
3. puppeteer-screen-recorder
```javascript
npm i express nodemon puppeteer-screen-recorder
```

2. **Create Entry File (index.js)**

**Note:** To understand how to navigate the puppeteer codebase and  understand how it is implemented, I used [askyourcode](https://www.askyourcode.com/). 
![gif](https://user-images.githubusercontent.com/3425038/193901565-b9d2feec-dbf9-4b29-9ea9-3b869a158a86.gif)
This will save you a lot of time looking for code snippets and implementation online.

```javascript
import ErrorHandler from "./middlewares/Errorhandler.js";
import { PuppeteerScreenRecorder } from "puppeteer-screen-recorder";
import express from "express";
import puppeteer from "puppeteer";

// init app
const APP = express();
APP.use(express.json());

// Routes
APP.post("/record-screen", async (req, res, next) => {
  try {
    const { url } = req.body;
    const fileName = url.replace(/[:/]/g, "_"); // replace : and / with _ to avoid errors
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    const recorder = new PuppeteerScreenRecorder(page);
    await recorder.start(`./videos/${fileName}.mp4`); // start recording
    await page.goto("https://qbentil.com");
    await recorder.stop();
    await browser.close();
    res.status(200).json({
      success: true,
      message: "Video recorded successfully",
      file: `./videos/${fileName}.mp4`,
    });
  } catch (err) {
    next(err);
  }
});

// ERROR HANDLER MIDDLEWARE
APP.use(ErrorHandler);

// Start server
APP.listen(5000, () => {
  console.log(`Server started on port ${5000} 🚀`);
});
```
**NB:** to use ES6 synthax import dependencies, set type: 'module' in the package.json file.

![Package.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yrl9orkqx0703cu8g3i2.png)

## Final Project Structure:

![Project Strucuture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ihsdg4s8mw1v4p7vaxo.png)

Test you Server with Any API testing Tool/Client. In my case, I use [Thunder Client](https://www.thunderclient.com/) extension in vscode.

## Testing

![Testing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ux5ondqrod2olqzwfi2g.png)

## Screenshot of Recorder Video
![Image shot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xig72p1xg1rrvbuik8yr.png)

In this article, We only learnt how to setup an API client to record sites when called.
You can use [askyourcode](https://www.askyourcode.com/) to explore the package codebase [**puppeteer-screen-recorder**](https://www.npmjs.com/package/puppeteer-screen-recorder) for more configurations to the recorded video such as Video size, duration, Resolution and many more.

I recommend my [error handling article](https://dev.to/qbentil/how-to-write-custom-error-handler-middleware-in-expressjs-using-javascript-29j1) for how I implemented the error handling middlerware.

**Happy Hacking!**
![hacking](https://i.gifer.com/origin/87/875af7bc47e2968f9a3cc442467f10b8_w200.gif)

Bentil here🚀
**If you find this content helpful, Please Like, comment and share**