如何使用后置摄像头代替前置摄像头？

Question

I have a QR scanning camera, but when I open my website on a cell phone, the face camera turns on in my website. I want to use the back camera.

function setwebcam()
{

 var constraints = { audio: true, video: true };




document.getElementById("result").innerHTML="- scanning -";
if(stype==1)
{
    setTimeout(captureToCanvas, 500);    
    return;
}
var n=navigator;
document.getElementById("outdiv").innerHTML = vidhtml;
v=document.getElementById("v");

if(n.getUserMedia)
    n.getUserMedia(constraints, success, error);
else
if(n.webkitGetUserMedia)
{
    webkit=true;
    n.webkitGetUserMedia(constraints, success, error);
}
else
if(n.mozGetUserMedia)
{
    moz=true;
    n.mozGetUserMedia(constraints, success, error);
}

Answer 1

If you want to force the device to use front camera you can add facingMode in constraints:

var constraints = { 
  audio: true,
  video: {
    facingMode: 'environment'
};

or use exact :

facingMode: { exact: 'environment' }

Answer 2

You can use MediaStreamTrack.getSources(callback) to get all media sources and their id's. With other properties you can filter to check is it audio video or filter by name. Once you know id of media source you want to show, use it to attach it to video tag.

This is good example:
https://simpl.info/getusermedia/sources/
https://github.com/samdutton/simpl/blob/master/getusermedia/sources/js/main.js

Answer 3

If the previous examples did not work for you, try this other way:

Webcam.set({
 width: 250,
 height: 200,
 image_format: 'jpeg',
 jpeg_quality: 90,
 // I add this object constraints
 constraints: {
   facingMode: 'environment'
 }
});