HTML5視頻的GetUserMedia不會選擇面向鍍鉻用戶的相機

Question

因此，我一直負責使用HTML 5 Video元素創建演示，以獲取用戶圖片，然後在服務器端進行一些處理。在Surface Pro 4上測試似乎忽略了來自navigator.mediaDevices.getUserMedia函數的facesMode：'user'選項。

navigator.mediaDevices.getUserMedia({ audio: false, video: { facingMode: "user" } }) 
    .then(handleSuccess, stopCameras); 

    var handleSuccess = (stream) => { 
     customer.srcObject = stream; 
     videotracks = stream.getVideoTracks(); 
    } 

handleSuccess調用流上的getVideoTracks，但只有後置攝像頭位於陣列中。

如何確保這隻會鎖定面向用戶的相機？

Answer 1

您需要先列舉攝像機的數量，並將它們保存在這樣的變種：

var camcounter; // camera counter 
var camera_id = {}; // array of cameras by device id 

navigator.mediaDevices.enumerateDevices() 
.then(function(myStream) { 
    myStream.forEach(function(myStream) { 
     if(myStream.kind === 'videoinput') { 
      camcounter++; //camera count 
      camera_id.push(myStream.deviceId); //pushing the device ID to the array 
      console.log(myStream.kind + ": " + myStream.label + " id = " + myStream.deviceId);       
     } 
    }); 
}) 
.then(function(myStream) { 
    if(camcounter === 1) { //building mediaContraints if just one camera found 
     console.log('one camera profile'); 
     mediaConstraints = { 
      video: {deviceId: {exact: camera_id[0]}}, 
      audio: {mandatory: {echoCancellation: true, googAutoGainControl: true, googNoiseSuppression: true, googHighpassFilter: true, googTypingNoiseDetection: true}} 
     }; 
    } 
    else { 
     if(camcounter === 2) { //building mediaContraints if two cameras found 
      mediaConstraints = { 
       video: {deviceId: {exact: camera_id[1]}}, 
       audio: {mandatory: {echoCancellation: true, googAutoGainControl: true, googNoiseSuppression: true, googHighpassFilter: true, googTypingNoiseDetection: true}} 
      }; 
     } 
     else { 
      console.log('no camera or more than 2 cameras'); 
     } 
    } 
}) 
.then(function(myStream) { 
    navigator.mediaDevices.getUserMedia(mediaConstraints) 
     .then(function(myStream) { 
      stream = myStream; 
      usercam1.srcObject = stream;  
      pc = new PeerConnection(servers);  
      pc.addStream(stream); 
      pc.ontrack = function(e) { 
      usercam2.srcObject = e.streams[0]; 
     }; 
     pc.onicecandidate = function(event) { 
      if(event.candidate) { 
       send({type: 'candidate', candidate: event.candidate}); 
      } 
     }; 
    }) 
}) 
.catch(function(error) { 
    console.log('error switching camera :' + error + ' camecounter is: ' + camcounter); 
});