哪个相机会在移动设备中打开 getUserMedia API？前还是后？

Posted 2023-04-17

【中文标题】哪个相机会在移动设备中打开 getUserMedia API？前还是后？

【英文标题】：Which Camera will open getUserMedia API in mobile Device? Front or Rear?

【发布时间】：2013-08-31 05:55:24

【问题描述】：

在桌面使用getUserMedia API访问摄像头时，会打开网络摄像头。当然这有助于视频通信。但是在移动设备中使用时会调用哪个摄像头。前置摄像头或后置摄像头？.是否需要选择相机的代码？

【参考方案1】：

有一种解决方案，用户可以选择其中一个摄像头。

Enable rear camera with html5

通过从以下代码评估 sourceInfo.facing，您可以选择一个摄像头（“用户”或“环境”）（适用于当前 chrome >= 30）：https://simpl.info/getusermedia/sources/

'use strict';

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

navigator.getUserMedia = navigator.getUserMedia ||
  navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

function gotSources(sourceInfos) 
  for (var i = 0; i !== sourceInfos.length; ++i) 
    var sourceInfo = sourceInfos[i];
    var option = document.createElement('option');
    option.value = sourceInfo.id;
    if (sourceInfo.kind === 'audio') 
      option.text = sourceInfo.label || 'microphone ' + (audioSelect.length + 1);
      audioSelect.appendChild(option);
     else if (sourceInfo.kind === 'video') 
      option.text = sourceInfo.label || 'camera ' + (videoSelect.length + 1);
      videoSelect.appendChild(option);
     else 
      console.log('Some other kind of source: ', sourceInfo);
    
  


if (typeof MediaStreamTrack === 'undefined')
  alert('This browser does not support MediaStreamTrack.\n\nTry Chrome Canary.');
 else 
  MediaStreamTrack.getSources(gotSources);



function successCallback(stream) 
  window.stream = stream; // make stream available to console
  videoElement.src = window.URL.createObjectURL(stream);
  videoElement.play();


function errorCallback(error)
  console.log('navigator.getUserMedia error: ', error);


function start()
  if (!!window.stream) 
    videoElement.src = null;
    window.stream.stop();
  
  var audioSource = audioSelect.value;
  var videoSource = videoSelect.value;
  var constraints = 
    audio: 
      optional: [sourceId: audioSource]
    ,
    video: 
      optional: [sourceId: videoSource]
    
  ;
  navigator.getUserMedia(constraints, successCallback, errorCallback);


audioSelect.onchange = start;
videoSelect.onchange = start;

start();

【参考方案2】：

很遗憾，您不能（还没有？）通过代码选择它。

Mozilla Firefox beta：当用户接受共享相机时，他/她 还可以选择要共享的相机。

Chrome beta：我只能使用面部摄像头。可能 可配置，但我不知道如何...

编辑： 在 chrome 中，可以通过编程方式选择后置摄像头。请参阅此线程中 Probot 的下一个答案。

【讨论】：

在移动默认是前面？

在 Chrome 测试版上是这样。在 Firefox 测试版上，默认设置已恢复，但正如我所提到的，用户可以在接受共享相机时选择此选项（在 Firefox 上）。

目前我不知道。关于是否使用“环境”或“用户”摄像头（后/前摄像头）lists.w3.org/Archives/Public/public-media-capture/2012Mar/…

的可能性进行了讨论

更新：最新的草案实际上包含了facemode，但似乎还没有在任何浏览器中实现。 w3.org/TR/2013/WD-mediacapture-streams-20130516

【参考方案3】：

答案是肯定的，android 的默认摄像头是前置（ 用户）摄像头。所以我开发了下面的脚本来选择前置摄像头和后置摄像头

    //----------------------------------------------------------------------
    //  Here we list all media devices, in order to choose between
    //  the front camera and the rear camera.
    //      videoDevices[0] : Front Camera
    //      videoDevices[1] : Back Camera
    //  I used an array to save the devices ID 
    //  which I get with using devices.forEach()
    //  Then I set the video resolution.
    //----------------------------------------------------------------------
    navigator.mediaDevices.enumerateDevices()
    .then(devices => 
      var videoDevices = [0,0];
      var videoDeviceIndex = 0;
      devices.forEach(function(device) 
        console.log(device.kind + ": " + device.label +
          " id = " + device.deviceId);
        if (device.kind == "videoinput")   
          videoDevices[videoDeviceIndex++] =  device.deviceId;    
        
      );

      var constraints =  width:  min: 1024, ideal: 1280, max: 1920 ,
      height:  min: 776, ideal: 720, max: 1080 ,
      deviceId:  exact: videoDevices[1]   
    ;
    return navigator.mediaDevices.getUserMedia( video: constraints );

  )
    .then(stream => 
      if (window.webkitURL) 
        video.src = window.webkitURL.createObjectURL(stream);
        localMediaStream = stream;
       else if (video.mozSrcObject !== undefined) 
        video.mozSrcObject = stream;
       else if (video.srcObject !== undefined) 
        video.srcObject = stream;
       else 
        video.src = stream;
      )
    .catch(e => console.error(e));