Monday, 24 May 2021

Show functionality only for users that have access to environment facing camera

I'm working on a functionality that will allow users taking pictures with their mobile device camera. Is there a reliable way to detect if a user has this access? Currently this is a constraint set by:

facingMode: { exact: "environment" }

I would like to hide this functionality from users that are not able to use device's back camera. Here's the code that works.

<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>


from Show functionality only for users that have access to environment facing camera

No comments:

Post a Comment