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];
    }
  }
}