white background

[FrancescoMussi]

I have tried out the plugin in Ionic 3.0.1 and is great!
A much needed one!

Just one thing.
It works great in a one page app .
But if I used it in a separate page of a 'multipage app' it does show a white background.

This is the css trick used globally for the one page app to avoid the white background:

html, body, ion-app, ion-content, ion-page, .nav-decor {
  background-color: transparent !important;
}

That obviously can't be used on a multipage app as otherwise every page has a transparent background.

I have tried every possible css combination to make it apply only on the desired page but I didn't manage.

Do you know how this can be achieved?

The strange part is that while testing the device it can be easily achieved by modifying the css in the console, but then it doesn't apply..
No idea why..

Thank you for your attention!
If you need further explanation please ask!

[ewilys]

Hi, I have the same problem I tried every combination of toBack and css but nothing works. Did you find a solution ? Thank you

[FrancescoMussi]

No solution found.
I also noticed that even on a one page app doesn't work.
It was working when I was testing it on a device with android run and the device plugged in - I could properly see the camera.
But when testing the actually .apk there was the white background instead of the camera.

No idea why...

[SVANNER]

Could you please share your code, so i can take a look ?
Tanks !

[SVANNER]

Hi,
I tested with the tabs template in Ionic 3.
Here is what happens when using the "toBack" option: The camera preview goes to back and is hidden by both the pages in the tabs and the tabs object.

Here is what i did to achieve the following result:

1. Paste the following code in the constructor of your "home.ts"

constructor(public navCtrl: NavController, private cameraPreview: CameraPreview, private platform: Platform) {
    this.platform.ready().then(() => {
      let options = {
        x: 0,
        y: 0,
        width: window.screen.width,
        height: window.screen.height,
        camera: this.cameraPreview.CAMERA_DIRECTION.BACK,
        toBack: true,
        tapPhoto: true,
        previewDrag: false
      };
      this.cameraPreview.startCamera(options).then(() => {

      })
    })
  }

2. At the bottom of the "src/theme/variables.scss" file, paste this:

$background-color: transprent;

3. If you want to get the other tabs of the app having a white background, pate the following in the "contact.scss" file and apply the same background setting for the "about.scss":

page-contact {
 background-color: #fff;
}

[ewilys]

thank you @SVANNER it works.

[awidschwendter]

@FrancescoMussi we had similar issues. in our case the problem was rebuilding the package with outdated cordova plugin camera preview from npm. removing it and adding it directly form git, solved the issue.

[clemishow]

@SVANNER Work for me too with the tabs template fo Ionic 3. Thank you !

[FrancescoMussi]

Thanks @SVANNER and sorry for late response.
I have update ionic-native and the camera-preview plugin.
I have tried your code and it works perfectly!

[asaxena48]

This solution seems to work only on Android device. On iOS device I am still getting only a black screen for camera preview when "toBack: true" is used.

Also camera preview does not adjust correctly to screen rotations on either iOS or Android. The preview window covers only half screen and even the live preview is incorrect on Android.

I am using the "@ionic-native/camera-preview": "^3.11.0" and
"cordovaPlatforms": [
"ios",
{
"platform": "ios",
"version": "4.3.0",
"locator": "ios"
}
]

[NicolasBehra]

Like said @SVANNER, it works like a charm, thanks a lot,
So to make it more comfortable, i did those steps:

1. variables.scss (at the end)

$background-color: transparent;

2. app.component.scss

ion-content:not(.background-color-transparent) {
  background-color: #fff !important;
}

3. in each html page where you need transparent background color

<ion-content class="background-color-transparent"></ion-content>

Now, it's a clean code. :)

[raviada]

@NicolasBehra, I have the same situation, I have a menu and a couple of pages deep, I need to add this functionality. I am simply pushing the page, and followed exactly what you suggested above. I still see white background. I added a button to take a picture, it is taking the picture that means camera preview started in this page constructor.

Where else I can look to see where the problem is. I really need this functionality in our app. I am kinda stuck right now.

Thanks
Ravi Ada

[NicolasBehra]

@raviada, the thing is, i think, with the toBack attribute of CameraPreviewOptions you can put the preview in the back or in the front.
But if you set it as back, you have to set every background-color to transparent, every push pages in your case. Just try, and tell me.
Hope it helped you :)

[raviada]

@NicolasBehra, I got the concept but I don't know which component is causing that white bg. I tried to manually set everything to transparent, still no success.

I tried their sample app, it works.

Ionic is doing something wonky here, causing this trouble. Have you got it working?

Thanks
RavAda

[raviada]

I changed the camera from 'rear' to 'front' just to see if there will be a change, still I see white BG.

[NicolasBehra]

@raviada, this camera-preview is kind of tricky. For me the big part was to put the background-color: transparent at the end of the variables.scss.
Mine is perfectly working...

[maximilianloy]

Didn't work for me on iOS 11 and Ionic 3.9.2 until I also set in app.scss:

.nav-decor {
  background-color: transparent !important;
}

[apuravchauhan]

If someone ran into this issue using Ionic 4, I had to add the following bare minimum in my page's scss file

page-home {
ion-content {
background-color: transparent !important;
}
}
ion-app,.nav-decor {
background-color: transparent !important;
}

[ricrps]

Ionic v4 solution: add this to the page's scss file:

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

[xuanranGit]

@ricrps @NicolasBehra
Thank you so much, the solution save me many time.
It works for me in Ionic v4.

[kanario03]

@ricrps @NicolasBehra
Thank you so much, the solution save me many time.
It works for me in Ionic v4.

Can you show me that code, i'm trying to make this work in ionic 4 for a week..

[khan8799]

@ricrps Thanks a lot bro, been trying to solve this from 2 days. Its working fine now

[maxfloden]

@westonganger please consider adding @ricrps solution for Ionic 4 (and 5) to the documentation / README.md

[Shuayd]

@ricrps @NicolasBehra @maxfloden
Hi am trying this on ionic 5 but getting no where. I am seeing a blank white screen on the page. I can see from the logs that the camera is active. In my case i am not using a tab page but a single page by navigating from one to the other. Could you tell me what I am doing wrong.
`import { Component, OnInit } from '@angular/core';
import { CameraPreview, CameraPreviewPictureOptions, CameraPreviewOptions, CameraPreviewDimensions } from '@ionic-native/camera-preview/ngx';
import { Platform } from '@ionic/angular';

@component({
selector: 'app-camera',
templateUrl: './camera.page.html',
styleUrls: ['./camera.page.scss'],
})
export class CameraPage implements OnInit {

text:any;

constructor(private cameraPreview: CameraPreview, private platform: Platform) {
this.platform.ready().then(()=>{
this.startCamera();
});
}

ngOnInit() {

}

startCamera()
{
const cameraPreviewOpts: CameraPreviewOptions = {
x: 0,
y: 0,
width: window.screen.width,
height: window.screen.height,
camera: this.cameraPreview.CAMERA_DIRECTION.FRONT,
tapPhoto: true,
previewDrag: false,
toBack: true
}
// start camera
this.cameraPreview.startCamera(cameraPreviewOpts).then(
(res) => {
this.text = res;
console.log(res)
},
(err) => {
this.text = err;
console.log(err)
});
}

}
`

HTML:
using ion-content

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

anyone can help :)