Question

我有一个相机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());
});

Answer 1

您可以在传递给video.facingMode的{{1}}对象中，将'user'设置为'environment'（对于前置摄像头，或constraints）作为后置摄像头

MDN中的示例：

navigator.mediaDevices.getUserMedia()

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

如何在渐进式Web应用程序中选择后置摄像头？

1 个答案: