Как выбрать камеру заднего вида в прогрессивном веб-приложении? - PullRequest
Новая
       41

Как выбрать камеру заднего вида в прогрессивном веб-приложении?

1 голос
/ 10 июня 2019

У меня есть камера PWA, она отлично работает с фотографиями и их загрузкой, но я хочу использовать камеру, обращенную назад, вместо камеры, обращенной вперед.Как мне продолжить это?

Это текущие строки кода Coenter, которые я использую для инициализации камеры и фотографирования.Это на .js 

// This will initialize the camera
function initializeMedia() {
  if (!('mediaDevices' in navigator)) {
    navigator.mediaDevices = {};
  }

  if (!('getUserMedia' in navigator.mediaDevices)) {
    navigator.mediaDevices.getUserMedia = function(constraints) {
      var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

      if (!getUserMedia) {
        return Promise.reject(new Error('getUserMedia is not implemented!'));
      }

      return new Promise(function(resolve, reject) {
        getUserMedia.call(navigator, constraints, resolve, reject);
      });
    }
  }

  navigator.mediaDevices.getUserMedia({
    video: true
  })
  .then(function(stream) {
    videoPlayer.srcObject = stream;
    videoPlayer.style.display = 'block';
  })
  .catch(function(err) {
    imagePicker.style.display = 'block';
  });
}

// capture image
captureButton.addEventListener('click', function(event) {
  canvasElement.style.display = 'block';
  videoPlayer.style.display = 'none';
  captureButton.style.display = 'none';
  var context = canvasElement.getContext('2d');
  context.drawImage(videoPlayer, 0, 0, canvas.width, videoPlayer.videoHeight / (videoPlayer.videoWidth / canvas.width));
  videoPlayer.srcObject.getVideoTracks().forEach(function(track) {
    track.stop();
  });
  picture = dataURItoBlob(canvasElement.toDataURL());
});

1 Ответ

0 голосов
/ 10 июня 2019

Вы можете установить video.facingMode на 'user' для передней камеры или 'environment' для задней камеры в constraints объекте, который вы передаете navigator.mediaDevices.getUserMedia().

Пример изMDN: 

var constraints = { video: { facingMode: "environment" } };

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

...