使用JavaScript控制相机

随着HTML5的出现，现代浏览器为我们提供了很多可以直接使用的API。其中之一是Navigator.MediaDevices.getUserMedia()API，用于获取本地设备的输入流。这个API可以用来控制相机。

下面将介绍如何使用JavaScript获取相机的视频流并显示在HTML页面上。

步骤

1. 使用navigator.mediaDevices.getUserMedia()方法获取本地视频流。

navigator.mediaDevices.getUserMedia(constraints)
  .then(function(mediaStream) {
    // success callback
  })
  .catch(function(error) {
    // error callback
  });

2. 在这里，我们可以指定允许使用设备的约束，如分辨率、音频等。在本例中，我们只需要指定只使用视频流，使用默认分辨率。

const constraints = {
  video: true
};

3. 成功回调返回流，我们使用video元素来显示视频流。

const video = document.querySelector('video');
video.srcObject = mediaStream;
video.onloadedmetadata = function(e) {
  video.play();
};

4. 最后，如果您想结束视频流，请调用MediaStream.getTracks()以获取Track对象数组，并调用其stop()方法。

mediaStream.getTracks().forEach(function(track) {
  track.stop();
});

完整代码

const constraints = {
  video: true
};

navigator.mediaDevices.getUserMedia(constraints)
  .then(function(mediaStream) {
    const video = document.querySelector('video');
    video.srcObject = mediaStream;
    video.onloadedmetadata = function(e) {
      video.play();
    };
  })
  .catch(function(error) {
    console.log(error);
  });

// 如果需要停止视频流
mediaStream.getTracks().forEach(function(track) {
  track.stop();
});

结论

现在您知道如何在JavaScript中获取相机的视频流。通过使用网页摄像头，您可以创建有趣的应用程序，如视频聊天、视频游戏和人脸检测应用程序等。