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