<!DOCTYPE html>
<html>
<video id="v"></video>
<button id="start" style="height:50px;width:50px"></button>
<button id="stop" style="height:50px;width:50px"></button>
<script>
let chunks = [];
let mr = null;
navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
let video = document.getElementById("v");
video.srcObject = stream;
video.play();
mr = new MediaRecorder(stream);
mr.ondataavailable = (e) => {
chunks.push(
e.data
);
}
mr.onstop = () => {
const link = document.createElement('a');
link.style.display = 'none';
const blob = new Blob(chunks);
const url = window.URL.createObjectURL(blob);
link.href = url;
link.download = "video.mp4";
document.body.appendChild(link);
link.click();
link.remove();
}
let startButton = document.getElementById("start");
startButton.onclick = () => {
mr.start(100);
}
let stopButton = document.getElementById("stop");
stopButton.onclick = () => {
mr.stop();
}
})
</script>
</html>
