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>
