Build a Screen Recorder in Next.js

With the growing need for capturing screen activity in various activities such as tutorials, demonstrations, and presentations there is a demand for a quick and efficient solution to develop a screen recording web application. This article aims to solve this requirement by Next.js, a popular open-source web development React framework that speeds up using server-side rendering capabilities and also enhances SEO.

Steps to Install Next.js

Step 1: Install NodeJS. Follow one of the links to install Node.js according to your system, Windows or Linux.

Step 2: Now create a folder for your project on the desktop navigate to the folder through your code editor and run the following command on the terminal.

npm init -y
npx create-next-app@latest
    or
yarn create next-app 

Project Structure

Approach

• The ScreenRecorder component is a functional component that is exported by default.
• There are two buttons on the website’s UI and one video frame which contains the recording of the screen. The task of these buttons is to fire an event. When the user clicks on the start recording button the startRecording function will get called and when the stop recording button is clicked the stopRecording function is get called.
• Here as soon as the start Recording button is clicked, the video stream of the screen is fetched. The stream is stored in a chunk array.
• On the client side after clicking on the stop recording button the screen video stream is stopped. Then a Blob is created which is a collection of bytes of a video stream to store video in the form of a URL. screen recording gets displayed in the video frame, which the user can view or download by right-clicking on it and saving it to their disk location.

Example: In this example, we will build a Screen Recorder. First, we have to create a screen recorder component.

• pages/index.js

Javascript

'use client'
import React, { useRef, useState } from 'react';
const ScreenRecorder = () => {

    /* Create a reference to the video element,
    which helps in storing continous video stream
    irespective of multiple renders. */
    const screenRecording = useRef(null);

    const [Recorder, setRecorder] = useState(null);
    const [displayMedia, setDisplayMedia] = useState(null);
    const startScreenRecording = async () => {
        const stream = await navigator.mediaDevices.getDisplayMedia({
            audio: true, video: true
        });
        const recorder = new MediaRecorder(stream);
        setRecorder(recorder);
        setDisplayMedia(stream.getVideoTracks()[0]);
        const screenRecordingChunks = [];
        recorder.ondataavailable = (e) => {
            if (e.data.size > 0) {
                screenRecordingChunks.push(e.data);
            }
        }
        recorder.onstop = () => {
            //onstop event of media recorder
            const blob = new Blob(screenRecordingChunks,
                { type: 'video/webm' });
            const url = URL.createObjectURL(blob);
            screenRecording.current.src = url;
            if (displayMedia) {
                displayMedia.stop();
            }
        }
        //Start the recording.
        recorder.start();
    }
    // Style the Button
    const ButtonStyle = {
        backgroundColor: 'green',
        color: 'white',
        fontSize: '2em',
    };

    return (
        <>
            <button style={ButtonStyle} onClick={() =>
                           startScreenRecording()}>
                Start Recording
            </button>
            <button style={ButtonStyle} onClick={() =>
                          { Recorder && Recorder.stop() }}>
                Stop Recording
            </button>
            <br /><br /><br />
            <video ref={screenRecording}
                   height={300}
                   width={600} controls />
        </>
    );
};
export default ScreenRecorder;

Steps to Run:

npm run dev 

Output: Open the browser and search for https://localhost:3000 because the screen recorder will by default open at port 3000 by next.js.This will finally create a fast screen recorder in next.js.