Camera View

[andrefnc4]

Hi! I'm using your plugin ml-kit to scan qr codes in my app but i my camera View doesn'st open, i tried copying your demo and everything works except the camera view, I also tried the simpler version from the guide and it happens the same thing-

[andrefnc4]

In my 'theme/variables.scss' i have this:

body.barcode-scanning-active {
visibility: hidden;
--background: transparent;
--ion-background-color: transparent;
}

.barcode-scanning-modal {
visibility: visible;
}

@media (prefers-color-scheme: dark) {
.barcode-scanning-modal {
--background: transparent;
--ion-background-color: transparent;
}
}

it's because i'm using your demo app code in my app, it should work

[robingenz]

Unfortunately, I can't help you without a Minimal, Reproducible Example.

[andrefnc4]

if i delete the following code from your demo barcode scanning app in 'theme/variables.scss':
body.barcode-scanning-active {
visibility: hidden;
--background: transparent;
--ion-background-color: transparent;
}

.barcode-scanning-modal {
visibility: visible;
}

https://github.com/media (prefers-color-scheme: dark) {
.barcode-scanning-modal {
--background: transparent;
--ion-background-color: transparent;
}

if i delete this code from your demo app, the screen shows exactly like mine does right now, but i have this code in my app in the same place. I can't see the camera view and in my opinion it has to do with the back ground not being transparent in the startScanner function, but idk where:

component:

@component({
selector: 'app-barcode-scanning',
template: `


{{message}}

<ion-button (click)="closeModal()">

<ion-content>
  <div #square class="square"></div>
  <ion-fab
    *ngIf="isTorchAvailable"
    slot="fixed"
    horizontal="end"
    vertical="bottom"
  >
    <ion-fab-button (click)="toggleTorch()">
      <ion-icon name="flashlight"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>
`,
styles: [
  `
    ion-content {
      --background: transparent;
      --background-color: transparent;
      --ion-background-color: transparent;
    }

    .square {
      --background: transparent;
      --background-color: transparent;
      --ion-background-color: transparent;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 16px;
      width: 200px;
      height: 200px;
      border: 6px solid white;
      box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.3);
    }
  `,
],
standalone: true,
imports: [IonicModule, CommonModule, FormsModule, ReactiveFormsModule]

})

[robingenz]

As I said, I can't help you without a minimal, reproducible example. I need to take a look at the code.

[Carlosvleon]

try to use the installGoogleBarcodeScannerModule() api, use a button to callit (sorry my poor inglish)