search

zxing-js / ngx-scanner

Angular QR code, Barcode, DataMatrix, scanner component using ZXing.
https://zxing-js.github.io/ngx-scanner/
MIT License
639 stars 227 forks source link

Zxing and Angular 10 #337

Closed miladaws closed 3 years ago

miladaws commented 4 years ago

Zxing cannot read the barcode in Angular 10. The camera is opened but it continuously fails to read the barcode. the same code and settings work in Angular 8.

"@angular/common": "~10.0.0", "@angular/core": "~10.0.0", "@zxing/ngx-scanner": "^3.0.0",

kzay commented 4 years ago

I also have isssu with angular 10

thesandi001 commented 4 years ago

any update on this issue? facing the same, doesnt work with angular 10

asalhallak commented 4 years ago

+1

neofuture commented 4 years ago

Same issue for me with NG10 it says on scan that there are no readers available to decode, but it will read a QR code

neofuture commented 4 years ago

if you toggle tryHarder after initialisation it now reads barcodes but this is not a fix

neofuture commented 4 years ago

Do we have any update on this as angular 10 is current now

klipnot commented 4 years ago

+1 It will be perfect if it could works on Angular 10

werthdavid commented 4 years ago

What exactly is the issue here? I have it working with Angular 10 on iOS and Windows (Chrome). Can you provide more information like log-output or errors?

neofuture commented 4 years ago

Issue is it will not scan a barcode (code 39) but will scan QR codes, the console if loogging the error states what I have already posted, there are no readers available to decode

neofuture commented 4 years ago

I cant provide more now, but for reference if you toggle the try harder mode, it will then read a barcode

harrispap03 commented 4 years ago

What exactly is the issue here? I have it working with Angular 10 on iOS and Windows (Chrome). Can you provide more information like log-output or errors?

I'm running Angular 10 and I can't even use the library because it's incompatible. Can you please let me know how you made it work for you?

pette9 commented 4 years ago

I have it working on Angular 10.1.4. I had to force update angular and then do an ugly hack to toggle try harder in the afterViewInit lifecycle.

  ngAfterViewInit() {
    this.delayAndTryHarder();
   }

 async delayAndTryHarder() {
     await this.delay(1000);
     this.toggleTryHarder();
  }

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

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

This is not a solution but it is working for me until the issue with Angular 10 is fixed.

neofuture commented 4 years ago

same here set a timer to change the try harder flag

klipnot commented 3 years ago

I'm really surprised.

I'm working on a brand new Angular 10 project and I got this error:

ERROR in node_modules/@zxing/ngx-scanner/lib/zxing-scanner.module.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (@zxing/ngx-scanner/lib/zxing-scanner.module) which declares ZXingScannerModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

I can't even launch it.

"@angular/common": "~10.1.5", "@angular/compiler": "~10.1.5", "@angular/core": "~10.1.5", "@zxing/library": "^0.17.1", "@zxing/ngx-scanner": "^3.0.1",

werthdavid commented 3 years ago

I think I found a possible solution, it works in my local workspace now. Need some time to make a "clean" and proper solution

harrispap03 commented 3 years ago

I have it working on Angular 10.1.4. I had to force update angular and then do an ugly hack to toggle try harder in the afterViewInit lifecycle.

  ngAfterViewInit() {
    this.delayAndTryHarder();
   }

 async delayAndTryHarder() {
     await this.delay(1000);
     this.toggleTryHarder();
  }

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

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

This is not a solution but it is working for me until the issue with Angular 10 is fixed.

Well the scanner is now available for Angular 10 but I still can't make my scanner work. Since you've made it work for yourself, do you mind taking a few seconds and checking my component to see if I've made any mistakes in the implementation? It's only a few lines of code.

P.S I've also tried using the "tryHarder hack" as you mentioned before and after the version of the library being updated and I still couldn't make it work.

jmannau commented 3 years ago

I think the problems is a race condition.

When auto starting, the library tries to autostart, autostartScanner, line 560 https://github.com/zxing-js/ngx-scanner/blob/master/projects/zxing-scanner/src/lib/zxing-scanner.component.ts#L560 the device is updated, which should cause the library to start scanning.

However on line 190 https://github.com/zxing-js/ngx-scanner/blob/master/projects/zxing-scanner/src/lib/zxing-scanner.component.ts#L190 the device update is blocked due to this.isAutostarting === true.

The workaround above works by setting the device again, starting the video feed.

harrispap03 commented 3 years ago

I think the problems is a race condition.

When auto starting, the library tries to autostart, autostartScanner, line 560 https://github.com/zxing-js/ngx-scanner/blob/master/projects/zxing-scanner/src/lib/zxing-scanner.component.ts#L560 the device is updated, which should cause the library to start scanning.

However on line 190 https://github.com/zxing-js/ngx-scanner/blob/master/projects/zxing-scanner/src/lib/zxing-scanner.component.ts#L190 the device update is blocked due to this.isAutostarting === true.

The workaround above works by setting the device again, starting the video feed.

Thank you very much for tyring to help me out. I've been struggling with this for days So, to make this clear. All I'm supposed to do is to go to L190 and do this.isAutostarting === true ?

odahcam commented 3 years ago

The scanner component will support Angular 10 in the next release. You can expect it in a few days.

harrispap03 commented 3 years ago

The scanner component will support Angular 10 in the next release. You can expect it in a few days.

Oh nice. That might as well solve my problem. Hopefully.
Thank you for the heads up!

StevenSwitten commented 3 years ago

The scanner component will support Angular 10 in the next release. You can expect it in a few days.

Do you have a specific release date yet? We have our own release coming up and I'd rather not rollback to angular 9

odahcam commented 3 years ago

It will be published until next week.

odahcam commented 3 years ago

What's holding the new version is that I can't turn the torch/flash off after turning it on. Does anyone already seen this behavior/bug?

pette9 commented 3 years ago

What's holding the new version is that I can't turn the torch/flash off after turning it on. Does anyone already seen this behavior/bug?

I don't have this problem on chrome for android and angular 10.1.4

odahcam commented 3 years ago

Can you share how you turn on and off the torch?

Edit: this is the approach I'm taking, but it doesn't turn the flash off.

https://github.com/zxing-js/browser/blob/14794724c3355f49f86a8929be975ec694f8b60a/src/readers/BrowserCodeReader.ts#L56-L68

odahcam commented 3 years ago

For anyone interested in helping, I have forked and edited this pen: https://codepen.io/odahcam/pen/oNLBmyx?editors=1010

It should turn on the torch and turn it off once again after 5 seconds, but it doesn't. Anyone who finds a solution for this would be helping a lot.

sonntag-philipp commented 3 years ago

Hello there, I tried the pen on my android phone in chrome and it works like a charm. I've got a Xiaomi Poco F2 Pro with Android 10.

Primarily I'm also here because I want to ask if the @angular/* peer dependencies have to be so specific. I think it would be better to provide a bigger bandwith of angular versions, like "~10.1.0" or something else.

odahcam commented 3 years ago

Yes you're right. It's great news your Xiaomi works, mine doesn't seem to like me turning off it's torch 😞 . If you keep helping maybe we can achieve something production ready in the next months, but for now I'll leave torch there with experimental tags and hope that more devs come back with data and fixes for we to improve. Also, thanks.

LeonardoX77 commented 3 years ago

It doesn't scan QR codes in my Xiaomi pocophone and my laptop camera with latest chrome. Using release 3.0.0 works perfect, which I think is working with Angular 9

StevenSwitten commented 3 years ago

For anyone interested in helping, I have forked and edited this pen: https://codepen.io/odahcam/pen/oNLBmyx?editors=1010

It should turn on the torch and turn it off once again after 5 seconds, but it doesn't. Anyone who finds a solution for this would be helping a lot.

It works on my OnePlus 6

max-x-1000000 commented 3 years ago

Any update? Camera preview is also blank?! (Angular 11)

ojathelonius commented 3 years ago

Works for me on Angular 11 on OnePlus 5T. I had dark screens at first, then launched the camera app once separately and everything worked perfectly afterwards.

max-x-1000000 commented 3 years ago

Good to know but that's still a problem. I can't get every user to relaunch their camera apps every time they need to use the scanner

ojathelonius commented 3 years ago

@max-x-1000000 Did you reproduce this fix with your own phone (starting the camera app & retrying) ? I would like to know if this fixed the issue or if it was fortuitous.

max-x-1000000 commented 3 years ago

I have not

ojathelonius commented 3 years ago

@max-x-1000000 did you look into this : https://github.com/zxing-js/ngx-scanner/issues/359 It looks like rollbacking to 3.0.0 resolves the issue, perhaps that's what did the trick for me.

max-x-1000000 commented 3 years ago

I downgraded angular to 9.1.13 and used 3.0.0

odahcam commented 3 years ago

I think it should work now.

DronDima commented 3 years ago

Hi everyone! Is issue with turning torch off still actual? I have angular 10 and ngx-scanner 3.1.3 and it doesn't work for me.

max-x-1000000 commented 3 years ago

It seems to work fine. I'm using 3.1.3 on Angular 11. Try switching between the different cameras. I've found only one of my multiples lenses/camera is actually linked to the torch for some reason.

Would be better if it was camera agnostic!

montyJordanIII commented 3 years ago

It seems to work fine. I'm using 3.1.3 on Angular 11. Try switching between the different cameras. I've found only one of my multiples lenses/camera is actually linked to the torch for some reason.

Would be better if it was camera agnostic!

what exact version of NG 11? I'm getting a build error (@zxing/ngx-scanner) which declares ZXingScannerComponent has not been processed correctly by ngcc, or is not compatible with Angular Ivy.

werthdavid commented 3 years ago

Please try @zxing/ngx-scanner@3.2.0

Jalil-Irfan commented 3 years ago

Im Using Angular 12 and ZxingScanner unfortunately i am unable to scan Barcode , but able to scan QR code

tried all "@zxing/browser": "0.0.9", "@zxing/library": "^0.18.6", "@zxing/ngx-scanner": "^3.2.0",

ryann3588 commented 3 years ago

Same @Jalil-Irfan

3.1.3 not working with Angular 11 and 3.2.0 only allowing QR.

werthdavid commented 3 years ago

"@zxing/browser": "0.0.9", "@zxing/library": "^0.18.0", "@zxing/ngx-scanner": "^3.2.0",

The latest zxing/library has issues with Barcode so please use 0.18.0 instead

ryann3588 commented 3 years ago

I tried this and it seems to work.

@./browser": "0.0.5", @./library": "^0.18.6", @.***/ngx-scanner": "^3.2.0"

On Wed, Jul 28, 2021, 1:47 AM David Werth @.***> wrote:

@./browser": "0.0.9", @./library": "^0.18.0", @.***/ngx-scanner": "^3.2.0",

The latest zxing/library has issues with Barcode so please use 0.18.0 instead

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/zxing-js/ngx-scanner/issues/337#issuecomment-888028466, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALJ4T2CRNC3HSMF7SIOJED3TZ6KXTANCNFSM4RWYI2OA .