How to fix preview Window and fab buttons of camera-preview?

Ionic Framework ionic-v3
1

I am using fallowing code:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { CameraPreview, CameraPreviewOptions, CameraPreviewPictureOptions } from '@ionic-native/camera-preview';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, private cameraPreview: CameraPreview) {
startCamera()
  }

  startCamera() {
    const cameraPreviewOpts: CameraPreviewOptions = {
      x: 40,
      y: 40,
      width: window.screen.width-1,
      height: window.screen.height-1,
      camera: 'rear',
      tapPhoto: true,
      previewDrag: true,
      toBack: false,
      alpha: 1
    };

    this.cameraPreview.startCamera(cameraPreviewOpts).then(
      (res) => {
        // alert('message');
        console.log(res);
      },
      (err) => {
        // alert('Failed');
        console.log(err);
    });
  }

  showCamera(){
    this.cameraPreview.show();
  }

  stopCamera(){
    this.cameraPreview.stopCamera();
  }

takePicture(){
    const pictureOpts: CameraPreviewPictureOptions = {
      width: 1280,
      height: 1280,
      quality: 85
    }

    this.cameraPreview.takePicture(pictureOpts).then(function(imgData){
      console.log('Picture taken');
      (<HTMLInputElement>document.getElementById('previewPicture')).src = 'data:image/jpeg;base64,' + imgData;
    }, (err) => {
      console.log(err);
    });
  }
}

html:

<ion-content padding>
<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)="takePicture()">
    <ion-icon name="md-camera"></ion-icon>
  </button>
</ion-fab>
</ion-content>

but preview window is not fixed and also fab buttons are in behinde of preview window.

2

If you want UI to be in front of preview image of camera you have to set “toBack” to true:

toBack - Defaults to false - Set to true if you want your html in front of your preview

Also… did you have this in your scss file?

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

3

I am using the following code to make a camera-based app. But the preview window is not fixed and easily bud dragging over the screen it replaces. Also fab buttons are in behind of preview window. How is possible to fix them over each other on the screen.

constructor(public navCtrl: NavController, private cameraPreview: CameraPreview) {
this.startCamera();
}
startCamera() {
const cameraPreviewOpts: CameraPreviewOptions = {
x: 40,
y: 40,
width: window.screen.width-1,
height: window.screen.height-1,
camera: ‘rear’,
tapPhoto: true,
previewDrag: true,
toBack: false,
alpha: 1
};

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

}

showCamera(){
this.cameraPreview.show();
}

stopCamera(){
this.cameraPreview.stopCamera();
}

takePicture(){
const pictureOpts: CameraPreviewPictureOptions = {
width: 1280,
height: 1280,
quality: 85
}

this.cameraPreview.takePicture(pictureOpts).then(function(imgData){
  console.log('Picture taken');
  (<HTMLInputElement>document.getElementById('previewPicture')).src = 'data:image/jpeg;base64,' + imgData;
}, (err) => {
  console.log(err);
});

}
}