DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Bentil Shadrack
Bentil Shadrack

Posted on • Updated on

PUPPETEER SCREEN RECORDER SERVER – EXPRESS.JS

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 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

Getting Started

  1. Environment Setup: Navigate to you project directory on the command prompt
// run the following command and follow the commands to set up your environment
npm init
Enter fullscreen mode Exit fullscreen mode

Final output should look like the snippet belowπŸ‘‡

Environment Setup

Install Dependencies

  1. express
  2. nodemon
  3. puppeteer-screen-recorder
npm i express nodemon puppeteer-screen-recorder
Enter fullscreen mode Exit fullscreen mode
  1. Create Entry File (index.js)

Note: To understand how to navigate the puppeteer codebase and understand how it is implemented, I used askyourcode.
gif
This will save you a lot of time looking for code snippets and implementation online.

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} πŸš€`);
});
Enter fullscreen mode Exit fullscreen mode

NB: to use ES6 synthax import dependencies, set type: 'module' in the package.json file.

Package.json

Final Project Structure:

Project Strucuture

Test you Server with Any API testing Tool/Client. In my case, I use Thunder Client extension in vscode.

Testing

Testing

Screenshot of Recorder Video

Image shot

In this article, We only learnt how to setup an API client to record sites when called.
You can use askyourcode to explore the package codebase 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 for how I implemented the error handling middlerware.

Happy Hacking!
hacking

Bentil hereπŸš€
If you find this content helpful, Please Like, comment and share

Top comments (3)

Collapse
 
ethel3 profile image
Ethel Akrasi Akosua

Great❀️‍πŸ”₯πŸ‘

Collapse
 
konaduakwasiakuoko profile image
Konadu Akwasi Akuoko

Thanks brother, a good guide indeed.

Happy hacking to you too :)

Collapse
 
qbentil profile image
Bentil Shadrack

Thank you BroπŸ™Œ

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!