在Android Chrome上选择摄像头

Question

我遇到了关于这个主题的几个问题。我正在尝试在运行Chrome的安卓设备上选择后置摄像头。

那么，在阅读之后:

var selector = document.getElementById('video-source-selector');
navigator.mediaDevices.enumerateDevices()
  .then(function(devices) {
    var videoDevices = devices.map(function (item) {
      if(item.kind === 'videoinput'){
        return item;
      }
    }).filter(function( element ) {
       return element !== undefined;
    });
    var max = videoDevices.length;
    videoDevices.forEach(function(device, i) {
      var html = '';
      var div = document.createElement('div');
      if(i === max-1){ // last element reached
        html += '<option value="'+device.deviceId+'" selected>'+ device.label +'</option>';
      }
      else {
        html += '<option value="'+device.deviceId+'">'+ device.label +'</option>';
      }
      div.innerHTML = html;
      selector.appendChild(div.childNodes[0]);
      console.log(device.kind + ": " + device.label +
        " id = " + device.deviceId);
    });
  })
  .catch(function(err) {
    console.log(err.name + ": " + err.message);
  });
  selector.addEventListener("change", function(){
    console.log(selector.value); // Works as supposed : returns the ID of the selected device
  });

然后，当我在这个应用程序中使用three .js时，我将这个ID绑定到Jerome Etienne三个扩展webcamgrab (https://github.com/jeromeetienne/threex.webar):

var videoGrabbing = new THREEx.WebcamGrabbing(selector.value);

然后我必须这样修改THREEx.WebcamGrabbing类(我删除了不相关的部分):

THREEx.WebcamGrabbing = function(sourceDeviceId){
    ...
    console.log('webcamgrabbing : ', sourceDeviceId); // returns the expected ID
    var constraints = {
            video: {
              optional: [{
                sourceId: sourceDeviceId
              }]
            }
    }

    // try to get user media
    navigator.getUserMedia( constraints, function(stream){
            domElement.src = URL.createObjectURL(stream);
    }, function(error) {
            console.error("Cant getUserMedia()! due to ", error);
    });

    ...
}

但是，无论我选择什么设备，Android上的Chrome仍然会给我面部摄像头的流…

我错过了什么?

编辑:基于这个主题(GetUserMedia - facingmode)，我想出了一些日志来看看这里发生了什么:

   var constraints = {
            audio: false,
            video: { facingMode: { exact: "environment" } }
    }
    console.log('Try to get stream with constraints:', constraints);
    navigator.getUserMedia( constraints, function(stream){
            var videoTracks = stream.getVideoTracks();
            console.log('Got stream with constraints:', constraints);  // Ok
            console.log('Using video device: ' + videoTracks[0].label);  // > Using video device: camera 0, facing back
            for(var i = 0; i < videoTracks.length; i++){
              console.log('Found video device with contraints : ', videoTracks[i].label); // Found video device with contraints :  camera 0, facing back
            }
            domElement.src = URL.createObjectURL(stream);
    }, function(error) {
            console.error("Cant getUserMedia()! due to ", error);
    });

Answer 1

在chrome上选择后置摄像头的另一种方法是使用enumerateDevices方法。

首先获取所有视频输入id:

   navigator.mediaDevices.enumerateDevices().then(function(devices) {
     devices.forEach(function(device) {
  if(device.kind=="videoinput"){
     //If device is a video input add to array.
  }
});

那么数组的第一个元素将包含前置摄像头的id，第二个元素将包含后置摄像头的id。

最后输入要使用的相机的id

 navigator.getUserMedia({audio: false, video:  { sourceId: VideoId } }, successCallback, errorCallback);