<!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>调用摄像头录像</title>
</head>
<body>
<video width="640" height="480" id="video" muted autoplay></video>
<button onclick="start()">开始</button>
<button type="button" onclick="stop()">结束</button>
<script>
var recoder;
var data = []
function start() {
navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(stream => {
document.getElementById("video").srcObject = stream;
recoder = new MediaRecorder(stream);
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() + ".mp4";
document.body.appendChild(link)
link.click()
URL.revokeObjectURL(link.href)
link.remove()
}
recoder.start()
})
}
function stop() {
recoder.stop();
data = []
}
</script>
</body>
</html>
