Cannot see the scanner view in android with capacitor 4

[MatteoOstermeier]

First of all, thanks for your support! This is my first app using capacitor (was using cordova for my previous projects) and barcode scanners and I'm really trying to get this to work:).

Describe the bug BarcodeScanner.startScan() does not show anything. Function is triggered in the background as i see the console logs. But I cannot see anything happen. I moved the function to the app module first (no change). Afterwards, I added a button with the scan function in my main ionic page. There, I'm calling the hideBackground and startScan. I see that a transparent background is added to the html tag, but I cannot find the Div mentioned in the documentation.

I did follow the configuration steps and I have modified my Manifest accordingly.

Expected behavior A barcode scanner window opens and barcodes are scanned.

Version @capacitor-community/barcode-scanner@3.0.0 according to npm list

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Chrome
• Version 104.0.5112.102

Smartphone (please complete the following information):

• Device: Google Pixel 6 Pro
• OS: Android 13
• Browser: Chrome, but i was using the native app.
• Version 105.0.5195.79

Additional context Ionic:

Ionic CLI : 6.20.1 (C:\Users\Matteo\AppData\Roaming\npm\node_modules\@ionic\cli) Ionic Framework : @ionic/angular 6.2.5 @angular-devkit/build-angular : 14.2.1 @angular-devkit/schematics : 14.2.1

@angular/cli : 14.2.1 @ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 4.1.0 @capacitor/android : 4.0.1 @capacitor/core : 4.1.0 @capacitor/ios : 4.1.0

Utility:

cordova-res : 0.15.2 native-run : 1.7.0

System:

NodeJS : v16.16.0 (C:\Program Files\nodejs\node.exe) npm : 8.19.1 OS : Windows 10

[MatteoOstermeier]

Sorry, this issue was realated to the other ticket for dark-mode. I'll try to work around it so that I can use the scanner in ion-modal.

[thegnuu]

I cannot see the full code, but if you just using the snippet visible in the screen shot you need to add a permission-check as well :)

[thegnuu]

The easiest solution I found so far:

Add this to your global css:

body.scanner-active {
  --background: transparent;
  --ion-background-color: transparent;
}

And before you use the scanner set the class on the body:

document.querySelector('body').classList.add('scanner-active');

It would of course make sense to remove the once your done afterwards :)

document.querySelector('body').classList.remove('scanner-active');

Please let me know if this works for you so I can close this issue :)

[rickynguyenc]

The easiest solution I found so far:

Add this to your global css:

body.scanner-active {
  --background: transparent;
  --ion-background-color: transparent;
}

And before you use the scanner set the class on the body:

document.querySelector('body').classList.add('scanner-active');

It would of course make sense to remove the once your done afterwards :)

document.querySelector('body').classList.remove('scanner-active');

Please let me know if this works for you so I can close this issue :)

Thanks you so much. It still not work, but i add both "body.scanner-active ion-content{ --background: transparent !important; --ion-background-color: transparent !important; background-color: transparent !important; background: transparent !important; }", it work for me