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>
