Jalil-Irfan commented 3 years ago

In our project we have implemented Zxing-scanner in Angular 12.0.0 based project. It turns out bar code formats are not getting scanned. Especially EAN formats. No matter what i try like enabling TryHarder, setTimeout and setting supported formats etc , still the Barcodes are not getting detected. But QR, some Matrix code works like a charm. In few seconds it gives the output. I am not sure whats going wrong where.

Steps to reproduce the behavior:

Created a component named gearscan

added below HTML to the gearscan.component ` <zxing-scanner

scanner

[torch]="torchEnabled"
(scanSuccess)="onScanSuccess($event)"
(scanFailure)="onScanFailure($event)"
[tryHarder]="tryHarder"
(permissionResponse)="onHasPermission($event)"
(camerasFound)="onCamerasFound($event)"
(torchCompatible)="onTorchCompatible($event)"
[formats]="allowedFormats"
previewFitMode="cover">

`

Then added respective functions in TS.


import { Component, OnInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { ActivatedRoute, Router } from '@angular/router';
import { BarcodeFormat } from '@zxing/library';

@Component({ selector: 'app-gearscan', templateUrl: './gearscan.component.html', styleUrls: ['./gearscan.component.css'] })

export class GearscanComponent implements OnInit {

currentDevice: MediaDeviceInfo = null;

public tripId: string = ''; public isPickup: boolean = false; public isReturn: boolean = false;

public scannerOpen: boolean = false; public showScanError: boolean = false; public scanSuccess: boolean = false;

qrResultString: string; torchEnabled = false; torchAvailable$ = new BehaviorSubject(false); tryHarder = false; hasDevices: boolean; hasPermission: boolean;

allowedFormats = [ BarcodeFormat.CODE_39, BarcodeFormat.CODE_93, BarcodeFormat.CODE_128, BarcodeFormat.EAN_8, BarcodeFormat.EAN_13, BarcodeFormat.QR_CODE ];

constructor() {

}

clearResult(): void { this.qrResultString = null; }

onCamerasFound(devices: MediaDeviceInfo[]): void { this.hasDevices = Boolean(devices && devices.length); console.log('inside camerasFound'); this.scannerOpen = true; }

onScanFailure($event){ console.log('inside ScanFailure'); console.log($event); this.showScanError = true; }

onScanSuccess(resultString: string) { console.log('inside scanSuccess '+resultString); this.qrResultString = resultString; //this.scannerOpen = false; this.scanSuccess = true; }

onHasPermission(has: boolean) { this.hasPermission = has; }

ngAfterViewInit() { this.delayAndTryHarder(); }

async delayAndTryHarder() { await this.delay(1000); this.toggleTryHarder(); console.log("abcdefgh"); }

delay(ms: number) { return new Promise( resolve => setTimeout(resolve, ms) ); }

toggleTryHarder(): void { this.tryHarder = !this.tryHarder; }

ngOnInit(): void { }

onTorchCompatible(isCompatible: boolean): void { this.torchAvailable$.next(isCompatible || false); }

toggleTorch(): void { this.torchEnabled = !this.torchEnabled; }

}


4. Now run the project and try to scan any barcode. it throws error. but scanning a QRcode dislays output in few seconds
5. See error
    Its only throwing the below error :-



Tried in both Desktop (Mac , Windows) and Mobile devices (Android, iOS) . 
But the demo url provided by Zxing-scanner , ngx-scanner is flawlessly scanning all the codes.

In my package.json i have the follow:
"@angular/cdk": "^12.1.0",
"@angular/cli": "~12.0.0",
"@angular/common": "~12.0.0",
"@angular/compiler": "~12.0.0",
"@angular/core": "~12.0.0",
"@zxing/browser": "0.0.9",
"@zxing/ngx-scanner": "^3.2.0",

Let me know if any more clarity is needed. 
Because of this our project submission is getting delayed so any help is much appreciated.

werthdavid commented 3 years ago

I guess you have only forgotten to mention but you do have "@zxing/library" as well in your package.json?

werthdavid commented 3 years ago

I tried it with your code, the thing is that it DOES detect EAN-13, it is just very bad.... The problem seems to be that the latest version of @zxing/library does a bad job. When I install @zxing/library@0.18.0 it works pretty good, please try that as well!

Jalil-Irfan commented 3 years ago

I tried it with your code, the thing is that it DOES detect EAN-13, it is just very bad.... The problem seems to be that the latest version of @zxing/library does a bad job. When I install @zxing/library@0.18.0 it works pretty good, please try that as well!

Thanks a lot will try that too

to answer your first question , yes i have the library "@zxing/browser": "0.0.9", "@zxing/library": "^0.18.6", "@zxing/ngx-scanner": "^3.2.0",

To give you more input on the issue I have increased the video CSS to fit the entire screen Finally found that the barcode (any EAN) is getting scanned only when i place the code in some specific position in the video. Which is highly difficult to find out , it just happens randomly But the QR code gets scanned when placed any where in the video

Will try out 0.18.0 and let you know how it is

Jalil-Irfan commented 2 years ago

I tried it with your code, the thing is that it DOES detect EAN-13, it is just very bad.... The problem seems to be that the latest version of @zxing/library does a bad job. When I install @zxing/library@0.18.0 it works pretty good, please try that as well!

Hey Finally got it working the issue is that BARCODE is getting scanned only in specific section of the code but QR code gets scanned pretty good irrespective of the distance and position

So barcodes are getting scanned ... no issues in that its the way how the video is placed and where the barcodes are .

Now the scanner is not getting the userMedia in WKwebview of iOS APP will raise it as a separate question

zxing-js / ngx-scanner

EAN_8, EAN_13 are not getting scanned in Angular 12 #419

scanner