Screen Recording using HTML, JavaScript

Zaw Tun Latt answered on August 10, 2022 Popularity 7/10 Helpfulness 6/10

answer Screen Recording using HTML, JavaScript

related javascript screen recorder

Screen Recording using HTML, JavaScript

Comment

<!DOCTYPE html>
<html>
<head>
  <title>Screen Recording with VP9 Codec</title>
</head>
<body>
  <button id="startButton">Start Recording</button>
  <button id="stopButton" disabled>Stop Recording</button>
  <script>
    let mediaRecorder;
    let recordedChunks = [];

    const startButton = document.getElementById('startButton');
    const stopButton = document.getElementById('stopButton');

    async function startRecording() {
      try {
        const stream = await navigator.mediaDevices.getDisplayMedia({ video: { mediaSource: 'screen', mimeType: 'video/webm; codecs=vp9' } });

        mediaRecorder = new MediaRecorder(stream);

        mediaRecorder.ondataavailable = (event) => {
          if (event.data.size > 0) {
            recordedChunks.push(event.data);
          }
        };

        mediaRecorder.onstop = () => {
          const blob = new Blob(recordedChunks, { type: 'video/webm' });
          const url = URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = url;
          a.download = 'screen_recording.webm';
          a.click();
          recordedChunks = [];
        };

        mediaRecorder.start();

        startButton.disabled = true;
        stopButton.disabled = false;
      } catch (error) {
        console.error('Error accessing screen:', error);
      }
    }

    function stopRecording() {
      if (mediaRecorder.state !== 'inactive') {
        mediaRecorder.stop();
        startButton.disabled = false;
        stopButton.disabled = true;
      }
    }

    startButton.addEventListener('click', startRecording);
    stopButton.addEventListener('click', stopRecording);
  </script>
</body>
</html>

Popularity 7/10 Helpfulness 6/10 Language html

Source: chat.openai.com

Tags: html javascript screen-recording using

Link to this answer
Share Copy Link

Contributed on Aug 02 2023

Zaw Tun Latt

0 Answers Avg Quality 2/10

Closely Related Answers

javascript screen recorder

Comment

async function recordScreen() {
    return await navigator.mediaDevices.getDisplayMedia({
        audio: true, 
        video: { mediaSource: "screen"}
    });
}
recordScreen();

Popularity 9/10 Helpfulness 5/10 Language javascript

Source: www.educative.io

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Oct 05 2022

rolewest

0 Answers Avg Quality 2/10

video recording using html , js

Comment

<div id="wap">
  <div class="form-group">
    <label>Record Your Video</label>
    <br>
    <video autoplay="" muted id="stream-elem"  width="100%" height="350px">
    <source src="" type=""  >
    </video>
    <div id="recwap"></div>
    <button onclick="startrecording()" type="button" id="start-stream" class="btn btn-success">Start Recording</button>
    <button onclick="endrecording()" type="button" id="stop-media" class="btn btn-primary">Stop Recording</button>
  </div>
</div>

<script>
var recorder;
var blobContainer = [];
const settings = {
video: true,
audio: true
}
// $('#recorded').hide();
function startrecording(){
    var videoElem = document.getElementById('stream-elem');
    var endBtn = document.getElementById('stop-media');
    $('#stop-media').show();
    $('#stream-elem').show();
    $("#recordv").remove();

    blobContainer = [];
    navigator.mediaDevices.getUserMedia(settings).then((stream) => {
        // console.log(stream);
        videoElem.srcObject = stream

        recorder = new MediaRecorder(stream)
        // console.log(recorder);
        recorder.start();

        recorder.ondataavailable = function (e) {
            
            blobContainer.push(e.data)
        }

        recorder.onerror = function (e) {
            return console.log(e.error || new Error(e.name));
        }
        
        recorder.onstop = function (e) {
            $('#stream-elem').hide();
            var newVideoEl = document.createElement('video')
            newVideoEl.autoplay = true
            newVideoEl.controls = true
            newVideoEl.id = 'recordv'
            newVideoEl.innerHTML = `<source src="${window.URL.createObjectURL(new Blob(blobContainer))}" type="video/mp4">`;
            var recwap = document.getElementById('recwap')
            recwap.appendChild(newVideoEl);	
        }



    })
}   



function endrecording(){
    var videoElem = document.getElementById('stream-elem');
    videoElem.pause();
    recorder.stop();
}
 
</script>

Popularity 8/10 Helpfulness 4/10 Language whatever

Source: Grepper

Tags: html using

Link to this answer
Share Copy Link

Contributed on Aug 10 2022

faheem

0 Answers Avg Quality 2/10

Screen Recording using HTML, JavaScript

Contents

More Related Answers