カメラのプレビューtakePicture関数が動作しないIonic？

Question

takePicture関数を動作させてimageDataを取得しようとしていますが、これまでのところ運がありません。私は新しいBeta Plugin Camera Previewを試しましたが、それはカメラをまったく起動しません。

私は、プラグインcom.mbppower.camerapreviewとnpm install --save @ ionic-native/camera-previewを持っています。

takePictureからimageDataを取得するだけですが、その仕組みはわかりません。

これはコードです：

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}); 

} 


} 

コルドバCLI：6.5.0

イオンFrameworkのバージョン：3.0.1

イオンCLIバージョン：2.2.3

イオンのApp Libバージョン：2.2.1

イオンアプリケーションスクリプトバージョン：1.3.0

IOS-デプロイバージョン：インストールされていない

OS：Windowsの10

ノードバージョン：v6.10.0

Xcodeのバージョン：インストールされていない

IOS-SIMバージョン

をインストールしていません

Answer 1

これは遅れていますが、これは誰かが同じ問題を探している人を助けるかもしれません。

this.profilePhotoOptions = { 
     quality: 50, 
     targetWidth: 384, 
     targetHeight: 384, 
     destinationType: this.camera.DestinationType.DATA_URL, 
     encodingType: this.camera.EncodingType.JPEG, 
     correctOrientation: true 
    }; 

//私はので、私はtoBackがfalseにするこれを使用する代わりに、この

// More code goes here 
// Start preview 
CameraPreview.startCamera(
    previewRect, 
    'rear', 
    true, 
    true, 
    false, 
    1 
) 

のfirebaseストレージ

imgURItoBlob(dataURI) { 
    var binary = atob(dataURI.split(',')[1]); 
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; 
    var array = []; 
    for (var i = 0; i < binary.length; i++) { 
     array.push(binary.charCodeAt(i)); 
    } 
    return new Blob([new Uint8Array(array)], { 
     type: mimeString 
    }); 
    } 

//その後、

this.camera.getPicture(this.profilePhotoOptions).then((imageData) => { 
     // Process the returned imageURI. 
     let imgBlob = this.imgURItoBlob("data:image/jpeg;base64," + imageData); 
     let metadata = { 
     'contentType': imgBlob.type 
     }; 
//then upload or do what ever you want with your SEXEY photo 
    } 

Answer 2

にアップロードできるためにこれを使用しますカメラのプレビューが前面に表示されます。

// More code goes here 
// Start preview 
CameraPreview.startCamera(
    previewRect, 
    'rear', 
    false, 
    true, 
    false, 
    1 
) 

それはあなたの問題は、そのカメラのプラグインを削除し、これはまだNPMでは使用できません新しい修正プログラムがあり、この最新の1

ionic plugin add https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git 

使用し解決していない場合。