html5 qr code scanner not work in back camera in mobile browser That is, when we open the phone in the browser, the front camera is activated
<div class="container">
<form>
<div id="reader" style="width:100%">
</div>
</form>
<div id="qr-reader-results"></div>
</div>
in js file
const html5QrCode = new Html5Qrcode("reader");
const qrCodeSuccessCallback = (decodedText, decodedResult) => {
/* handle success */
};
const config = { fps: 10, qrbox: { width: 250, height: 250 } };
html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback);
There can be an permission issue. Or you can try to list all cameras for debug purposes by using the static method getCameras(). Maybe the back camera is not detected?
// This method will trigger user permissions
Html5Qrcode.getCameras().then(devices => {
/**
* devices would be an array of objects of type:
* { id: "id", label: "label" }
*/
if (devices && devices.length) {
var cameraId = devices[0].id;
// .. use this to start scanning or just log devices to see
// which cameras are deteceted.
}
}).catch(err => {
// handle err
});
For more information check following links: