在 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 - facesmode)，我想出了一些日志来看看是什么发生在这里:

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屋！