浅谈前端调用摄像头和麦克风

在这篇文章中，我将向你展示如何通过 Javascript 在网页上访问设备的摄像头和麦克风。

调用摄像头

要访问用户的摄像头（或麦克风），我们需要使用 JavaScript MediaStream API。该 API 允许通过流访问这些设备捕获的视频和音频。

第一步首先要检查浏览器是否支持：

if ("mediaDevices" in navigator && "getUserMedia" in navigator.mediaDevices) {
  // 浏览器支持
}

捕获视频流

要捕获由摄像机生成的视频流，我们使用 mediaDevices.getUserMedia 方法。这个方法接收一个对象，其中包含我们要请求的媒体类型（视频或音频）等参数。

const constraints = {
  video: true
};
navigator.mediaDevices
  .getUserMedia(constraints)
  .then(stream => {
     // stream就是摄像头的视频流
  })
  .catch((err) => {});

在上面的调用中，将询问用户是否允许访问摄像机。如果用户拒绝，它将引发异常并且不返回流。因此，必须在 try/catch 块内完成处理这种情况。

在页面上显示视频

有了视频流，我们可以在页面上用 video 来显示视频。

navigator.mediaDevices
  .getUserMedia(constraints)
  .then(stream => {
    const player = document.createElement('video');
    // 显示实时视频流
    player.srcObject = stream;
    player.play();
  })
  .catch((err) => {});

访问手机的前后摄像头

默认情况下，getUserMedia 将使用系统默认的视频录制设备。如果是有两个摄像头的手机，它使用前置摄像头。

要访问后置摄像头，我们必须在视频规格中包括 faceModeMode:"environment"，默认值为 faceingMode:"user"，即前置摄像头。

const constraints = {
  video: {
    width: { ... },
    height: { ... },
    facingMode: "environment"
  },
};

上传视频

有些场景，我们需要将录制的视频数据上传到服务器。我们可以使用 MediaRecorder API 来进行视频轻松录制。

let mediaRecorder;
let recordedBlobs;
async function startRecording() {
    try {
        const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
        video.srcObject = stream;
        recordedBlobs = [];
        mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
        mediaRecorder.ondataavailable = (event) => {
            if (event.data.size > 0) {
                recordedBlobs.push(event.data);
            }
        };
        mediaRecorder.start();
        console.log('Recording started');
    } catch (err) {
        console.error('Error accessing the camera/microphone:', err);
    }
}
function stopRecording() {
    mediaRecorder.stop();
    console.log('Recording stopped');
    video.srcObject.getTracks().forEach(track => track.stop());
}

上传服务器：

function handleUpload() {
    const videoBlob = new Blob(recordedBlobs, { type: 'video/webm' });
    const formData = new FormData();
    formData.append('videoData', videoBlob, 'recording.webm');
    fetch('/upload', {  // 确保你的服务器端点正确处理POST请求并接受文件数据
        method: 'POST',
        body: formData,
    })
    .then(response => response.json())
    .then(result => {
        console.log('Upload success:', result);
    })
    .catch(error => {
        console.error('Upload error:', error);
    });
}

调用麦克风

跟调用摄像头一样，需要通过 navigator.mediaDevices.getUserMedia() 方法来请求访问用户的麦克风，不过参数通过 audio 来设置。

navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
        // 成功获取流
        console.log('麦克风访问成功');
    })
    .catch(error => {
        // 错误处理
        console.error('麦克风访问失败:', error);
    });

使用Web Audio API处理音频流

获取到麦克风流后，可以使用Web Audio API来处理音频数据。

let audioContext = new AudioContext();
navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
        // 使用MediaStreamAudioSourceNode将麦克风流连接到音频上下文中
        const source = audioContext.createMediaStreamSource(stream);
        // 接下来可以将source连接到其他AudioNode
        // 例如：直接播放
        const destination = audioContext.destination;
        source.connect(destination);
    })
    .catch(error => {
        console.error('麦克风访问失败:', error);
    });

也可以通过 audio 元素来播放。

navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
      const audioPlayer = document.createElement('audio');
      audioPlayer.srcObject = stream;
      audioPlayer.play();
    })
    .catch(error => {
        console.error('麦克风访问失败:', error);
    });

总结

本文介绍了如何使用 JavaScript 实现音频播放和处理的方法，并提供了具体的代码示例。通过掌握这些基本的API，我们可以在自己的Web应用中实现更复杂的音频播放和处理功能。