怎么使用JavaScript操作浏览器摄像头与麦克风？

navigator.mediaDevices.getUserMedia()

MediaStream

getUserMedia()

constraints

const constraints = {
    video: true, // 请求视频流
    audio: true  // 请求音频流
};

navigator.mediaDevices.getUserMedia(constraints)
    .then(function(stream) {
        // 成功获取到媒体流
        // 你可以把这个stream赋值给一个<video>或<audio>元素的srcObject
        const videoElement = document.querySelector('#myVideo');
        if (videoElement) {
            videoElement.srcObject = stream;
            videoElement.play(); // 自动播放，有些浏览器需要手动调用
        }

        // 此时，你已经拿到了摄像头和麦克风的实时数据了
        // 接下来你可以用MediaRecorder来录制，或者用Web Audio API来处理音频
        console.log('媒体流获取成功！', stream);
    })
    .catch(function(err) {
        // 用户拒绝了，或者没有找到设备，或者其他错误
        console.error('获取媒体流时发生错误：', err);
        // 根据不同的错误类型给用户友好的提示
        if (err.name === 'NotAllowedError') {
            alert('您拒绝了访问摄像头和麦克风的权限。请允许后重试。');
        } else if (err.name === 'NotFoundError') {
            alert('未检测到摄像头或麦克风设备。请确保设备已连接并正常工作。');
        } else {
            alert('发生未知错误，请稍后再试。');
        }
    });

constraints

const detailedConstraints = {
    video: {
        width: { ideal: 1280 }, // 优先1280宽
        height: { ideal: 720 }, // 优先720高
        frameRate: { ideal: 30, max: 60 } // 优先30帧，最高60帧
    },
    audio: {
        echoCancellation: true, // 开启回音消除
        noiseSuppression: true  // 开启降噪
    }
};

getUserMedia()

catch

NotAllowedError

NotFoundError

SecurityError

getUserMedia

localhost

OverconstrainedError

constraints

{ video: true, audio: true }

MediaStream

<video>

<video>

<video id="myVideo" autoplay playsinline muted></video>

stream

<video>

srcObject

// 假设你已经成功获取到stream
const videoElement = document.getElementById('myVideo');
if (videoElement) {
    videoElement.srcObject = stream;
    // videoElement.play(); // 很多情况下，设置srcObject后，如果autoplay属性存在，会自动播放。但手动调用一下更稳妥。
}

<canvas>

MediaRecorder

MediaStream

let mediaRecorder;
let recordedChunks = [];

// 假设stream是前面获取到的MediaStream对象
function startRecording(stream) {
    recordedChunks = [];
    mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm; codecs=vp8' }); // 指定MIME类型和编码器

    mediaRecorder.ondataavailable = function(event) {
        if (event.data.size > 0) {
            recordedChunks.push(event.data);
        }
    };

    mediaRecorder.onstop = function() {
        const blob = new Blob(recordedChunks, { type: 'video/webm' });
        const url = URL.createObjectURL(blob);
        // 可以创建一个下载链接，或者发送到服务器
        const a = document.createElement('a');
        a.href = url;
        a.download = 'recorded-video.webm';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url); // 释放URL对象
        console.log('录制完成，视频已下载。');
    };

    mediaRecorder.start(1000); // 每隔1秒触发一次ondataavailable事件
    console.log('开始录制...');
}

// 停止录制
function stopRecording() {
    if (mediaRecorder && mediaRecorder.state !== 'inactive') {
        mediaRecorder.stop();
        console.log('停止录制。');
    }
}

// 假设你在某个按钮点击事件里调用 startRecording(stream)
// 并在另一个按钮点击事件里调用 stopRecording()

mimeType

video/webm; codecs=vp8