Проблема с плагином предварительного просмотра камеры (ionic 3): объект (...) не является функцией в CameraPreview.startCamera - PullRequest
1 голос
/ 05 июля 2019

Я занимаюсь разработкой приложения ionic 3, в котором мне нужно отобразить интерфейс камеры на экране приложения, и предварительный просмотр камеры, кажется, является правильным и единственным решением на данный момент.Однако, когда я запускаю функцию startCamera, я всегда получаю сообщение об ошибке «Объект (...) не является функцией в CameraPreview.startCamera».Любая помощь будет высоко ценится.

Вот шаги, которые я использовал для установки:

Из CLI:

ionic cordova plugin add https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git
npm install @ionic-native/camera-preview

2.Добавить в список поставщиков в модуле.ts file

import { CameraPreview } from '@ionic-native/camera-preview/ngx';
.....
providers: [  
    CameraPreview, ...
]

Ниже приведена страница, на которой я хотел бы использовать плагин:

   import { Component, NgZone } from '@angular/core';
    import { IonicPage, NavController, NavParams } from 'ionic-angular';
    import { CameraPreview, CameraPreviewPictureOptions, CameraPreviewOptions, CameraPreviewDimensions } from '@ionic-native/camera-preview/ngx';

@Component({
  selector: 'page-submitdata2',
  templateUrl: 'submitdata2.html',
})
export class Submitdata2Page {

  public getWidth: number;
  public getHeight: number;
  public calcWidth: number;
  cameraPreviewOpts: CameraPreviewOptions =
    {
      x: 40,
      y: 100,
      width: 220,
      height: 220,
      toBack: false,
      previewDrag: true,
      tapPhoto: true,
      camera: this.cameraPreview.CAMERA_DIRECTION.BACK
    }
  constructor(
    public cameraPreview: CameraPreview, private zone: NgZone,
    public navCtrl: NavController, public navParams: NavParams) {

    this.zone.run(() => {
      this.getWidth = window.innerWidth;

      this.getHeight = window.innerHeight;
    });
    console.log('width', this.getWidth);

    this.calcWidth = this.getWidth - 80; 

    console.log('calc width', this.calcWidth);
    }
  ionViewDidLoad() {
    console.log('ionViewDidLoad Submitdata2Page');
  }
  startCamera() {
    debugger
    this.cameraPreview.startCamera(this.cameraPreviewOpts).then(
      (res) => {
        console.log(res)
      },
      (err) => {
        console.log(err)
      });
  }


  stopCamera() {
    this.cameraPreview.stopCamera();
  }
  takePicture() {
    this.cameraPreview.takePicture()
      .then((imgData) => {
        (<HTMLInputElement>document.getElementById('previewPicture')).src = 'data:image/jpeg;base64,' + imgData;
      });
  }
  SwitchCamera() {
    this.cameraPreview.switchCamera();
  }
  showCamera() {
    this.cameraPreview.show();
  }
  hideCamera() {
    this.cameraPreview.hide();
  }
}
The HTML:

<ion-header>
    <ion-navbar>
        <ion-title>Preview Page</ion-title>
    </ion-navbar>
</ion-header>
<ion-content padding>

    <h5>This is camera Preview Application..</h5>

    <div class="displaybottom">
        <button ion-button (click)="startCamera()"> Start Camera</button>
        <button ion-button (click)="stopCamera()"> Stop Camera</button>

        <button ion-button (click)="takePicture()"> Take Picture Camera</button>

        <button ion-button (click)="SwitchCamera()"> Switch  Camera</button>

        <button ion-button (click)="showCamera()"> Show Camera</button>

        <button ion-button (click)="hideCamera()"> Hide Camera</button>
    </div>

    <div class="pictures">
        <p><img id="previewPicture" width="200" /></p>
        <!--<p><img id="originalPicture" width="200"/></p>-->
    </div>

</ion-content>

Моя среда разработки:

enter image description here

...