react-screen-recorder/index.js

A simple React-friendly screen recorder package using MediaRecorder API

class ScreenRecorder {
    constructor() {
        this.mediaRecorder = null;
        this.recordedScreen = [];
    }

    async startRecording() {
        this.recordedScreen = [];
        const stream = await navigator.mediaDevices.getDisplayMedia({
            video: { mediaSource: "screen" },
            audio: true,
        });

        this.mediaRecorder = new MediaRecorder(stream);
        
        this.mediaRecorder.ondataavailable = (event) => {
            if (event.data.size > 0) this.recordedScreen.push(event.data);
        };

        this.mediaRecorder.onstop = () => {
            const blob = new Blob(this.recordedScreen, { type: "video/webm" });
            const videoUrl = URL.createObjectURL(blob);
            
            const a = document.createElement("a");
            a.href = videoUrl;
            a.download = "screen-recording.webm";
            document.body.appendChild(a);
            a.click();
        };

        this.mediaRecorder.start();
    }

    stopRecording() {
        if (this.mediaRecorder) {
            this.mediaRecorder.stop();
        }
    }
}

module.exports = ScreenRecorder;