GetUserMedia – facingmode

Atualmente estou usando um tablet Android e GetUserMedia para tirar fotos no meu programa.

Aparentemente, a câmera padrão usada pela GetUserMedia é a câmera frontal. Como eu uso a câmera traseira como padrão?

Aqui está o meu código para GetUserMedia:

navigator.getUserMedia({ "audio": false, "video": { mandatory: { minWidth: this.params.dest_width, minHeight: this.params.dest_height, //facingMode: "environment", }, } }, function(stream) { // got access, attach stream to video video.src = window.URL.createObjectURL( stream ) || stream; Webcam.stream = stream; Webcam.loaded = true; Webcam.live = true; Webcam.dispatch('load'); Webcam.dispatch('live'); Webcam.flip(); }, function(err) { return self.dispatch('error', "Could not access webcam."); }); 

Inseri o facingMode na parte “obrigatória”, mas não funcionou.

Por favor ajude.

Atualização: o facingMode já está disponível no Chrome para Android por meio do polyfill adapter.js!

facingMode ainda não está implementado no Chrome para Android , mas funciona de forma nativa no Firefox para Android.

Você deve usar restrições padrão : (use https fiddle for Chrome):

 var gum = mode => navigator.mediaDevices.getUserMedia({video: {facingMode: {exact: mode}}}) .then(stream => (video.srcObject = stream)) .catch(e => log(e)); var stop = () => video.srcObject && video.srcObject.getTracks().forEach(t => t.stop()); var log = msg => div.innerHTML += msg + "
";
   

Implantando nosso aplicativo da web para android através do Cordova, eu tentei várias soluções para acessar a câmera traseira. A solução que funcionou para mim foi:

 constraints = { audio: false, video: { width: 400, height: 300, deviceId: deviceId ? {exact: deviceId} : undefined } }; 

Recuperando o deviceId por meio de:

 navigator.mediaDevices.enumerateDevices() .then(function(devices) { // devices is an array of accessible audio and video inputs. deviceId is the property I used to switch cameras }) .catch(function(err) { console.log(err.name + ": " + error.message); }); 

Eu optei por não usar um plugin do Cordova para que, se decidíssemos nos afastar do Cordova, não haveria uma migration tão pesada.

Usando o código de Peter ( https://stackoverflow.com/a/41618462/7723861 ) eu vim com esta solução para obter a câmera traseira:

 function handleSuccess(stream) { window.stream = stream; // make stream available to browser console video.srcObject = stream; } function handleError(error) { console.log('navigator.getUserMedia error: ', error); } var DEVICES = []; var final = null; navigator.mediaDevices.enumerateDevices() .then(function(devices) { var arrayLength = devices.length; for (var i = 0; i < arrayLength; i++) { var tempDevice = devices[i]; //FOR EACH DEVICE, PUSH TO DEVICES LIST THOSE OF KIND VIDEOINPUT (cameras) //AND IF THE CAMERA HAS THE RIGHT FACEMODE ASSING IT TO "final" if (tempDevice.kind == "videoinput") { DEVICES.push(tempDevice); if(tempDevice.facingMode == "environment" ||tempDevice.label.indexOf("facing back")>=0 ) {final = tempDevice;} } } var totalCameras = DEVICES.length; //If couldnt find a suitable camera, pick the last one... you can change to what works for you if(final == null) { //console.log("no suitable camera, getting the last one"); final = DEVICES[totalCameras-1]; }; //Set the constraints and call getUserMedia var constraints = { audio: false, video: { deviceId: {exact: final.deviceId} } }; navigator.mediaDevices.getUserMedia(constraints). then(handleSuccess).catch(handleError); }) .catch(function(err) { console.log(err.name + ": " + err.message); }); 

Na versão mais recente do Chrome (após v52), as soluções adaper.js parecem não estar funcionando. Então, resolvo o problema enumerando os dispositivos primeiro. Aqui está a minha solução. Não tenho certeza se existe uma maneira melhor de virar a câmera e mostrar o vídeo na canvas. Mas eu tenho que parar a pista primeiro e pegar um novo stream.

 let Video = function() { let cameras = []; let currCameraIndex = 0; let constraints = { audio: true, video: { deviceId: { exact: "" } } }; let videoCanvas = $('video#gum'); this.initialize = function() { return enumerateDevices() .then(startVideo); }; this.flipCamera = function() { currCameraIndex += 1; if (currCameraIndex >= cameras.length) { currCameraIndex = 0; } if (window.stream) { window.stream.getVideoTracks()[0].stop(); } return startVideo(); }; function enumerateDevices() { return navigator.mediaDevices.enumerateDevices() .then(function(devices) { devices.forEach(function(device) { console.log(device); if (device.kind === "videoinput") { cameras.push(device.deviceId); } }); console.log(cameras); }); } function startVideo() { constraints.video.deviceId.exact = cameras[currCameraIndex]; return navigator.mediaDevices.getUserMedia(constraints) .then(handleSuccess).catch(handleError); } function handleSuccess(stream) { videoCanvas[0].srcObject = stream; window.stream = stream; } function handleError(error) { alert(error); } }; 

Um trecho bem dandy que você pode usar é:

 var front = false; document.getElementById('flip-button').onclick = function() { front =` !front; }; var constraints = { video: { facingMode: (front? "user" : "environment") } }; 

Isso deve funcionar para você esperançosamente.

    Intereting Posts