JS调用摄像头|极客笔记

JS调用摄像头

在网页开发中，我们经常会有需要调用摄像头的需求，比如实现视频通话、视频录制等功能。而使用JavaScript可以很方便地实现对摄像头的调用。本文将详细介绍如何使用JavaScript调用摄像头，并提供相关示例代码。

使用getUserMedia API调用摄像头

在HTML5中，提供了一个名为getUserMedia的API用于获取用户的媒体设备，包括摄像头、麦克风等。通过getUserMedia API，我们可以在网页中获取到用户的摄像头图像。

getUserMedia API的基本语法如下：

navigator.mediaDevices.getUserMedia(constraints)
  .then(function(stream) {
    // 处理获取到的媒体流
  })
  .catch(function(err) {
    // 处理错误
  });

其中constraints参数是一个对象，用于指定获取媒体流的约束条件，比如是否获取视频流、音频流等。

获取视频流

要调用摄像头获取视频流，我们可以设置constraints对象中的video属性为true：

const constraints = {
  video: true
};

navigator.mediaDevices.getUserMedia(constraints)
  .then(function(stream) {
    const video = document.createElement('video');
    video.srcObject = stream;
    video.play();
    document.body.appendChild(video);
  })
  .catch(function(err) {
    console.error('获取摄像头失败：', err);
  });

在上面的代码中，我们通过getUserMedia函数获取了视频流，并将其绑定到新创建的video元素上，并将video元素添加到文档中，这样就可以在网页中看到来自摄像头的画面了。

获取音频流

如果需要获取音频流，可以设置constraints对象中的audio属性为true：

const constraints = {
  audio: true
};

navigator.mediaDevices.getUserMedia(constraints)
  .then(function(stream) {
    const audioContext = new AudioContext();
    const source = audioContext.createMediaStreamSource(stream);
    source.connect(audioContext.destination);
  })
  .catch(function(err) {
    console.error('获取音频流失败：', err);
  });

在上面的代码中，我们通过getUserMedia函数获取了音频流，并将其绑定到AudioContext中，这样就可以处理音频流了。

示例代码

下面是一个完整的示例代码，展示了如何使用JavaScript调用摄像头并展示视频流：

<!DOCTYPE html>
<html>
<head>
  <title>调用摄像头示例</title>
</head>
<body>
  <video id="videoElement" width="400" height="300" autoplay></video>

  <script>
    const videoElement = document.getElementById('videoElement');

    const constraints = {
      video: true
    };

    navigator.mediaDevices.getUserMedia(constraints)
      .then(function(stream) {
        videoElement.srcObject = stream;
      })
      .catch(function(err) {
        console.error('获取摄像头失败：', err);
      });
  </script>
</body>
</html>

运行上面的示例代码后，将会在网页中显示来自摄像头的视频流。