How To Create a Screen recorder with Next.js

Introduction

DEMO

Build a screen recording software that turns your screen output activity to the video output. This feature comes in handy in dynamic situations such as product demonstration/presentation where a user can use its features to make videos of screen sequences showing how an application works. The app also allows narration during capture.

User Guide

  • Open the app in your browser
  • Click ‘START RECORDING’ button to proceed
  • Select whether to record entire screen, specific window or specific chrome tab’ and click ‘Share’
  • Allow the app to use your microphone
  • Use ‘PAUSE RECORDING’ button to pause your video if necessary
  • Click “STOP RECORDING’ to stop your recording when complete
  • The video will automatically display on the video tab.
  • use ‘RESET RECORDING’ button to reset your media Stream

Prerequisites

  • Basic knowledge in React , JavaScript, HTML and CSS

Requirements

  • Linux / Windows 8 or any higher version
  • Nodejs
  • Visual Studio Code (VsCode)
  • This article uses git bash terminal and Linux operating system.

What you will learn:

  • How to set up a Next js Project.
  • How to create the screen recorder

INSTALL REQUIRED APPS

1. Install node.

In your browser, use this link to go to the nodejs official website. Click to download nodejs respective to your operating system

install node
  • In your terminal type the following command to confirm nodejs installation node -v

Install Visual Studio Code

  • Use this link to download VsCode and install the app.

Next js

  • Create your projects root folder and access it via your terminal
  • Create your next js app; we will name ours ‘screenrec’: npx create-next-app screenrec. The project’s first instance is successfully built at this point
  • Run the project using: npm run dev
  • The project uses port 3000 as your local server. Access it through the following link to view your project first instance
next js first instance

To open the directory via VsCode, type this command in your terminal: code .

The project’s first page is rendered from the index component in the ‘pages/index.js’ directory. It will serve as our root component to provide the page contents displayed above.

Delete all contents from the index.js page and replace with the following code:

In the code above, we import a function named ‘Recorder’ from a component called ‘recorder’ located from a components folder which we will create shortly. The function is then rendered from our Home function’s return statement.

Let us create our Record function. In the project root directory create a folder name it ‘components’. Inside it create a file called ‘recorder.js’. Your project should look like below

recorder component created

**NOTE**: Use the codes below to add css styling to your app. Paste them in your ‘styles/global.css’ directory

In your ‘components/recorder.js’ directory, paste the following

.

code guide:

  • line 1: This hook allows us to access a DOM element imperatively.
  • line 2:You will need to download and install this module to use it. in your terminal achieve this using npm install use-screen-recorder
  • line 3: We eill use this module to create our button elements. Download material-ui using npm install @material-ui to use it.
  • line 5: Create your “Recorder dunction”
  • line 6: built-in React hook that accepts one argument as the initial value and returns a reference (aka ref). A reference is an object having a special property current.
  • line 8-16: React hook for easily recording screen using MediaStream APIs.

line 19-62: the return statement will return the UI.

The diagram below shows the UI created by our code. Follow the instructions from the buttons to record your screen.

screen_recorder ui

That’s it! Enjoy creating your videos

Optional Approach to this project:

  • Create project directory
  • Use your the terminal to clone the app:  git clone https://github.com/apeli23/screen_recorder.git
  • Install project dependencies with: npm install
  • Run the project: npm run dev

Happy coding!

0 Shares:
You May Also Like