search

capacitor-community / barcode-scanner

A fast and efficient (QR) barcode scanner for Capacitor
MIT License
437 stars 172 forks source link

Is there an easy way to cancel scan with ionic ? #172

Closed JoranLive closed 1 year ago

JoranLive commented 1 year ago

Describe the bug I am working with ionic 6 and Angular 14.

In order to make the scanner working with ionic, this trick (from the readme page) was not sufficient: this.barcodeScanner.hideBackground(); document.querySelector('body').classList.add('scanner-active'); (class is well defined in global css and assigned to body)

I had to do this instead: this.barcodeScanner.hideBackground(); document.body.style.opacity = '0'; document.body.style.background = 'transparent'; This trick (found on tis site) was working fine, but...

When we run the scanner, there is no way to cancel the scan by default.

In ordrer to do that, I wanted to add an overlay with a cancel button that could stop the scan.

However, the overlay is not displaying because opacity is set to 0 for the entire body.

Question, is there a way?

jkennedy1980 commented 1 year ago

I'm also interested in this. Working with Ionic6 and VueJs

JoranLive commented 1 year ago

On my side, I added a listener on back button to cancel the scan.

thegnuu commented 1 year ago

As you said you won't be able to cancel if you set your body opacity to 0, if you do this, your UI won't be visible at all by definition. You need to check your DOM and make sure all related css variables and elements are transparent and prevent setting the opacity.

Unfortunately this is nothing the plugin can handle itself, since the plugin can be used independent of any framework. You need to make sure your DOM is setup correctly yourself...

If your DOM is setup correctly, you can just cancel the scan with the given functions...

thegnuu commented 1 year ago

Will close this since I have not gotten any feedback, feel free to reopen if you still have issues :)