javascript - 有没有办法下载捕获的同时显示视觉和音频内容的 webM/mp4 视频？

Question

我正在尝试创建一个工具，人们可以使用他们的网络摄像头直接在浏览器中捕获视频，然后在本地下载该视频。现在，他们捕获的视频保存在浏览器上并完全显示在窗口中，但下载后，只有 mp4 文件的音频内容保存，没有视觉组件。我在下面粘贴了我的代码，任何建议将不胜感激。谢谢！

navigator.mediaDevices.getUserMedia({audio: true, video: true})
    .then(function(mediaStreamObj) {
        let video = document.querySelector('video');
        if ("srcObject" in video) {
            video.srcObject = mediaStreamObj;
        } else {
            video.src = window.URL.createObjectURL(mediaStreamObj);
        }
        video.onloadedmetadata = function(ev) {
            video.play();
        };
        let start = document.getElementById('btnStart');
        let stop = document.getElementById('btnStop');
        let vidSave = document.getElementById('vid2');
        let mediaRecorder = new MediaRecorder(mediaStreamObj);
        let chunks = [];
        let blob = undefined
        start.addEventListener('click', (ev) => {
            mediaRecorder.start();
            console.log(mediaRecorder.state);
        })
        stop.addEventListener('click', (ev) => {
            mediaRecorder.stop();
            console.log(mediaRecorder.state);
        });
        mediaRecorder.ondataavailable = function(ev) {
            chunks.push(ev.data);
        }
        mediaRecorder.onstop = (ev) => {
            blob = new Blob(chunks);
            chunks = [];
            let videoURL = window.URL.createObjectURL(blob);
            vidSave.src = videoURL;
            document.getElementById("download").onclick = function() {
                document.getElementById("downloadLink").href = videoURL;
                document.getElementById("downloadLink").download = "video.mp4";
                document.getElementById("downloadLink").click();
            }
        }
    })
    .catch(function(err) {
        console.log(err.name, err.message);
    });

标签： javascripthtmlwebcammp4