CameraPreview is not working properly in Ionic 3 app.

I used tutorials to build a camera app. I want to show a camera preview inside of first ion-slide tag, then load ‘map’ in the second slide. and after taking the photo swipe to next slide. but camera preview is load in fullscreen and fab buttons didn’t show on camera preview. tapping sounds like taking the photo but also back button is not working.

ts

export class HomePage {
  public LatLng: any;
  public map: any;
  public picture;
  public shouldHide = false;
  localized: boolean = false;
  private cameraPreviewOpts = {
  x: 0,
  y: 0,
  width: window.screen.width,
  height: window.screen.height,
  camera: 'rear',
  toBack: false,
  tapPhoto: true,
  tapFocus: false,
  previewDrag: false
};

  @ViewChild('slides') slides: Slides;
  constructor(public navCtrl: NavController, public navParams: NavParams,
    public diagnostic: Diagnostic,
    private cameraPreview: CameraPreview

  ) {
    this.checkPermissions();
  }
  initializePreview() {
    this.cameraPreview.startCamera(this.cameraPreviewOpts).then(
      (res) => {
        console.log(res)
      },
      (err) => {
        console.log(err)
      });
  }

  checkPermissions() {
    this.diagnostic.isCameraAuthorized().then((authorized) => {
      if (authorized){
        this.initializePreview();}
      else {
        this.diagnostic.requestCameraAuthorization().then((status) => {
          if (status == this.diagnostic.permissionStatus.GRANTED)
            this.initializePreview();
          else {
            this.toastCtrl.show(
              'Cannot access camera',
              '5000',
              'bottom',
            ).subscribe(
              toast => {
                console.log(toast);
              }
            );
          }
        });
      }
    });
  }    
  takePhoto() {
    const pictureOpts: CameraPreviewPictureOptions = {
      width: 1280,
      height: 1280,
      quality: 85
    };
    this.cameraPreview.takePicture(pictureOpts).then((imageData) => {
      this.picture = 'data:image/jpeg;base64,' + imageData;
    }, (err) => {
      console.log(err);
      this.picture = 'assets/img/test.jpg';
    });    
  }    
  ionViewWillEnter() {
    this.slides.update();
    this.slides._allowSwipeToNext = false;
    this.slides._allowSwipeToPrev = false;
  }
  ngOnInit(): void {
    this.drawMap();
  } 
}

html

<ion-content no-bounce>
  <ion-slides #slides (ionSlideWillChange)="onSlideChangeStart($event)" pager dir="rtl">
    <ion-slide>
      <ion-fab right top>
        <button ion-fab color="secondary" (click)="changeEffect()">
          <ion-icon name="md-color-wand"></ion-icon>
        </button>
      </ion-fab>
      
      <ion-fab right bottom>
        <button ion-fab color="primary" (click)="takePhoto()">
          <ion-icon name="md-camera"></ion-icon>
        </button>
      </ion-fab>
  
    </ion-slide>
<h2> slide 2 </h2>
    </ion-slide>

output

[carlosedof]

The problem for me wasn’t z-index, that was my first attempt, but if the issue had something to do with z-index, it would not work on iOS either. But that behavior was only happening in android devices. It’s a bug at plugin code generated for android. The only way I found to solve this was to edit java file at plugin folder… I don’t remember where I read that solution, if I did, I would make reference here, but here’s what I’ve done:

plugins/cordova-plugin-camera-preview/src/android/CameraPreview.java

at line 286 replace that if content for this:

 if(toBack){
          webView.getView().setBackgroundColor(0x00000000);
          ((ViewGroup)webView.getView().getParent()).removeView(webView.getView());
          ((ViewGroup)containerView.getParent()).addView(webView.getView(), 0);
          ((ViewGroup)webView.getView()).bringToFront();

That solved the problem for me. Hope that works for you if someone is still stuck on this.

[westonganger]

A PR was recently merged which contained some fixes similar to this. https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview/pull/568

Please try using master branch with the latest changes