javascript - 仅向有权访问面向环境的摄像头的用户显示功能

Question

我正在开发一种功能，允许用户使用他们的移动设备相机拍照。是否有可靠的方法来检测用户是否具有此访问权限？目前，这是由以下人员设置的约束：

facingMode: { exact: "environment" }

我想对无法使用设备后置摄像头的用户隐藏此功能。这是有效的代码。

<script>
    const player = document.getElementById('player');
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');
    const captureButton = document.getElementById('capture');

    const constraints = {
        video:
        {
            facingMode: { exact: "environment" }
        }
    };

    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>

标签： javascript

Answer 1

当不满足确切的约束时，OverconstrainedError抛出 a。您可以捕获错误并像这样隐藏元素。

const video = document.getElementById('video');
const button = document.getElementById('button');

navigator.mediaDevices
  .getUserMedia({
    video: {
      facingMode: {
        exact: 'environment'
      },
    },
  })
  .then((stream) => video.srcObject = stream)
  .catch((_) => button.style.display = 'none');

https://jsfiddle.net/68e5t4z1/13/