Scribd Logo
Upload

Welcome to Scribd!

  • Arfat

    Uploaded by

    Arfat Shaikh
    8 views2 pages
    This document describes a screen recording tool that uses the browser's media capabilities to record the user's screen and audio. It includes HTML and JavaScript code to build a simple interface with start and stop buttons. When start is clicked, it uses the media devices API to get the user's media stream and starts recording with the RecordRTC library. When stop is clicked, it stops recording and saves the video blob, displaying it in the preview video element.

    Original Description:

    Original Title

    arfat

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document describes a screen recording tool that uses the browser's media capabilities to record the user's screen and audio. It includes HTML and JavaScript code to build a simple interface with start and stop buttons. When start is clicked, it uses the media devices API to get the user's media stream and starts recording with the RecordRTC library. When stop is clicked, it stops recording and saves the video blob, displaying it in the preview video element.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    8 views2 pages

    Arfat

    Uploaded by

    Arfat Shaikh
    This document describes a screen recording tool that uses the browser's media capabilities to record the user's screen and audio. It includes HTML and JavaScript code to build a simple interface with start and stop buttons. When start is clicked, it uses the media devices API to get the user's media stream and starts recording with the RecordRTC library. When stop is clicked, it stops recording and saves the video blob, displaying it in the preview video element.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 2

    <!

    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>
    <start>
    body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
    }

    .container {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    h1 {
    color: #2196F3;
    }

    .controls {
    margin-top: 20px;
    }

    button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #2196F3;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 10px;
    }

    button:disabled {
    background-color: #dcdcdc;
    cursor: not-allowed;
    }

    </start>
    </head>
    <body>
    <div class="container">
    <h1>Screen Recorder Tool</h1>
    <div class="controls">
    <button id="startButton">Start Recording</button>
    <button id="stopButton" disabled>Stop Recording</button>
    </div>
    <video id="previewVideo" controls></video>
    </div>
    <script
    src="https://cdnjs.cloudflare.com/ajax/libs/recordrtc/5.6.0/RecordRTC.min.js"></
    script>
    <script>
    // Global variables
    let recorder;
    const startButton = document.getElementById('startButton');
    const stopButton = document.getElementById('stopButton');
    const previewVideo = document.getElementById('previewVideo');

    // Attach event listeners


    startButton.addEventListener('click', startRecording);
    stopButton.addEventListener('click', stopRecording);

    // Function to start recording


    function startRecording() {
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
    .then(function (stream) {
    previewVideo.srcObject = stream;
    recorder = RecordRTC(stream, {
    type: 'video',
    mimeType: 'video/webm',
    });
    recorder.startRecording();
    startButton.disabled = true;
    stopButton.disabled = false;
    })
    .catch(function (error) {
    console.error('Error accessing media devices:', error);
    });
    }

    // Function to stop recording


    function stopRecording() {
    recorder.stopRecording(function () {
    let blob = recorder.getBlob();
    previewVideo.src = URL.createObjectURL(blob);
    recorder.destroy();
    recorder = null;
    startButton.disabled = false;
    stopButton.disabled = true;
    });
    }

    </script>
    </body>
    </html>

    You might also like