如何在浏览器中调用摄像头录制视频并在同页面存储播放

你现有代码存在语法错误、变量作用域、API调用错误几类问题，直接用下面修正后的代码即可实现需求：

原代码存在的错误 #

• 第一个<video>标签多写了冗余引号，属于HTML语法错误
• 未声明存储录制片段的数组，stream、recordedChunks变量作用域错误，点击按钮时无法访问
• MediaRecorder事件名拼写错误：ondatavailable正确写法为ondataavailable
• 调用了不存在的API：stream.record()、stream.stop()都不是媒体流的原生方法
• 录制完成后错误直接给DOM元素赋值URL，没有给对应video标签的src属性赋值
• 额外转base64的操作完全多余，会造成不必要的内存占用，直接用Blob生成对象URL即可

修正后完整可运行代码 #

<!-- HTML结构部分 -->
<button id="speak_button">开始录制</button>
    
<div id="circle"><p id="submit_button">Submit</p></div>

<video id="video" width="180" height="140" autoplay muted></video>
<video id="second_video" width="180" height="140" controls></video>

<script>
const video = document.getElementById("video");
const recordPlayVideo = document.getElementById("second_video");
let mediaRecorder;
let recordedChunks = [];
let cameraStream;

// 初始化摄像头、麦克风权限
navigator.mediaDevices.getUserMedia({video: true, audio: true})
.then(function(stream){
    cameraStream = stream;
    video.srcObject = stream;
    video.play().catch(() => {});

    // 初始化录制实例
    mediaRecorder = new MediaRecorder(stream, { mimeType: "video/webm" });
    // 接收录制分片
    mediaRecorder.ondataavailable = function(event) {
        if (event.data.size > 0) {
            recordedChunks.push(event.data);
        }
    };

    // 录制结束时生成可播放的视频地址
    mediaRecorder.onstop = function() {
        const recordBlob = new Blob(recordedChunks, {type: "video/webm"});
        const recordUrl = URL.createObjectURL(recordBlob);
        recordPlayVideo.src = recordUrl;
        // 关闭摄像头、麦克风占用
        cameraStream.getTracks().forEach(track => track.stop());
    }
});

// 开始录制按钮事件
document.getElementById("speak_button").addEventListener("click", function() {
    // 清空上一次录制的缓存
    recordedChunks = [];
    mediaRecorder.start();
});

// 结束录制按钮事件
document.getElementById("submit_button").addEventListener("click", function() {
    mediaRecorder.stop();
});
</script>

功能说明 #

• 页面加载后会申请摄像头、麦克风权限，授权后第一个video标签实时显示摄像头预览画面
• 点击「开始录制」按钮启动音视频录制，点击Submit按钮停止录制
• 停止录制后，录制好的视频会自动加载到第二个带控制栏的video标签中，支持拖动进度、暂停、音量调节
• 录制结束后会自动释放摄像头、麦克风占用，避免设备指示灯常亮
• 如果需要新增下载功能，只需要新增一个按钮，点击时创建a标签，将生成的recordUrl赋值给a标签href，添加download属性即可触发本地下载

内容的提问来源于stack exchange，提问作者spin99