html video recorder
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Vedio recorder</title>
</head>
<body style="background-color: black;">
<div class="myh1">
<h1 style="color: red;">D-G record studio</h1>
<button style="background-color: aqua;"><a href="index.html">Home</a></button>
</div>
<div id="container">
<video id="gum" autoplay muted></video>
<video id="recorded" loop controls></video>
</div>
<div>
<button id="record" disabled>Start Recording</button>
<button id="play" disabled>Play</button>
<button id="download" disabled>Download</button>
</div>
<style>
.myh1{
text-align: center;
background-color: white;
border: 2px solid red;
}
button {
margin: 0 3px 10px 0;
padding-left: 2px;
padding-right: 2px;
width: 99px;
}
button:last-of-type {
margin: 0;
}
p.borderBelow {
margin: 0 0 20px 0;
padding: 0 0 20px 0;
}
video {
height: 232px;
margin: 0 12px 20px 0;
vertical-align: top;
width: calc(20em - 10px);
}
video:last-of-type {
margin: 0 0 20px 0;
}
video#gumVideo {
margin: 0 20px 20px 0;
}
@media screen and (max-width: 500px) {
button {
font-size: 0.8em;
width: calc(33% - 5px);
}
}
@media screen and (max-width: 720px) {
video {
height: calc((50vw - 48px) * 3 / 4);
margin: 0 10px 10px 0;
width: calc(50vw - 48px);
}
video#gumVideo {
margin: 0 10px 10px 0;
}
}
</style>
<script>
var mediaRecorder;
var recordedBlobs;
var gumVideo = document.querySelector('video#gum');
var recordedVideo = document.querySelector('video#recorded');
var recordButton = document.querySelector('button#record');
var playButton = document.querySelector('button#play');
var downloadButton = document.querySelector('button#download');
recordButton.onclick = toggleRecording;
playButton.onclick = play;
downloadButton.onclick = download;
// get stream using getUserMedia
navigator.mediaDevices.getUserMedia({ audio: true,video: true})
.then((stream) => {
recordButton.disabled = false;
console.log('getUserMedia() got stream: ', stream);
window.stream = stream;
gumVideo.srcObject = stream;
})
.catch((error) => {
console.log('navigator.getUserMedia error: ', error);
});
function handleDataAvailable(event) {
if (event.data && event.data.size > 0) {
recordedBlobs.push(event.data);
}
}
function handleStop(event) {
console.log('Recorder stopped: ', event);
}
function toggleRecording() {
if (recordButton.textContent === 'Start Recording') {
startRecording();
} else {
stopRecording();
recordButton.textContent = 'Start Recording';
playButton.disabled = false;
downloadButton.disabled = false;
}
}
// create the media recorder
function startRecording() {
recordedBlobs = [];
try {
mediaRecorder = new MediaRecorder(window.stream);
} catch (e) {
console.error('Exception while creating MediaRecorder: ' + e);
return;
}
console.log('Created MediaRecorder', mediaRecorder);
recordButton.textContent = 'Stop Recording';
playButton.disabled = true;
downloadButton.disabled = true;
mediaRecorder.onstop = handleStop;
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start(10); // collect 10ms of data
console.log('MediaRecorder started', mediaRecorder);
}
function stopRecording() {
mediaRecorder.stop();
console.log('Recorded Blobs: ', recordedBlobs);
recordedVideo.controls = true;
}
function play() {
var superBuffer = new Blob(recordedBlobs, {type: 'video/webm'});
recordedVideo.src = window.URL.createObjectURL(superBuffer);
}
function download() {
var blob = new Blob(recordedBlobs, {type: 'video/mp4'});
var url = window.URL.createObjectURL(blob);
var a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = 'vedio.mp4';
document.body.appendChild(a);
a.click();
setTimeout(function() {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 100);
}
</script>
</body>
</html>