使用手機相機拍照

Question

我需要向我的 web 應用程序添加一個功能，以允許用戶使用他們的移動設備拍照。 幸運的是 HTML5 和現代瀏覽器支持這個 API，但是我很難找到任何工作示例。

這是我發現的一個示例，它似乎有效（在 DuckDuckGo 瀏覽器上除外）：

<video id="player" autoplay></video>
<button id="capture">Capture</button>
<canvas id="canvas" width=320 height=240></canvas>
<script>
    const player = document.getElementById('player');
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');
    const captureButton = document.getElementById('capture');

    const constraints = {
        video: true,
    };

    captureButton.addEventListener('click', () => {
        // Draw the video frame to the canvas.
        context.drawImage(player, 0, 0, canvas.width, canvas.height);
    });

    // Attach the video stream to the video element and autoplay.
    navigator.mediaDevices.getUserMedia(constraints)
        .then((stream) => {
            player.srcObject = stream;
        });
</script> 

如何讓它選擇后置攝像頭，即 capture="environment" 而不是 "user"？

Answer 1

您需要提供以下約束 object； 目前您沒有通過正確的要求rear camera 。

const constraints = {
  audio: true,
  video:
  {
    facingMode: { exact: "environment" }
  }
}

在此處查看文檔