Angular2 + Cordova + Barcode scanner Plugin: Android behavior

Question

I am trying to use the barcode scanner on my Angular2 app with Cordova and relative plugin.

I can just test on Android now, and I am getting strange behaviors. I am not able to find the problem, whether the plugin or my code.

The scan works right, but after switching from the camera activity to the app webview it's like events and data binding aren't well handled.

When scan returns a result, I set a property on my view to tell app the scan state is success and so my angular view shows some buttons to open a link for example.

Sometime works, others not. Also if I rescan a code, and I cancel it, leaving camera activity it shows me the previous not showed result.. Or sometime just doesn't work at all :(

JAVASCRIPT:

export class ScanQRView extends View {

    private scanState: string = 'ready';


    [....]


    public scan(): void {

        if (this.utility.inApp('barcodeScanner')) {

            cordova.plugins.barcodeScanner.scan(
                (result) => {
                    setTimeout(() => {
                        if (!result.cancelled) {
                            this.onResult(result.text);
                            console.log(this.scanState);
                        } else {
                            this.onResult(false);
                        }
                    }, 500);
                },
                (error) => this.onResult(false), {
                    preferFrontCamera : true, 
                    showFlipCameraButton : true, 
                    showTorchButton : true,
                    torchOn: true, 
                    //prompt : "Place a barcode inside the scan area", 
                    resultDisplayDuration: 500, 
                    formats : "QR_CODE", 
                    disableAnimations : true,
                    disableSuccessBeep: false 
                }
            );
        }
    }


    public onResult(result: string|boolean): void {
        if (result === false) {
            this.scanState = 'error';
        } else {
            this.link = result.toString();
            this.scanState = 'success';
        }
    }


}

TEMPLATE:

<div class="row scan" *ngIf="scanState == 'ready'">
    <div class="col-xs-3"></div>
    <div class="col-xs-6">
        <button type="button" class="btn btn-info btn-lg btn-block fade-in-out-button" (click)="scan()">
            <i class="fa fa-camera" aria-hidden="true"></i>
        </button>
    </div>
    <div class="col-xs-3"></div>
</div>


<div class="row scan" *ngIf="scanState == 'success'">
    <div class="col-xs-12">
        <div class="btn-group">
            <div class="btn-group">
                <button type="button" class="btn btn-info btn-lg" (click)="cancel()">
                    <i class="fa fa-refresh" aria-hidden="true"></i>
                </button>
            </div>
            <div class="btn-group">   
                <button type="button" class="btn btn-info btn-lg fade-in-out-button" (click)="openLink()">
                    <i class="fa fa-link" aria-hidden="true"></i> Apri
                </button>
            </div>
        </div>
    </div>
</div>

I tried with and without the timer, nothing changes.. Anyone had similar problems?

Answer 1

You can use a Promise :

public scan(): void {
this.promiseScan().then(result => {
  this.resultQrcode = result;
}).catch((ex) => {
  console.log(ex);
});

}

public promiseScan(): any {
return new Promise((resolve, reject) => {
  cordova.plugins.barcodeScanner.scan(
    (result) => {
      return resolve(result.text);
    },
    (error) => {
      return reject('ERROR');
    }
  );
});

}