在Android Chrome上选择相机 [英] Select camera on Android Chrome

问题描述

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

I came across several questions on this subject. I'm trying to select the rear camera on an Android device running 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的三个扩展名WebcamGrabbing( https://github.com/jeromeetienne/threex.webar ):

Then, as I'm using Three.js in this app, I'm binding this ID to Jerome Etienne three extension WebcamGrabbing (https://github.com/jeromeetienne/threex.webar):

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

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

Then I had to modify THREEx.WebcamGrabbing class this way (I removed the irrelevant parts):

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仍然可以为我提供人脸摄像头的信息流.

But still, Chrome on Android is still giving me the stream of the face camera, whatever device I select...

我想念什么?

基于这个主题( GetUserMedia-面对模式)，我想出了一些日志来了解什么发生在这里:

EDIT : Based on this topic (GetUserMedia - facingmode), I came up with some logs to see what's happening here :

   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);
    });

推荐答案

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

An alternative way to select the back camera on chrome is to use the enumerateDevices method.

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

First get all the video input id's:

   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.

Then the first element of the array will contain the id of the front camera, the second element will contain the id of the back camera.

最后放入您要使用的摄像机的ID

Finally put the id of the camera that you want to use

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

这篇关于在Android Chrome上选择相机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！