capacitor-community / barcode-scanner

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

Very confused about how to control this component #295

Open sc-atompower opened 1 year ago

sc-atompower commented 1 year ago

I'm on a fresh Tab structured Ionic angular app with Ionic 7.1.1

None of the documentation on the readme of this library seem relevant to the issues i'm having.

  1. There is no issue with the scanner appearing at all. No need for DOM manipulation with body classes, no need for show / hide background. None of that seems to change anything about the scanner.
  2. Since the CSS and hide/show background seem to do nothing to the scanner or its appearance I'm left confused on what to do about controlling it stylistically. calling startScan() brings up a full screen scanner that overtakes the entire application and its navigation.

image

  1. Since there is no component on the page and no class on the object that is injected into the DOM I have no control over this thing and it overtakes all of the navigation components on the screen. All I could do is query the DOM for the last div of the body but in realistic terms that's not feasible for every dev team as that cannot be guaranteed. Ideally id have it look more like this:

image

Could someone shine some light on how to manage the look and feel of this library? If not as a feature request it would be great to have a component in the DOM that this thing attaches itself to so developers can more easily control it. Something like <zxing-scanner> video attaches here</zxing-scanner>

JanMisker commented 1 year ago

There is no DOM element because the camera feed is not part of the webview. It is behind the webview. So you have to leave your own app in view and put any controls you want.

JanMisker commented 1 year ago

Looking at your screenshot it seems you run inside a desktop browser? That use case I don't know so much about, but do note that the plugin behaves different on (simulated) mobile devices compared to desktop.