Ionic/Angular not read

[leocharrua]

I have a Ionic 5 and Angular 12 App.

html5QrcodeScanner is displayed correctly, but the onScanSuccess callback is never called. I can't read qr codes or barcodes of any kind.

I'm opening a modal window with this html:

<div id="qr-reader" style="display: inline-block;"></div>

In the typescript part, I have this:

import { Html5QrcodeScanner } from 'html5-qrcode';

html5QrcodeScanner = null;

ngOnInit() {
    this.html5QrcodeScanner = new Html5QrcodeScanner('qr-reader', { fps: 10, qrbox: { width: 250, height: 250 }}, false);
    this.html5QrcodeScanner.render(this.onScanSuccess);
}

onScanSuccess(decodedText, decodedResult) {
    console.log(`MATCH = ${decodedText}`, decodedResult);
}

I can see any error in the console.

Any help will be appreciated.

Thanks

[leocharrua]

Sorry, I found the problem. In the real code, in the callback function (onScanSuccess), I used a global var to assign the decoded text:

this.value = decodedText;

In a callback function this line breaks the run without any error or warning.

The way to solve this, is assign the callback function in this way:

this.html5QrcodeScanner.render((text, result) => this.onScanSuccess(text, result));

I think you can use this code snippet like recipe for Angular (and Ionic too).

Thanks

[troyanskiy]

Hello @leocharrua

With your example at you locally running do you have that problem? https://github.com/mebjas/html5-qrcode/issues/320

Thanks.

[leocharrua]

Nop @troyanskiy

[troyanskiy]

@leocharrua and which version of the library do you use?

[leocharrua]

@troyanskiy : "html5-qrcode": "^2.1.2",