Scanner does not appear on my Ionic v7 app

[briantci]

Describe the bug I am trying to use the barcode scanner in my Ionic app, and have configured everything the way it is written in the docs, but somehow the barcode scanner just does not show up.

I am using Ionic v7 and Capacitor v4.7.0, hence I am using version 3.0.3 of your package.

I have followed your advice I have inspected my DOM, but this does not add the div I should be able to see. Note that it does ask me for my permission to use the camera and when accepted it also says that it uses the camera, but there is just no overlay.

I will try updating the Capacitor version including the version of the package.

To Reproduce Steps to reproduce the behavior:

Just try every step from the Installation guide along with the versions I am using to see the issue.

Expected behavior Overlay should display.

Screenshots If applicable, add screenshots to help explain your problem.

Version v.3.0.3

Desktop (please complete the following information):

• OS: macOS Monterey 12.6
• Browser Chrome
• Version 113.0.5672.126

Smartphone (please complete the following information):

• Device: chrome://inspect
• Browser: chrome

Additional context Add any other context about the problem here.

[DanielCastilloGT]

I was facing the same issue. Even though I wasn't seeing the DIV it is supposed to add to the DOM I just added a display:none; to the class scanner-active and it worked.

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

[JanMisker]

No div will be added, the camera is in a native view behind the webview.

[opunbuds]

Same here, its look like the "scanner-active" class is not attached to body

[thegnuu]

No classes are attached to the body by this plugin, as clearly described in the README. You need to keep track of your CSS and classes yourself. It is not possible to create a "preset" that will work with all available frameworks and stuff, this is why this work has to be done by the developer itself.

[briantci]

Alright thank you for your answers, I eventually managed to get it to work. Because I initially thought that this plugin had some sort of issue, I used a different plugin (https://github.com/capawesome-team/capacitor-mlkit), but solving it is essentially the same procedure. I tried following along the demo project that uses this plugin (https://github.com/robingenz/capacitor-mlkit-plugin-demo) and it worked, essentially I had to manage the CSS myself, since this isn't done by the plugin, as I learnt here.