HTML5 & javascript - 从支持多台相机的设备上拍照

Question

我正在开发一个基于 Vuejs 的 PWA。 我已经实现了一个使用设备内置相机拍照的组件。 它正在使用

• navigator.mediaDevices.getUserMedia API 带有一个video元素，用于显示来自相机的流。
• 一个canva及其getContext("2d").drawImage方法从流中获取图片并将其显示给用户
• navigator.mediaDevices.enumerateDevices API 获取可用摄像机列表和getUserMedia的约束参数以在这些之间切换。

这一切都很好:)

但是现在我偶然发现了一个新问题：最近的一些智能手机有多个后置摄像头，内置相机软件会将这些摄像头组合起来只拍摄一张照片（一个相机适合低曝光，另一个适合高曝光，还有一个在其他一些条件下，等等）。 在这种情况下，我的应用程序将显示所有相机并让用户独立使用它们。 预期的行为是像内置软件一样将它们组合起来。 这怎么可能？

Answer 1

在尝试具有 1 个（正面）、2 个（背面和正面）和多个摄像头传感器（1 个正面，多个背面）的多个设备后，我的解决方案包括使用mediaDevices.enumerateDevices()返回的MediaDeviceInfo对象的 label 属性：

• 如果它包含“前置”，则它是前置摄像头
• 如果包含“back”，则为后置摄像头
• 如果它包含多个前置摄像头和/或后置摄像头，那么标签包含“0”的那个就是将其他摄像头组合在一起的那个。 而且，列表中的第一个似乎总是前置摄像头，最后一个是组合后置摄像头。

然后我的代码获取前置摄像头和组合后置摄像头的 id 如下（它假设总是只有一个前置摄像头）：

return navigator.mediaDevices.enumerateDevices()
.then(mediaDevices => {
  let cameras = mediaDevices.filter(mediaDevice => mediaDevice.kind === 'videoinput');
  console.log("#potential camera=" + cameras.length);
  if(cameras.length<=2)
    return cameras.map(x => x.deviceId);
  else {
    let front = cameras.find(x => x.label.match(/\bfront\b/));
    let back = cameras.filter(x => x.label.match(/\bback\b/) && x.label.match(/\b0\b/))
    if(!front || back.length!=1) {
      console.log("no clear front and back, taking first and last one - cameras=", cameras);
      return [cameras[0].deviceId, cameras[cameras.length-1].deviceId];
    }
    else {
      console.log("clear front and back");
      return [front.deviceId, back[0].deviceId];
    }
  }
}