Getusermedia - Facingmode

HTML userMedia facingMode: environmentdoesn't work on android phone

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.

navigator.mediaDevices.getUserMedia Video quality and facing mode constraints

navigator.mediaDevices.getUserMedia({ audio: true, video: getConstraints(1280, 720) });

function getConstraints(videowidth, videoheight) {
    constraints = {
        facingMode: { exact: "environment" },
        width: { min: videowidth, ideal: videowidth, max: videowidth },
        height: { min: videoheight, ideal: videoheight, max: videoheight },
        frameRate: { min: 5, max: 8 }
    };
    return constraints;
}

How to switch between front camera and rear camera in javascript?

Something like this :

function handleVideo(cameraFacing) {
  const constraints = {
    video: {
      facingMode: {
        exact: cameraFacing
      }
    }
  }
  return constraints
};

function turnVideo(constraints) {
  let video;
  navigator.mediaDevices.getUserMedia(constraints)
    .then((stream) => {
      video = document.createElement("video")
      video.srcObject = stream
      video.play()
      video.onloadeddata = () => {
        ctx.height = video.videoHeight
      }
    })

}

document.querySelector(".frontCamera").addEventListener("click", () => {
  turnVideo(handleVideo("user"));
})
document.querySelector(".backCamera").addEventListener("click", () => {
  turnVideo(handleVideo("enviroment"));
})

<div class="frontCamera">front</div>
<div class="backCamera">back</div>

Using mediaDevices.getUserMedia to access front facing camera on a laptop

The facingMode constraint is the right answer according to the spec, and works in Firefox. Chrome just hasn't implemented it yet. However, you can use the adapter.js polyfill to get it.

Try it out here.

---

Related Topics