js 调用摄像头录像

<!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>