Skip to content
This repository has been archived by the owner on Oct 10, 2024. It is now read-only.

Very confused about how to control this component #295

Open
sc-atompower opened this issue Sep 7, 2023 · 2 comments
Open

Very confused about how to control this component #295

sc-atompower opened this issue Sep 7, 2023 · 2 comments

Comments

@sc-atompower
Copy link

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
Copy link

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
Copy link

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants