<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VScoder How to create screen recorder</title>
<style>
button{
color:black;
background-color:white;
border: 2px solid black;
}
button:hover{
color: white;
background-color: black;
border: 1px solid white;
}
</style>
</head>
<body>
<button id="start">Start</button>
<button id="stop">Stop</button>
<script>
let start = document.getElementById('start'),
stop = document.getElementById('stop'),
mediaRecorder;
start.addEventListener('click', async function(){
let stream = await recordScreen();
let mimeType = 'video/webm';
mediaRecorder = createRecorder(stream, mimeType);
})
stop.addEventListener('click', function(){
mediaRecorder.stop();
})
async function recordScreen() {
return await navigator.mediaDevices.getDisplayMedia({
audio: true,
video: { mediaSource: "screen"}
});
}
function createRecorder (stream, mimeType) {
let recordedChunks = [];
const mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = function (e) {
if (e.data.size > 0) {
recordedChunks.push(e.data);
}
};
mediaRecorder.onstop = function () {
saveFile(recordedChunks);
recordedChunks = [];
};
mediaRecorder.start(200);
return mediaRecorder;
}
function saveFile(recordedChunks){
const blob = new Blob(recordedChunks, {
type: 'video/webm'
});
let filename = window.prompt('Enter file name'),
downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = `${filename}.webm`;
document.body.appendChild(downloadLink);
downloadLink.click();
URL.revokeObjectURL(blob);
document.body.removeChild(downloadLink);
}
</script>
</body>
</html>