探索浏览器中多个摄像头的奇妙世界，开启多元影像之旅

2023-09-02 09:40:49

网络摄像头：在浏览器中解锁多摄像头功能

在当今网络无处不在的世界中，网络摄像头已成为我们日常生活不可或缺的一部分。从视频会议到虚拟社交，网络摄像头让远距离交流变得前所未有地便利。然而，您是否知道您可以在浏览器中使用多个摄像头，从而为开发人员和用户开辟更广泛的可能性？

一、如何使用 getUserMedia 打开多个摄像头

打开多个摄像头的第一步是获取用户的摄像头权限。借助 getUserMedia API，这是一个异步过程，它会返回一个 Promise 对象。

navigator.mediaDevices.getUserMedia({
  video: true,
  audio: false
})
.then(stream => {
  // 处理摄像头流
})
.catch(error => {
  // 处理错误
});

一旦获得权限，就可以创建并显示视频元素，例如 HTML 中的 video 标签或 JavaScript 中的 Video 对象。

<video id="video" width="320" height="240"></video>

const video = document.getElementById('video');
video.srcObject = stream;
video.play();

要使用多个摄像头，只需多次调用 getUserMedia API，并将每个摄像头流添加到新的视频元素即可。

navigator.mediaDevices.getUserMedia({
  video: true,
  audio: false
})
.then(stream => {
  const video = document.createElement('video');
  video.srcObject = stream;
  video.play();
  document.body.appendChild(video);
})
.catch(error => {
  // 处理错误
});

二、条码扫描的演示

让我们将多个摄像头的功能应用到实际生活中。这个演示将使用一个摄像头进行条码扫描，而另一个摄像头拍摄人像。

首先，创建两个视频元素：

<video id="video-barcode" width="320" height="240"></video>
<video id="video-portrait" width="320" height="240"></video>

然后获取摄像头流并使用 ZXing 库进行条码扫描：

navigator.mediaDevices.getUserMedia({
  video: true,
  audio: false
})
.then(stream => {
  const videoBarcode = document.getElementById('video-barcode');
  videoBarcode.srcObject = stream;
  videoBarcode.play();

  ZXing.decodeFromInputVideoDevice(videoBarcode, (result, err) => {
    if (result) {
      // 处理扫描结果
    } else if (err) {
      // 处理错误
    }
  });
})
.catch(error => {
  // 处理错误
});