Camera preview takePicture function not working Ionic? - ionic-framework

Question

I am trying to get the takePicture function to work and get the imageData, but no luck so far. I have tried the new Beta plugin Camera Preview, but that will not start the camera at all.
I have the plugin com.mbppower.camerapreview and npm install --save #ionic-native/camera-preview.
I just need to get the imageData from the takePicture, but don't know how?
This is the code:
import { Component, NgZone } from '#angular/core';
import { NavController, ToastController } from 'ionic-angular';
import firebase from 'firebase';
import { CameraPreview, CameraPreviewRect } from 'ionic-native';
import { Diagnostic } from 'ionic-native';
import { File } from 'ionic-native';
import { AlertProvider } from '../../providers/alertprovider';
import { ImageProvider } from '../../providers/imageprovider';
declare var cordova: any; // global variable for paths
#Component({
selector: 'page-upload',
templateUrl: 'upload.html'
})
export class UploadPage {
public user: any;
constructor(private nav: NavController, private zone:NgZone, private
cameraPreview: CameraPreview, public diagnostic: Diagnostic, public
toastCtrl: ToastController,
public imageProvider: ImageProvider, public alertProvider: AlertProvider){
}
ionViewDidEnter(){
this.checkPermissions();
}
ionViewWillLeave() {
CameraPreview.stopCamera();
}
checkPermissions() {
Diagnostic.isCameraAuthorized().then((authorized) => {
if(authorized)
this.initializePreview();
else {
Diagnostic.requestCameraAuthorization().then((status) => {
if(status == Diagnostic.permissionStatus.GRANTED)
this.initializePreview();
else {
// Permissions not granted
// Therefore, create and present toast
this.toastCtrl.create(
{
message: "Cannot access camera",
position: "bottom",
duration: 5000
}
).present();
}
});
}
});
}
initializePreview() {
// Make the width and height of the preview equal
// to the width and height of the app's window
let previewRect: CameraPreviewRect = {
x: 0,
y: 57,
width: window.innerWidth,
height: window.innerHeight/2
};
// More code goes here
// Start preview
CameraPreview.startCamera(
previewRect,
'rear',
true,
true,
false,
1
);
CameraPreview.setOnPictureTakenHandler().subscribe((imageData) => {
// Process the returned imageURI.
let imgBlob = this.imageProvider.imgURItoBlob("data:image/jpeg;base64," + imageData);
let metadata = {
'contentType': imgBlob.type
};
firebase.storage().ref().child('images/' + this.user.userId + '/cards' + '/' + this.imageProvider.generateFilename()).put(imgBlob, metadata).then((snapshot) => {
// URL of the uploaded image!
let url = snapshot.metadata.downloadURLs[0];
}).catch((error) => {
this.alertProvider.showErrorMessage('image/error-image-upload');
});
});
}
takePicture() {
CameraPreview.takePicture({maxWidth: 1280, maxHeight: 1280});
}
}
Cordova CLI: 6.5.0
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.10.0
Xcode version: Not installed

Answer 1

Instead of this
// More code goes here
// Start preview
CameraPreview.startCamera(
previewRect,
'rear',
true,
true,
false,
1
)
use this make toBack false it will bring camera preview to the front.
// More code goes here
// Start preview
CameraPreview.startCamera(
previewRect,
'rear',
false,
true,
false,
1
)
if that does not solve your problem remove that camera plugin and use this latest one
ionic plugin add https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git
this has new fixes which are not available on npm yet.