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

Question

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.
home.ts
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);
});
}
}
home.html:
<ion-content padding>
<ion-fab right bottom>
<button ion-fab color="primary" (click)="takePicture()">
<ion-icon name="md-camera"></ion-icon>
</button>
</ion-fab>
</ion-content>

Answer 1

Basically you need to "send" camera preview to back of the page and disable dragging option.
Try this:
const cameraPreviewOpts: CameraPreviewOptions = {
x: 40,
y: 40,
width: window.screen.width-1,
height: window.screen.height-1,
camera: 'rear',
tapPhoto: true,
previewDrag: false,
toBack: true,
alpha: 1
};
Your html code seems to be ok so your "fab" button should become visible.
If you want to use preview on whole screen- change width & height accordingly (remove -1) also,
x & y determine where your preview vindow will start, so set to 0 if you want to use it on whole screen.
Hope it helps!