ngx-scanner

ngx-scanner copied to clipboard

The scanner in my app can't recognize any barcodes - except for QR codes. I have tried to configure the ZXingScannerComponent to enable EAN13 Barcodes:

//TS file
formatsEnabled: BarcodeFormat[] = [BarcodeFormat.EAN_13];

//template
<zxing-scanner
  #scanner
  [torch]="torchEnabled"
  [(device)]="currentDevice"
  (scanSuccess)="onCodeResult($event)"
  [formats]="formatsEnabled"
...

And I can confirm this configuration by logging the formats in the AfterViewInit method:

 @ViewChild('scanner') scanner: ZXingScannerComponent;

 ngAfterViewInit(): void {
    console.log(this.scanner.formats); //prints only 7, which is EAN_13
  }

However, the scanner still doesn't recognize EAN_13 barcodes but does still recognize QR-codes even though QR codes are not enabled. I have also tried to enable almost all barcode types, but still, the scanner will only recognize QR-codes. :/

I am using the following versions: "@zxing/ngx-scanner": "^3.0.0" and "@angular/core": "~9.1.4",

Any thoughts on what might be wrong here?

Any thoughts on what might be wrong here?

I'd hardly say it's a decoding bug in the lib, we have a dame up and running where you can check the lib does reads EAN13. I just checked and our demo does have some bug with setting the formats as well, but after any changes to the formats array (made via UI) the component starts decoding all the enabled formats.

And I can confirm this configuration by logging the formats in the AfterViewInit method:

That doesn't necessarily mean that the layout binding received the correct value, change detector sometimes is weird. I'd rather prefer a bug in the bindings then the component itself.

So what could be a bug in this scenario?

The component may be overriding the formats setting when starting up, which would cause this behavior. Anyhow this requires further investigation.

I came across the same problem and fixed it today.

It doesn't matter how you fill the array in the demo - it will always be the same.

You need to change it in the lib:

diff --git a/projects/zxing-scanner/src/lib/zxing-scanner.component.ts b/projects/zxing-scanner/src/lib/zxing-scanner.component.ts
index 837bda9..e2be9c4 100644
--- a/projects/zxing-scanner/src/lib/zxing-scanner.component.ts
+++ b/projects/zxing-scanner/src/lib/zxing-scanner.component.ts
@@ -364,7 +364,13 @@ export class ZXingScannerComponent implements AfterViewInit, OnDestroy {
     this._hints = new Map<DecodeHintType, any>();
     this.autofocusEnabled = true;
     this.autostart = true;
-    this.formats = [BarcodeFormat.QR_CODE];
+    this.formats = [
+  BarcodeFormat.CODE_128,
+  BarcodeFormat.EAN_13,
+  BarcodeFormat.EAN_8,
+  BarcodeFormat.ITF,
+  BarcodeFormat.RSS_14,
+];

     // computed data
     this.hasNavigator = typeof navigator !== 'undefined';

I would try setting the values on ngAfterViewInit or something, maybe that works as well.

I can confirm the same issue, doesn't work on EAN13 also tested CODE128. Works flawlessly on QR codes.

Tried @odahcam suggestion of setting formats at ngAfterViewInit but still no luck.

My code below: ts

ngAfterViewInit() {
   setTimeout(()=>{this.formats = [
       BarcodeFormat.CODE_128,
       BarcodeFormat.EAN_13,
       BarcodeFormat.EAN_8,
       BarcodeFormat.ITF,
       BarcodeFormat.RSS_14,
     ]},200);
 }

html <zxing-scanner [tryHarder]="true" [formats]="formats" (scanSuccess)="onScanSuccessHandler($event)"></zxing-scanner>

@MattRiddell I couldn't find the code change you suggested in the ngx-scanner files. Can you point me in the direction where I can change this so I can test? Thanks

@bkarv you can extend the module and component classes and modify it to contain the barcode formats you wanna decode.

The library is working all right with barcodes other than QR Code, the only problem we have here is that Angular is not correctly binding the formats array to the component in the template. Maybe that happens due to Angular API change. Also it happens in the StackBlitz demo project, in case anyone wants to take a look.

@bkarv

projects/zxing-scanner/src/lib/zxing-scanner.component.ts

Hi, has this been resolved? If so, then how? I'm using ngx-scanner in my project and I still can't scan any other type of code other than QR code, even though I'm explicitly setting [formats] to have different code types, but only QR codes are being scanned. Thanks!

We got it working by having the zxing-scanner component as a viewchild. It is not super pretty but maybe that will also work for you..:

TEMPLATE: <zxing-scanner #scanner ... ...

COMPONENT:

enabledFormats: BarcodeFormat[] = [
  BarcodeFormat.CODE_128,
  BarcodeFormat.CODE_39,
  BarcodeFormat.EAN_13,
  BarcodeFormat.ITF,
];
@ViewChild('scanner') scanner: ZXingScannerComponent;
ngAfterViewInit(): void {
  setTimeout(() => {
    /* we need to force the component to set the enabled formats. Binding doesn't work.
       Must happen after the scanner component has been initialized
    */
    this.scanner.formats = this.enabledFormats;
  }, 3000);
}

@anderswalther Thanks, that works!

The solution above worked fine, but made the performance decrease. Is it possible to set on the lib all the formats as default in order to mitigate this bug?

@artursoareshsv I support this too

All formats as default would have a performance impact too, but there's no problem other than that.