Categories: JavaScript

Recording Video Using JavaScript

JavaScript is a text-based programming language used both on the client-side and server-side that allows you to make web pages interactive.

Here one important thing is that recording audio on web pages is also done using JavaScript.

Step 1:- Create an index.html file and add the following code in your HTML file

<!DOCTYPE html>
<html>
<head>
<title>Demo - Record Photo From Webcam Using Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style type="text/css">

button {
    width: 150px;
    padding: 10px;
    display: block;
    margin: 20px auto;
    border: 2px solid #111111;
    cursor: pointer;
    background-color: white;
}

#start-camera {
    margin-top: 50px;
}

#video {
    display: none;
    margin: 50px auto 0 auto;
}

#start-record, #stop-record, #download-video {
    display: none;
}

#download-video {
    text-align: center;
    margin: 20px 0 0 0;
}

</style>
</head>

<body>

<button id="start-camera">Start Camera</button>
<video id="video" width="320" height="240" autoplay></video>
<button id="start-record">Start Recording</button>
<button id="stop-record">Stop Recording</button>
<a id="download-video" download="test.webm">Download Video</a>

<script>

let camera_button = document.querySelector("#start-camera");
let video = document.querySelector("#video");
let start_button = document.querySelector("#start-record");
let stop_button = document.querySelector("#stop-record");
let download_link = document.querySelector("#download-video");

let camera_stream = null;
let media_recorder = null;
let blobs_recorded = [];

camera_button.addEventListener('click', async function() {
    try {
     camera_stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
    }
    catch(error) {
     alert(error.message);
     return;
    }

    video.srcObject = camera_stream;
    camera_button.style.display = 'none';
    video.style.display = 'block';
    start_button.style.display = 'block';
});

start_button.addEventListener('click', function() {
    media_recorder = new MediaRecorder(camera_stream, { mimeType: 'video/webm' });

    media_recorder.addEventListener('dataavailable', function(e) {
     blobs_recorded.push(e.data);
    });

    media_recorder.addEventListener('stop', function() {
     let video_local = URL.createObjectURL(new Blob(blobs_recorded, { type: 'video/webm' }));
     download_link.href = video_local;

        stop_button.style.display = 'none';
        download_link.style.display = 'block';
    });

    media_recorder.start(1000);

    start_button.style.display = 'none';
    stop_button.style.display = 'block';
});

stop_button.addEventListener('click', function() {
  media_recorder.stop(); 
});

</script>

</body>
</html>