Screen Recorder Tool Code

Screen Recorder Tool is a Javascript, Css and HTML Based tool. Your can use this tool to record screen of Computer, Laptop and Mobile Phone screen and can download video without Thumbnail. See the live demo below and Download complete working code of the tool.
Copy Paste Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Screen Recorder Tool</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(135deg, #ff9a9e, #fad0c4, #fbc2eb);
            color: #333;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .container {
            text-align: center;
            background: #fff;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 90%;
            max-width: 400px;
        }
        h1 {
            font-size: 24px;
            margin-bottom: 20px;
        }
        button {
            font-size: 16px;
            padding: 10px 20px;
            margin: 10px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .start {
            background-color: #28a745;
            color: white;
        }
        .start:hover {
            background-color: #218838;
        }
        .stop {
            background-color: #dc3545;
            color: white;
        }
        .stop:hover {
            background-color: #c82333;
        }
        .download {
            background-color: #007bff;
            color: white;
        }
        .download:hover {
            background-color: #0056b3;
        }
        video {
            width: 100%;
            margin-top: 20px;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Screen Recorder Tool</h1>
        <button class="start">Start Recording</button>
        <button class="stop" disabled>Stop Recording</button>
        <button class="download" disabled>Download Recording</button>
        <video controls autoplay></video>
    </div>

    <script src="https://cdn.webrtc-experiment.com/RecordRTC.js"></script>
    <script>
        const startButton = document.querySelector('.start');
        const stopButton = document.querySelector('.stop');
        const downloadButton = document.querySelector('.download');
        const video = document.querySelector('video');

        let recorder;
        let stream;

        // Start Recording
        startButton.addEventListener('click', async () => {
            startButton.disabled = true;
            stopButton.disabled = false;

            try {
                stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true });
                recorder = new RecordRTC(stream, { type: 'video' });
                recorder.startRecording();
                video.srcObject = stream;
            } catch (err) {
                alert('Error: ' + err.message);
                startButton.disabled = false;
                stopButton.disabled = true;
            }
        });

        // Stop Recording
        stopButton.addEventListener('click', () => {
            stopButton.disabled = true;
            downloadButton.disabled = false;

            recorder.stopRecording(() => {
                const blob = recorder.getBlob();
                video.src = URL.createObjectURL(blob);
                video.srcObject = null;

                // Release the screen capture stream
                stream.getTracks().forEach(track => track.stop());

                // Prepare download button
                downloadButton.onclick = () => {
                    const a = document.createElement('a');
                    a.href = URL.createObjectURL(blob);
                    a.download = 'screen-recording.webm';
                    a.click();
                };
            });
        });
    </script>
</body>
</html>
Screen Recorder Tool Code

Post a Comment

Contact Form
