<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<button type="button" onclick="recordScreen()">Start</button>
<button type="button" onclick="stop()">stop</button>
<script src='index.js'></script>
<script>
var recoder;
function recordScreen() {
navigator.mediaDevices.getDisplayMedia({ audio: true, video: true }).then(stream => {
recoder = new MediaRecorder(stream);
var data = []
recoder.ondataavailable = function (e) {
data.push(e.data)
}
recoder.onstop = function () {
this.stream.getTracks().forEach(track => track.stop());
var blob = new Blob(data, { type: this.mimeType });
var link = document.createElement("a")
link.href = URL.createObjectURL(blob)
link.download = new Date().getTime() + ".webm";
document.body.appendChild(link)
link.click()
URL.revokeObjectURL(link.href)
link.remove()
}
recoder.start()
})
}
function stop() {
recoder.stop();
}
</script>
</body>
</html>