mebjas
Cannot set back camera even with correct deviceId
I cannot set back camera, when I am trying to pick camera from Html Scanner constructor function I am always getting front camera, there's no way to pick back camera. I have tested it with Android and iOS devices.
I was trying to get deviceId from method and even copy static value for back camera and still same results.
To Reproduce See this example https://codepen.io/freestyle09/pen/xxLrBJJ
Expected behavior Back camera should work in Html5QrCodeScanner and Html5QrCode
Desktop (please complete the following information):
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
Smartphone (please complete the following information):
- Device: iPhone 12 Pro Max, iPad 11
- OS: 15.1
- Browser: Safari. Chrome, Mozilla
- Version - the newests
Additional context Demo example from official website is working but reconstruction example from documentation not.
Here's one solution if you don't need a drop-down list. It works for me!
const html5QrcodeScanner = new Html5QrcodeScanner("reader", {
fps: 10,
qrbox: { width: 250, height: 250 },
videoConstraints: { facingMode: { exact: "environment" } },
});
MediaTrackConstraints.facingMode
Excuse me, have you solved the problem?
Nope, the problem is still there
Here's one solution if you don't need a drop-down list. It works for me!
const html5QrcodeScanner = new Html5QrcodeScanner("reader", { fps: 10, qrbox: { width: 250, height: 250 }, videoConstraints: { facingMode: { exact: "environment" } }, });
have you use this?
Here's one solution if you don't need a drop-down list. It works for me!
const html5QrcodeScanner = new Html5QrcodeScanner("reader", { fps: 10, qrbox: { width: 250, height: 250 }, videoConstraints: { facingMode: { exact: "environment" } }, });have you use this?
Nope and here's the live URL: https://qrcode-scanning.netlify.app/
Yeah and when I am using exact on PCs I am getting errors and I don't know why but the example from official website works
Yeah and when I am using
exacton PCs I am getting errors and I don't know why but the example from official website works
exact: "environment"
It only works on mobile phones from what I understand
If I understand correctly, the expectation is to select back camera on Html5QrcodeScanner right? This is not supported at the moment. Please track this issue https://github.com/mebjas/html5-qrcode/issues/139 for the implementation.
This is how you can set it using Html5Qrcode class - https://github.com/mebjas/html5-qrcode#scanning-without-cameraid
Let me know if there is any other issue.
Hi, if i understand correctly you want to prefer the back camera, else the front camera? If you still have the problem, here you are a solution which i used to prefer the back camera, else you will use the front camera automatically.
<head>
<script type="text/javascript" src="html5-qrcode.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
//the width of the camera
<div style="width:200px; " id="reader"></div>
const html5QrCode = new Html5Qrcode("reader");
// if you scanned , it will be write in clear text in your input field which in my case 'result'
const qrCodeSuccessCallback = (decodedText, decodedResult) => {
document.getElementById('result').value = decodedText;
};
const config = { fps: 200, qrbox: 100 };
// prefer the back camera else the front one
html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback);
</script>
</body>
For anyone who is still having this issue, there is a different potential cause when using Html5Qrcode class. Using .getCameras() returns a promise and if this does not resolve by the time you are calling .start(), you will default to using whichever camera is default.
This works for me as I have a known platform where the back camera is always at index 1. Use a similar approach if you know you have facingMode available. (Unavailable on my device)
async function prep() {
let devices = await Html5Qrcode.getCameras();
let cameraId = devices[1].id;
const scanner = new Html5Qrcode("reader");
const config = { fps: 10, qrbox: { width: 500, height: 500 } };
const qrCodeSuccessCallback = (decodedText, decodedResult) => {
/* handle success */
};
scanner.start(cameraId, config, qrCodeSuccessCallback);
}
