I am building a project that uses the ZXing library to scan barcodes. Currently the code I have is working for iOS device opening up the rear camera but when testing using android device it opens up the front camera. Is there a way I can always force the rear camera to be used on any device? Please see working code below:
<script type="text/javascript">
window.addEventListener('load', function () {
let selectedDeviceId;
const codeReader = new ZXing.BrowserMultiFormatReader();
console.log('ZXing code reader initialized');
codeReader.getVideoInputDevices()
.then((videoInputDevices) => {
if (videoInputDevices.length < 1) {
console.log('No video devices found');
return;
}
selectedDeviceId = videoInputDevices[0].deviceId;
codeReader.decodeFromVideoDevice(selectedDeviceId, 'video', (result, err) => {
if (result) {
console.log(result);
var barcode = result;
//this.window.alert(barcode);
if (String(barcode).charAt(0) == 'L') {
document.getElementById('result').textContent = result.text;
document.getElementById('result').style.color = "green";
var previousurl = document.referrer;
window.location.href = previousurl + "&BarCode=" + result.text;
}
else {
document.getElementById('result').textContent = result.text;
document.getElementById('result').style.color = "red";
window.alert("Incorrect Barcode scan value. Please try again.")
}
}
if (err && !(err instanceof ZXing.NotFoundException)) {
console.error(err);
document.getElementById('result').textContent = err;
}
})
console.log(`Started continous decode from camera with id ${selectedDeviceId}`)
})
.catch((err) => {
console.error(err)
})
})
</script>
I am building a project that uses the ZXing library to scan barcodes. Currently the code I have is working for iOS device opening up the rear camera but when testing using android device it opens up the front camera. Is there a way I can always force the rear camera to be used on any device? Please see working code below:
<script type="text/javascript">
window.addEventListener('load', function () {
let selectedDeviceId;
const codeReader = new ZXing.BrowserMultiFormatReader();
console.log('ZXing code reader initialized');
codeReader.getVideoInputDevices()
.then((videoInputDevices) => {
if (videoInputDevices.length < 1) {
console.log('No video devices found');
return;
}
selectedDeviceId = videoInputDevices[0].deviceId;
codeReader.decodeFromVideoDevice(selectedDeviceId, 'video', (result, err) => {
if (result) {
console.log(result);
var barcode = result;
//this.window.alert(barcode);
if (String(barcode).charAt(0) == 'L') {
document.getElementById('result').textContent = result.text;
document.getElementById('result').style.color = "green";
var previousurl = document.referrer;
window.location.href = previousurl + "&BarCode=" + result.text;
}
else {
document.getElementById('result').textContent = result.text;
document.getElementById('result').style.color = "red";
window.alert("Incorrect Barcode scan value. Please try again.")
}
}
if (err && !(err instanceof ZXing.NotFoundException)) {
console.error(err);
document.getElementById('result').textContent = err;
}
})
console.log(`Started continous decode from camera with id ${selectedDeviceId}`)
})
.catch((err) => {
console.error(err)
})
})
</script>
1 Answer
Reset to default 6remove selectedDeviceId and use undefined
codeReader.decodeFromVideoDevice(undefined, 'video', (result, err) => {
if (result) {
documentation says if you use undefined it will automatically choose the camera, preferring the main (environment facing) camera if more are available.
The error occurs because codeReader.getVideoInputDevices() returns different result