<!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;
async function recordScreen() {
var videoStream = await navigator.mediaDevices.getDisplayMedia({ video: true }) //录屏
var audioStream = await navigator.mediaDevices.getUserMedia({ audio: true }) // 录音
var tracks = [];
videoStream.getVideoTracks().forEach(t => tracks.push(t))
audioStream.getAudioTracks().forEach(t => tracks.push(t))
var stream = new MediaStream(tracks)
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>
