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

Which Camera will open getUserMedia API in mobile Device? Front or Rear?

提问by Nisham Mahsin

While using getUserMedia API to access camera in desktop it will open web camera.of course it is help to video communication.but which camera is invoked when it is used in mobile device.Front cam or Rear cam?.is there needed code for selecting camera?

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

采纳答案by Mikael Holmgren

Unfortunately, you cannot (yet?) select this via the code.

不幸的是，您不能（还？）通过代码选择它。

• Mozilla Firefox beta: When the user accepts to share camera, he/she also select what camera to share.

• Chrome beta: I have only been able to use the face camera. Could be configurable, but I do not know how…

• Mozilla Firefox 测试版：当用户接受共享相机时，他/她还选择要共享的相机。

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

EDIT:In chrome it's possible to select the back facing camera programmatically. See the next answer by Probot in this thread.

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

回答by Stefan Profanter

There's a solution where the user can select one of the cameras.

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

Enable rear camera with HTML5

使用 HTML5 启用后置摄像头

By evaluating sourceInfo.facingfrom the following code, you can select a camera ('user' or 'environment') (which works on current chrome >= 30): https://simpl.info/getusermedia/sources/

通过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();

回答by Nadhir Houari

The answer is yes, for Android as a default camera, the front(user) caerma is up.So i propose this script to choose between the Front and the Rear Camera

答案是肯定的，对于 Android 作为默认摄像头，前置（用户）caerma 已启动。所以我建议使用此脚本在前置和后置摄像头之间进行选择

    //----------------------------------------------------------------------
    //  Here we list all media devices, in order to choose between
    //  the front and the back camera.
    //      videoDevices[0] : Front Camera
    //      videoDevices[1] : Back Camera
    //  I used an array to save the devices ID 
    //  which i get using devices.forEach()
    //  Then 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));