Selezionare la videocamera durante l'utilizzo di navigate.getUserMedia()

Sto utilizzando il metodo navigate.getUserMedia() per acquisire video sul mio dispositivo mobile ed eseguire ulteriori elaborazioni su di esso. Ma per ora sta catturando il video usando la fotocamera frontale. Come faccio ad accedere alla telecamera posteriore?Selezionare la videocamera durante l'utilizzo di navigate.getUserMedia()

Di seguito è riportato un codice di esempio che sto usando nella mia applicazione:

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia; 
    if (navigator.getUserMedia){ 
    navigator.getUserMedia({video: true}, successCallback, errorCallback);

Grazie in anticipo

fonte

2013-05-29 Vinay C

Penso che questa domanda sia troppo generica, può dipendere dal venditore, dal software e dal modello del dispositivo. – cerkiewny

Ma questo codice funziona su una varietà di piattaforme, il problema è che accede alla telecamera frontale, quindi potrebbe esserci un modo in cui possiamo specificarlo per accedere alla telecamera posteriore, .. o ottenere un popup di fotocamere disponibili e consentire all'utente di scegliere da esso .. –

Vedere this per ulteriori informazioni.

Quale fotocamera viene utilizzata è lasciato al dispositivo: "Gli interpreti sono incoraggiati a default utilizzando la fotocamera di default primaria o sistema dell'utente e/o il microfono (a seconda dei casi) per generare il flusso multimediale ."

La domanda che è possibile chiedere è come è possibile modificare la videocamera predefinita. Ma come ho accennato nella sezione commenti questo è diverso in base al sistema operativo del dispositivo utilizzato, al fornitore o al modello, e può essere un grosso problema.

EDIT (miglioramento della risposta accettata sulla base di più un '):

consulta questo blog per come cambiare la sorgente della telecamera:

https://www.html5rocks.com/en/tutorials/getusermedia/intro/

fonte

2013-05-29 09:59:20 cerkiewny

Questo esempio sul simpl.info dimostra l'uso di MediaStreamTrack.getSources per selezionare da più origini video.

https://simpl.info/getusermedia/sources/

posso confermare che questo funziona in Chrome 32.

fonte

2014-02-05 06:18:30 freakTheMighty

Questa dovrebbe essere la risposta giusta. Anche se non è stato implementato su tutti i dispositivi, posso confermare che funziona in chrome su Android non nel normale browser sebbene sul mio gs2 (so che è vecchio). Non funziona in iOS7, ma lo testerò su ios8 beta 3 non appena arriverò in ufficio lunedì. –

 //---------------------------------------------------------------------- 
     // Here we list all media devices, in order to choose between 
     // the front and the back camera. 
     //  videoDevices[0] : Front Camera 
     //  videoDevices[1] : Back Camera 
     // I used an array to save the devices ID 
     // which i get using devices.forEach() 
     // Then set the video resolution. 
     //---------------------------------------------------------------------- 
     navigator.mediaDevices.enumerateDevices() 
     .then(devices => { 
      var videoDevices = [0,0]; 
      var videoDeviceIndex = 0; 
      devices.forEach(function(device) { 
      console.log(device.kind + ": " + device.label + 
       " id = " + device.deviceId); 
      if (device.kind == "videoinput") { 
       videoDevices[videoDeviceIndex++] = device.deviceId;  
      } 
      }); 


      var constraints = {width: { min: 1024, ideal: 1280, max: 1920 }, 
      height: { min: 776, ideal: 720, max: 1080 }, 
      deviceId: { exact: videoDevices[1] } 
     }; 
     return navigator.mediaDevices.getUserMedia({ video: constraints }); 

     }) 
     .then(stream => { 
      if (window.webkitURL) { 
      video.src = window.webkitURL.createObjectURL(stream); 
      localMediaStream = stream; 
      } else if (video.mozSrcObject !== undefined) { 
      video.mozSrcObject = stream; 
      } else if (video.srcObject !== undefined) { 
      video.srcObject = stream; 
      } else { 
      video.src = stream; 
      }}) 
     .catch(e => console.error(e));

fonte

2017-03-20 08:36:23

sarà una risposta migliore se descrivi il tuo codice lì! – Deep

per favore modifica la risposta! – Deep

Ho intenzione di spiegare alcune righe qui. ** VideoDevices **: è un semplice array, che conterrà ** id ** della fronda e della fotocamera posteriore. ** devices.forEach **: elencherà tutti i dispositivi multimediali (video e audio). Se ** device.kind == "videoinput" **, significa che si tratta di un dispositivo multimediale video, salviamo gli ID di tutti i dispositivi video nell'array precedente ** VideoDevices **. ** var contrapposizioni ** contiene la risoluzione video e la telecamera che vorremmo iniziare. ** VideoDevices [1] = retro Camera ** e ** videoDevices [0] = fotocamera anteriore **. Passiamo il vincolo alla funzione ** getUSerMedia **. –

È possibile utilizzare facingMode scegliere rispettivamente "utente" o "ambiente" per la parte anteriore e posteriore della macchina fotografica. Non sei sicuro di supporto del browser ma funziona su Android Chrome 58.

Usa

navigator.getUserMedia({video: { facingMode: { exact: "environment" } } }, 
successCallback, errorCallback);

o, per consentire fallback a qualche altra macchina fotografica

navigator.getUserMedia({video: { facingMode: "environment" } }, 
successCallback, errorCallback);

invece di

navigator.getUserMedia({video: true}, successCallback, errorCallback);

Da https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

fonte

2017-07-23 08:40:44 user1318499

Questo mi ha aiutato molto più di ogni altra risposta. Una soluzione così semplice, davvero. –

Selezionare la videocamera durante l'utilizzo di navigate.getUserMedia()

risposta

Problemi correlati