My current project involves implementing the Ionic Native QR Scanner. Since I anticipate using the scanner across multiple modules, I decided to create a straightforward service that can launch the scanner and provide the result.
Initially, I am following the example code provided in the link above:
// within qrScannerService...
public scanQR(): Promise<void> {
return this.qrScanner.prepare()
.then((status: QRScannerStatus) => {
if (status.authorized) {
let scanSub = this.qrScanner.scan().subscribe((qrResult: string) => {
this.qrScanner.hide();
scanSub.unsubscribe();
// this is my ultimate goal.
return qrResult;
});
this.qrScanner.show();
} else if (status.denied) {
console.log("denied");
} else {
// permission was denied, but not permanently.
}
})
.catch((e: any) => console.log('Error is', e));
}
This is how I utilize the scanner service in my module:
private doQRScan() {
this.qrScannerService.scanQR().then(result => {
console.log(result);
});
}
In this set up, there is a promise chain doQRScan()->scanQR()->prepare()->scan(), which requires coordination between all three promises/observables. However, due to my limited experience with Angular, I am struggling to achieve this synchronization.
As it currently stands, prepare() fulfills its promise and doQRScan() completes without receiving the actual QR scan result.
Is there a solution or suggestion on how to tackle this issue?