Camera work but overlay is hidden

[marwenhinnaoui]

getCamera(){
const cameraPreviewOptions: CameraPreviewOptions = {
className:'CameraPreview',
position: 'rear',
x:0,
y:0,
toBack:false,
};
CameraPreview.start(cameraPreviewOptions);
this.cameraActive=true;
}

My scss:
ion-content {
--background: transparent !important;
.CameraPreview{
width: 100%;
height: 10%;
ion-button{
position: absolute;
z-index: 20;
bottom: 0;
}
}
ion-button{
position: absolute;
z-index: 20;
}
}

[nseb]

you need toBack:true

[marwenhinnaoui]

i tried toBack:true but same issue the overlay is displayed and the camera work but i got white screen

[pbowyer]

Hi @marwenhinnaoui and welcome to camera-preview!

With toBack: true set you will need to play with background transparency in your Ionic app. Please see the block of code and paragraph of text just above https://github.com/capacitor-community/camera-preview#stop for some details.

I find it easiest to give every element in my app - <ion-page> <ion-content> and so on - a different background colour so I can see which is stopping me from viewing the camera.

Good luck!

[holcomc]

Hello, I am having this same problem. I set toBack: true, ion-content {--background: transparent!important}, as well as setting the <div> that hosts the camera to background: transparent. I also cloned the demo repo to see how it ran on my Galaxy S9, and it doesn't display the camera. I know the camera is running because I hear the shutter and can still take pictures, but I just can't see what the camera is looking at.

[marwenhinnaoui]

Hello!
check the variables.scss and remove https://github.com/media[](https://github.com/capacitor-community/assets/filter-1.png)[](https://github.com/capacitor-community/assets/filter-2.png)[](https://github.com/capacitor-community/assets/filter-3.png) (prefers-color-scheme: dark) content,
then add to your CameraPreviewOptions this block of code:
/*
x:0,
y:0,
width: window.screen.width,
height: window.screen.height,
parent:'cameraPreview',
className:'cameraPreview',
position: 'rear',
toBack:true
/
then check than in your html page that the parent is only the simple div like this and don't add background: transparent:
/

*/

hope this help this

[xsh2047]

There's a problem with the plugins implementation for Android.
It launches a fragment that can either be above or behind the app. This eliminates all use cases for elements presented within a second view above the main app view. e.g Showing within a modal.

[pbowyer]

@xsh2047 Is there an alternative way it can be implemented on Android?

[xsh2047]

I was looking into Ionic Portals. Not sure if this is a valid use case.

There's also the Web Media Capture API's but that wouldn't be a native solution.

[mwanginjamb]

Was anyone able to handle this issue on Ionic Angular App?

[evanlegamer]

No update on that ?

[morsagmon]

I'm having the same issue, but only when the app runs in dark mode. If I change the device theme to light - the camera preview shows.
However, it won't let me change it to light anymore - always runs on dark.
I also have:

ion-content {
  --background: transparent !important;
}

And when I change it in the inspector to red - the black cover does change its color to red, which tells me that the cover is coming from a lower level (OS?) for the dark theme, and not controllable in the app.

As a workaround, I'm OK with forcing a light theme in the app:

document.body.setAttribute('data-theme', 'light');
document.body.classList.toggle('dark', false);

But it doesn't seem to work. App is now running in Dark mode regardless of theme settings or the above settings.
I am experiencing this with two devices:

Xiaomi Rednote 8.
Samsung Galaxy A32.

Is there a way anybody can think of for me to force the light theme on all devices (android and iOS)?
This is an Angular 13 Ionic 6 app.

[MaxWeisen]

I was experiencing the white screen with toBack: true.

I am using Vue 3 with Ionic 6.1
Here is what I did to solve it:

<style>
  body { background: transparent; }
  ion-content { --background: transparent; }
</style>

*Notice <style> is not scoped

[hokimtam]

toBack: true is good solution. thanks.

[frederikheld]

There's a problem with the plugins implementation for Android. It launches a fragment that can either be above or behind the app. This eliminates all use cases for elements presented within a second view above the main app view. e.g Showing within a modal.

Same issue as @xsh2047 descibes it here. On Android, I can either use toBack: true to display the camera stream behind the WebView or toBack: false to display it on top of the WebView. It doesn't seem to adhere to the position of the parent component. In Desktop browsers I can use position: absolute; and z-index to display elements above the stream (e.g. a frame that helps the user to find the right camera position). This is not possible at all on Android.

Using toBack: true and then "cut out" the image from the whole app is not feasible as I'm using Vuetify as component framework and want to display the camera preview stream in an dialog overlay.

Is there any way to fix this broken behavior?

[haydncomley]

Just had this issue myself on Android - if you are in same situation I was (Camera starts, CameraPreview.capture() works correctly but the preview cant be seen / is a solid colour even when toBack: false) the solution is it double check your android/app/src/main/res/values/styles.xml - within AppTheme.NoActionBar make sure you don't have a background colour, this can be done with <item name="android:background">@null</item>.

If you have a background colour set within here the preview that shows the camera will be that solid colour rather than the camera feed. Hope this helps others!

[frederikheld]

Thanks for the hint, but it didn't fix the issue. The value is already set like you suggested. I also think that this doesn't exactly relate to my problem.

I'm using toBack: false, which - on desktop - puts the camera image in front of the app but still allows me to stack elements on top of it. I think that - on desktop - toBack is relative to the parent element that is defined in the CameraPreviewOptions.

On Android those stacked elements are rendered behind the preview, which leads me to believe, that toBack is relative to the whole app / WebView.

The Android behavior would be more in line with the documentation, but the desktop behavior is way more useful...

Other users commented that iOS behaves like desktop but I wasn't able to verify that yet.

[rajkris-frondesk]

Facing the same issue in android. Any solutions?

[fawadtariq]

Facing the same issue here with a Vue3-ts app plugged in to capacitorjs.

Web works absolutely fine, I tried multiple approaches all of which worked perfectly on web but the Android issue is persistent exactly as other comments.

toBack: false = CameraPreview renders on top of the app, hiding the whole app behind.
toBack: true = Hides the CameraPreview behind the app but still works (I get the image when I click capture, also my android device shows the active camera icon).

Was anyone able to solve this? I want a simple camerapreview with the shutter button as overlay.

Edit: if this is a known and persistent issue, then it means the captureSample method is now useless, because the only possible use case for it is to analyze what the camera is looking at and provide visual feedback to user, whether a document scan or a AR feature.

[morsagmon]

Hi @fawadtariq
This is my workaround for this:

Added the following to the global.scss file:

body.camera-active {
    --background: transparent;
    --ion-background-color: transparent;
  }

And I inject this class into the body of the DOM upon opening the camera:
document.querySelector('body').classList.add('camera-active');

Upon closing the camera, I remove this class:
document.querySelector('body').classList.remove('camera-active');