Выберите камеру с помощью navigate.getUserMedia можно()

Я использую навигацию.метод getUserMedia () для захвата видео на моем мобильном телефоне и дальнейшей обработки на нем. Но на данный момент он захватывает видео с помощью передней камеры. Как я могу получить доступ к задней камере??

Ниже приведен пример кода, который я использую в мое приложение:

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

спасибо заранее

12
html5 html5-video javascript navigator video-processing

4 ответов

посмотреть этой для получения дополнительной информации.

какая камера используется, остается на устройстве: "агенты пользователя рекомендуется по умолчанию использовать основной или системный по умолчанию пользователя камера и / или микрофон (при необходимости) для создания носителя поток."

вопрос, который вы можете задать, заключается в том, как вы можете изменить камеру по умолчанию. Но, как я уже упоминал в разделе комментариев, это отличается от операционной системы устройства используется, поставщик или даже модель, и может быть большой проблемой.

EDIT (улучшение принятого ответа на основе более позднего):

пожалуйста, смотрите этот блог о том, как изменить источник камеры:

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

1

этот пример на simpl.info демонстрирует использование MediaStreamTrack.getSources выбрать из нескольких источников Видео.

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

Я могу подтвердить, что это работает в Chrome 32.

16

можно использовать facingMode выбрать "потребителя" или "окружающую среду" для передней или задней камеры соответственно. Не уверен в поддержке браузера, но он работает на Android Chrome 58.

использовать

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

или, чтобы позволить отступление к какой-то другой камере

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

вместо

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

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

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