javascripthtmlhtml5-videogetusermedia

HTML userMedia facingMode: "environment"doesn't work on android phone


It keeps using the front facing camera instead of the back camera This is my code: I added the facingMode: {exact:"environment"}, but it doesn't work

const constraints = {
    video: true,
    facingMode: { exact: 'environment' }
};

if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) {
    console.log("Let's get this party started")
}
navigator.mediaDevices.getUserMedia(constraints).
then((stream) => {video.srcObject = stream});
function displayImage()
{
    const selectedFile = document.getElementById('fileinput')
    //var image =document.getElementById('output')
    //image.src = URL.createObjectURL(selectedFile.files[0]);
    //selectedFile.files[0]
    const img = new Image()
    img.src = URL.createObjectURL(selectedFile.files[0])
    canvas.width = video.videoWidth
    canvas.height = video.videoHeight
    video.style.display="none"
    canvas.style.display ="inline"
    console.log(img)
    console.log("image uploaded")

    img.onload = function() {
        canvas.getContext('2d').drawImage(img, 0, 0,video.videoWidth,video.videoHeight);
        console.log('the image is drawn');
    }

}

Solution

  • Your constraints are not set correctly.

    facingMode is a member of the video constraint, so it should be

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

    Live Fiddle to be ran from a device with a back camera.