search

capacitor-community / barcode-scanner

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

The scanner view does not show up on Angular project to iOS #194

Closed anndyd closed 1 year ago

anndyd commented 1 year ago

Describe the bug I installed the plugin and configured followed the instruction. The camera can open and get scan result. But the scanner view does not show up.

To Reproduce Steps to reproduce the behavior:

  1. npm install @capacitor-community/barcode-scanner in angular project folder
  2. npx cap sync
  3. add "NSCameraUsageDescription" to Xcode Property List
  4. add method in ts class as the following:
    startScan = async () => { await BarcodeScanner.checkPermission({ force: true }); BarcodeScanner.hideBackground(); const res = await BarcodeScanner.startScan(); if (res.hasContent) { console.log(res.content); } };
  5. add click area in html as the following: <div (click)="startScan()">
  • build the angular project, then run command: npx cap sync
  • run Xcode project on iPad
  • click the scan button/icon on iPad, a little green dot show up on the top-left corner of the iPad, it indicates the camera is opening. shots on a QR code, it can get code content. BUT the camera view does not show up.

    • Expected behavior After click the scan button/icon, the scanner/camera view should show up to indicate what it scanning when the scanner is running.

    Screenshots N/A

    Version Angular: 15.1.5 Material: 15.1.5 "@capacitor/angular": "^2.0.3", "@capacitor/core": "latest", "@capacitor/ios": "^4.6.1", "@capacitor/cli": "latest", "typescript": "^4.8.4" Xcode: 14.2 iPad: iPad Air 5th generation, iPadOS 16.1.1(20B101) macOS Monterey 12.6.2 Intel

    Desktop (please complete the following information):

    Smartphone (please complete the following information):

    Additional context tried all steps of the "Troubleshooting", but not lucky

    JanMisker commented 1 year ago

    You probably have a dom element that is not transparent, and thus blocks the view. You can determine which element it is by attaching a Safari web inspector to your app while it's running on the iPad. Important to remember is that the camera feed is displayed behind the webview.

    anndyd commented 1 year ago

    JanMisker, thanks a lot! For my environment, I set {visibility: hidden; --bs-body-bg: transparent;} for html or body, it works!

    anndyd commented 1 year ago

    I saw it only add style: background: transparent; to html DOM after starting the scanner, it is not enough for Angular project. Could add more settings for adapting more frameworks? This issue could be closed if you think it is not a bug.

    thegnuu commented 1 year ago

    @anndyd the problem why this is "not properly" documented is, that there are millions possible configurations. In your example the issue is most likely not Angular itself, since Angular won't really apply any styles by default. I am pretty sure the variable --bs-body-bg, which seems to be a bootstrap-variable, is causing issues on your end.

    This means that any external css applied, and the order of which they are applied, might cause issues. This makes it basically impossible to document...

    I will close this issue for now since your specific problem seems to be resolved :)