在 Android Chrome 上选择相机

Question

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

所以，经过一番阅读：

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 三个扩展 WebcamGrabbing (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);