How to use back camera instead of selfie camera in QuaggaJS

Question

I have a problem opening the correct camera with QuaggaJS, On some devices, the selfie camera is opened but on others, the back facing camera will be opened. How can I set the standard camera to open to the back camera? Because scanning a barcode with your selfie camera isn't that easy......

This is what I've tried so far:

 inputStream: {
                type : "LiveStream",
                constraints: {
                    width: {min: 640},
                    height: {min: 480},
                    facingMode: "environment",
                    aspectRatio: {min: 1, max: 2}
                }
            },

During initialization, I've set the facing mode to environment, but still the selfie camera is opened.....

Maybe there is also a setting in chrome where you can change this? But I could found it......

Answer 1

what I am doing and works on some smartphones is following:

var backCamID = null;
var last_camera = null;
navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
  devices.forEach(function(device) {  
 if( device.kind == "videoinput" && device.label.match(/back/) !== null ){
      backCamID = device.deviceId;
    }
if( device.kind === "videoinput"){
last_camera = device.deviceId;
} 
});
if( backCamID === null){
backCamID = last_camera;
}
})
.catch(function(err) {         });

and in constrains place camera ID instead of facingMode

deviceId: backCamID

Answer 2

Since QuaggaJS only allows to use either "environment" or "user" as the facingMode. You can make an select element to choose one of them.

HTML:

<select id="videoSource">
    <option value="enviroment" selected>Back</option>
    <option value="user">Front</option>
</select>

JS:

var _scannerIsRunning = false; // set to true at the end of startScanner()

    document.getElementById("videoSource").addEventListener("change", function () {
        if (_scannerIsRunning) {
            Quagga.stop();
        }
        startScanner(); // put your init function here

    }, false);

Replace facingMode by the value of the select

facingMode: document.getElementById("videoSource").value