Camera preview takePicture function not working?

Ionic Framework ionic-v3
1

Hi,

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 { AngularFire, FirebaseListObservable } from 'angularfire2';
import firebase from 'firebase';
import { CameraPreview, CameraPreviewRect } from 'ionic-native';
import { Diagnostic } from 'ionic-native';
import { File } from 'ionic-native';

//import { SharePage } from '../share/share';
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(){
        //CameraPreview.show();        
        this.checkPermissions();
    }

    ionViewWillLeave() {
        //CameraPreview.hide();
        CameraPreview.stopCamera();
    }

    checkPermissions() {
    // More code goes here
        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});

    }

    changeEffect() {
        // Create an array with 5 effects
        let effects: any = ['none', 'negative','mono', 'aqua', 'sepia'];

        let randomEffect: string = effects[Math.floor(
                                    Math.random() * effects.length)];
        CameraPreview.setColorEffect(randomEffect);
    }


}

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