Android에서 카메라 선택 Chrome

Question

이 주제와 관련하여 여러 질문이 생겼습니다. Chrome을 실행중인 Android 기기에서 후면 카메라를 선택하려고합니다.

그래서, 약간의 독서 후 :

:이 응용 프로그램에서 Three.js를 사용하고 같은

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

다음, 나는 제롬 에티엔 느 세 확장 WebcamGrabbing이 ID (https://github.com/jeromeetienne/threex.webar)를 결합하고있어

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


    ... 
} 

:

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

은 그 때 나는 THREEx.WebcamGrabbing 클래스 이런 식으로 (필자는 관련이없는 부분을 제거)를 수정했다

하지만 여전히 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

크롬의 후면 카메라를 선택하는 또 다른 방법은 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를 포함 할 것이다. [에서 getUserMedia - facingmode]

마지막으로 당신의

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