ngx-scanner

ngx-scanner copied to clipboard

Describe the bug A clear and concise description of what the bug is. Hi there, I am trying to make a button that first disables the scanner and then a button that enables it back. yet it only disables and never enables it To Reproduce Steps to reproduce the behavior:

1. set the this.scanner.enable to false
2. set the this.scanner.enable to true
3. doesn't get enabled back

Expected behavior that it brings back my camera (enables it back on)

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [Windows 10 pro]
• Browser [edge,firefox, chrome]
• Version [Latest]

Smartphone (please complete the following information): none yet

Additional context I tried both the set the variable with this.scanner.enable and with property binding Add any other context about the problem here.

We have the same problem here. We enable it by button, then disable it and want to re-enable it again which does nothing.

By setting this.scanner.enable to false it emits the scanError event and I tried to console this error it says

DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.

It doesn't re-enable after giving this error.

I have solved this by setting the device again after I enable it again. However this fix doesn't work on mobile for what ever reason

@WEBhicham Hey it works

But it still throws scanError event when this.scanner.enable is set to false when scanning completes. Are you facing the same issue?

You would like to enable the scanner back again from it's previous state (before disabling it)?

@odahcam Yea right! On button click, I want to enable the scanner and as soon as the scan completes I want to disable it. And after disabling the scanner enable it again. This works fine.

But after completing the scanning and getting the result in scanComplete event and disable it using this.scanner.enable to false it throws below error in scanError event

DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.

That one occours when the decoder can't draw the image from a binary string for decoding, probably some async problem when the scanner is shutting down.

@odahcam So is there any solution to avoid that error?

@odahcam Can we connect handheld barcode device to this library and get the scanned data with the help of this library?

Nope, but you usually can use these devices as a keyboard as they can write data in some input field, so there's no need for this lib to manage that.

Hi, I've the same need : programmatically disable and renable the scanning of QRCode at will. I've made a try with a basic button, and I've the same faulty behaviour. Disabling works, but when re-enabling, nothing happen.

My use case : I'm using either the QRCode scanner to retrieve an element from the database (QR Scanner on) or retrieving the element from a webpage (in this case the QR Scanner must not be displayed).

Just to remember: the idea behind this is to disable the scanner and enable it back so it can be used via programatic code, it was not intended to be a UI feature. The scanner had something like that in the past, but it was just a bug farm, creating more problems than solving and that's why it behaves like this nowdays (since this enable feature).

To make this possible, we'll have to store the last setup the scanner was using so it can be enabled back retrieving that previous information. Any PR is very welcome and is a good starting point; thanks.

My scanner is inside a modal dialog and i want to disable it when the dialog is closed. The solution i came up with is to just add an *ngIf condition to the scanner element like so: <zxing-scanner *ngIf="showModal"</zxing-scanner> This seems to work fine for repeatedly enabling/disabling without breaking the scanner.

Thanks @david-mps68 , I'll try that :)

@david-mps68 can you confirm that *ngIf actually disables the camera usage from the device? Cameras are a high energy and memory consuming feature and it's not cool to keep it enabled, hehe.

@david-mps68 can you confirm that *ngIf actually disables the camera usage from the device? Cameras are a high energy and memory consuming feature and it's not cool to keep it enabled, hehe.

Yes, my webcam light turns off.

My scanner is inside a modal dialog and i want to disable it when the dialog is closed. The solution i came up with is to just add an *ngIf condition to the scanner element like so: <zxing-scanner *ngIf="showModal"</zxing-scanner> This seems to work fine for repeatedly enabling/disabling without breaking the scanner.

On Angular 9.1 I got the best results when combining *ngIf="showScanner" and [enable]="showScanner". Using only *ngIf had quite bad impact on scanner startup time using mobile devices. Using them together somehow works best for my use case

Just to be clear, I'm whiling to change this variable behavior in a future release, as I also will help if someone wants to send a PR. But I have no time to work on this right now, sorry.