Wybierz kamerę podczas korzystania z nawigacji navigate.getUserMedia()

Używam metody navigate.getUserMedia() do przechwytywania wideo na telefonie komórkowym i dalszego przetwarzania na nim. Ale od teraz przechwytuje wideo za pomocą przedniego aparatu. Jak mogę to zrobić, aby uzyskać dostęp do tylnej kamery?Wybierz kamerę podczas korzystania z nawigacji navigate.getUserMedia()

Poniżej przykładowy kod, który używam w mojej aplikacji:

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

góry dzięki

Źródło

2013-05-29 Vinay C

Myślę, że to pytanie jest zbyt ogólne, może zależeć od dostawcy, oprogramowania i modelu urządzenia. – cerkiewny

Ale ten kod działa na różnych platformach .. Problem polega na tym, że uzyskuje dostęp do kamery z przodu, więc może być jakiś sposób, abyśmy mogli określić, aby uzyskać dostęp do tylnej kamery, .. lub uzyskać wyskakujące okienka z dostępnych kamer i pozwolić użytkownikowi wybrać z niego .. –

Zobacz this o dodatkowe informacje.

Który aparat jest używany jest pozostawione urządzenia: „klienckie są zachęcani do domyślnych do korzystania przez użytkownika domyślny podstawowy lub system kamery i/lub mikrofonu (odpowiednio) w celu wygenerowania mediów strumień.”

Pytanie, które możesz zadać, brzmi: jak zmienić domyślną kamerę. Ale jak już wspomniałem w sekcji komentarzy, jest to inne w zależności od używanego systemu operacyjnego urządzenia, producenta lub nawet modelu i może być dużym problemem.

EDIT (poprawa Zaakceptowanych odpowiedź oparta na później):

Proszę zobaczyć ten blog na temat zmiany źródła kamery:

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

Źródło

2013-05-29 09:59:20 cerkiewny

Ten przykład na simpl.info demonstruje użycie MediaStreamTrack.getSources, aby wybrać spośród wielu źródeł wideo.

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

mogę potwierdzić, że to działa w Chrome 32.

Źródło

2014-02-05 06:18:30 freakTheMighty

To powinna być właściwa odpowiedź. Chociaż nie jest zaimplementowany na wszystkich urządzeniach, mogę potwierdzić, że działa on w chrome na Androidzie, ale nie w zwykłej przeglądarce na moim gs2 (wiem, że jest stary). Nie działa w ios7, ale testuję to na ios8 beta 3, jak tylko dostanę się do biura w poniedziałek. –

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

Źródło

2017-03-20 08:36:23

będzie lepszą odpowiedzią, jeśli opiszę tam swój kod! – Deep

edytuj odpowiedź! – Deep

Mam zamiar wyjaśnić niektóre linie tutaj. ** videoDevices **: jest prostą tablicą, która będzie zawierała ** id ** przedniej i tylnej kamery. ** devices.forEach **: wyświetli listę wszystkich urządzeń multimedialnych (wideo i audio). Jeśli ** device.kind == "videoinput" **, oznacza to, że jest to nośnik wideo, zapisujemy identyfikatory wszystkich urządzeń wideo z poprzedniej tablicy ** videoDevices **. ** var varraints ** zawiera rozdzielczość wideo i kamerę, którą chcemy uruchomić. ** videoDevices [1] = back Camera ** i ** videoDevices [0] = przednia kamera **. Następnie przekazujemy ograniczenie do funkcji ** getUSerMedia **. –

Można użyć facingMode wybrać "użytkownik" lub "środowisko" na przedniej lub tylnej kamery odpowiednio. Nie jestem pewien wsparcia przeglądarki, ale to działa na Android Chrome 58.

Zastosowanie

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

lub, aby umożliwić funkcję powrotu do jakiegoś innego aparatu

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

zamiast

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

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

Źródło

2017-07-23 08:40:44 user1318499

To pomogło mi znacznie bardziej niż jakakolwiek inna odpowiedź. Takie proste rozwiązanie, naprawdę. –

Wybierz kamerę podczas korzystania z nawigacji navigate.getUserMedia()

Odpowiedz

Powiązane problemy