首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在getUserMedia()的多个后置摄像头中选择最高分辨率

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

Stack Overflow用户
提问于 2021-08-24 20:42:55
回答 1查看 110关注 0票数 0

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

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

我想知道如何选择合适的后置摄像头?

在互联网上发现的同样的案例

很抱歉我的演讲很糟糕。如果你不明白我的问题,我可以进一步解释。

代码语言:javascript
运行
复制
'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);
}
EN

回答 1

Stack Overflow用户

发布于 2021-08-27 20:47:45

我不确定这是不是正确的。但至少在此时此刻,它适用于我的Android手机,这些手机在修复之前就出现了问题。看起来0的那个总是合适的。

代码语言:javascript
运行
复制
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);
    });
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/68913868

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档