QR scanner on angular project not choosing the right camera

HTML:

<zxing-scanner
[device]="selectedDevice"
(camerasFound)="onCamerasFound($event)"
(scanSuccess)="onQrCodeScanComplete($event)"
style="width: 100%; max-height: 50vh;">
</zxing-scanner>


TS:

onCamerasFound(devices: MediaDeviceInfo[]) {
if (devices.length > 0) {
const backCameras = devices.filter(device =>
device.label.toLowerCase().includes('back') ||
device.label.toLowerCase().includes('rear')
);
this.selectedDevice = backCameras.length > 0 ? backCameras[0] : devices[0];
}
}


I've got this QR scanner on my component and it works, but has a problem: in some devices (mostly devices with 3 or more cameras like iPhone Pro) it doesn't get the camera for short distances (the one used by the default camera to scan QR codes) and it takes a lot to scan them. You can't be too close or it'll be blurry, and when on focus you need to angle it perfectly or else it doesn't get scanned. I've tried to make it take the right camera with onCamerasFound, but it doesn't seem to work. What am I doing wrong? If you need more info on the code or in general feel free to ask.

Continue reading...