如何在 getUserMedia() 中的多个后置摄像头中选择最高分辨率

Posted 2023-05-06

【中文标题】如何在 getUserMedia() 中的多个后置摄像头中选择最高分辨率

【英文标题】：How to select the highest resolution among multiple rear camera in getUserMedia()

【发布时间】：2021-10-25 01:25:35

【问题描述】：

我使用的是安卓手机。当我尝试在网页中显示后置摄像头图像时，图像总是“放大”。我希望相机图像与我在本机相机中看到的相同，但事实并非如此。

最近我才发现，当我列出摄像头来源时，有多个后置摄像头来源。所以我认为上面的“放大图像”只是因为我使用了第一个默认列出的后置摄像头。

不知道如何选择合适的后置摄像头？

在网上找到的同一个案例

很抱歉演示文稿不佳。如果你不明白我的问题，我可以进一步解释。

'use strict';

var videoElement = document.querySelector('video');
var audioselect = document.querySelector('select#audioSource');
var videoSelect = document.querySelector('select#videoSource');

audioSelect.onchange = getStream;
videoSelect.onchange = getStream;

getStream().then(getDevices).then(gotDevices);

function getDevices() 
  return navigator.mediaDevices.enumerateDevices();


function gotDevices(deviceInfos) 
  window.deviceInfos = deviceInfos; // make available to console
  console.log('Available input and output devices:', deviceInfos);
  for (const deviceInfo of deviceInfos) 
    const option = document.createElement('option');
    option.value = deviceInfo.deviceId;
    if (deviceInfo.kind === 'audioinput') 
      option.text = deviceInfo.label || `Microphone $audioSelect.length + 1`;
      audioSelect.appendChild(option);
     else if (deviceInfo.kind === 'videoinput') 
      option.text = deviceInfo.label || `Camera $videoSelect.length + 1`;
      videoSelect.appendChild(option);
    
  


function getStream() 
  if (window.stream) 
    window.stream.getTracks().forEach(track => 
      track.stop();
    );
  
  const audioSource = audioSelect.value;
  const videoSource = videoSelect.value;
  const constraints = 
    audio: deviceId: audioSource ? exact: audioSource : undefined,
    video: deviceId: videoSource ? exact: videoSource : undefined
  ;
  return navigator.mediaDevices.getUserMedia(constraints).
    then(gotStream).catch(handleError);


function gotStream(stream) 
  window.stream = stream; // make stream available to console
  audioSelect.selectedIndex = [...audioSelect.options].
    findIndex(option => option.text === stream.getAudioTracks()[0].label);
  videoSelect.selectedIndex = [...videoSelect.options].
    findIndex(option => option.text === stream.getVideoTracks()[0].label);
  videoElement.srcObject = stream;


function handleError(error) 
  console.error('Error: ', error);

【参考方案1】：

我不确定它是否正确。但至少目前，它适用于在此修复之前出现问题的我的 android 手机。似乎有 0 的总是合适的。

var constraints = 
   facingMode: 'environment'
;
    
function gotDevices(mediaDevices)    
 mediaDevices.forEach(mediaDevice => 
  if (mediaDevice.kind === 'videoinput') 
   if( !isIOS && mediaDevice.label.includes("0") )
    constraints = 
     deviceId : mediaDevice.deviceId
    ;
    return;
   
  
 );

             
navigator.mediaDevices.enumerateDevices().then(gotDevices).then(function()
     navigator.mediaDevices
     .getUserMedia(
      audio: false,
      video: constraints
     )
     .then(function(stream)
      window.stream = stream;
      video.srcObject = stream;
     )
     .catch(handleError);
    );