0

In my Ionic app, I have a modal view. I want its background to be a CameraPreview block but it's not working when I set the toBack property to true.

Here are my cameraOptions:

public cameraPreviewOpts: CameraPreviewOptions = {
 x: 0,
 y: 0,
 width: window.screen.width,
 height: 300,
 camera: 'rear',
 tapPhoto: true,
 previewDrag: false,
 toBack: true,
 alpha: 1
};

When I set toBack to false, the cameraPreview works fine but I want to access my navbar and some buttons above the preview, so I need to find what doesn't work here.

I'll be happy to provide you with more info if needed. Thanks!

Valentin Richard
  • 19
  • 1
  • 7

2 Answers2

0

Are you sure it is not hidden behind another HTML element?

have you tried setting the background-color?

html, body, .ion-app, .ion-content { background-color: transparent; }

Christiaan Kreeftmeijer
  • 133
  • 1
  • 11
0

Add this to page's constructor where you're using the camera.

document.body.style.backgroundColor = "transparent !important"

I was using a dark/light theme mode in my variables.scss and everywhere I tried to applying the

html, body, .ion-app, .ion-content {
  background-color: transparent;
}

or

<ion-content [fullscreen]="true" [ngClass]="{'custom-ion-content': true}"> 

.custom-ion-content {   
   --background-color: transparent !important;   
}

simply didn't work. This solved it for me.

bad legend
  • 1
  • 1