CameraPreview Ionic Cordova 错误“plugin_not_installed”，但插件已安装 |角 8

Question

我正在制作一个需要获取照片并将其最后发送到服务器的应用程序。 因此，该应用程序是使用 Ionic 5 和 Angular 8 制作的。

我已经安装了这个插件CameraPreview，这是我的 PhotoComponent：

      constructor(
    private cameraPreview: CameraPreview
    ) { }

  takePhoto() {
    // camera options (Size and location). In the following example, the preview uses the rear camera and display the preview in the back of the webview
    const cameraPreviewOpts: CameraPreviewOptions = {
      x: 0,
      y: 0,
      width: window.screen.width,
      height: window.screen.height,
      camera: 'rear',
      tapPhoto: true,
      previewDrag: true,
      toBack: true,
      alpha: 1
    }

    // start camera
    this.cameraPreview.startCamera(cameraPreviewOpts).then(
      (res) => {
        console.log(res)
      },
      (err) => {
        console.log(err)
      });
    }

}

所以，这是我的 HTML 组件

...
<button mat-raised-button color="primary" (click)="takePhoto()">prendi la foto</button>
...

我已经安装了这样的相机预览插件：

ionic cordova plugin add cordova-plugin-camera-preview
npm install @ionic-native/camera-preview

运行 cordova plugin list 我看到了这个：

cordova-plugin-camera-preview 0.11.2 "cordova-plugin-camera-preview"

这是我在应用模块上提供的：

providers: [
    CameraPreview
    ]

但是，当我运行 ionic cordova run android 并运行方法 takePhoto()

我收到了这个错误：

我已经尝试卸载，删除android平台但没有..错误并没有消失

更新 我在平台上添加了检查，但 Chrome 金丝雀打印我：

Angular is running in the development mode. Call enableProdMode() to enable the production mode.
cordova.js:1233 deviceready has not fired after 5 seconds.
cordova.js:1226 Channel not fired: onCordovaInfoReady

也许是这个问题？

有什么解决办法吗？

谢谢

Answer 1

这个问题经常发生，因为平台还没有准备好。在调用任何插件之前，请考虑检查平台是否准备就绪：

import { Component, OnInit } from '@angular/core';

import { Platform } from '@ionic/angular';
import { CameraPreview, CameraPreviewOptions } from '@ionic-native/camera-preview/ngx'; // don't add ngx if you are on 'ionic-angular' mode

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent implements OnInit {
  constructor(
    private platform: Platform,
    private cameraPreview: CameraPreview
  ) {

  }

  ngOnInit() {
    this.platform.ready().then(_ => {
      this.takePhoto() // here the call of your function
    })
  }

  takePhoto() {
    const cameraPreviewOpts: CameraPreviewOptions = {
      x: 0,
      y: 0,
      width: window.screen.width,
      height: window.screen.height,
      camera: 'rear',
      tapPhoto: true,
      previewDrag: true,
      toBack: true,
      alpha: 1
    }

    // start camera
    this.cameraPreview.startCamera(cameraPreviewOpts).then(
      (res) => {
        console.log(res)
      },
      (err) => {
        console.log(err)
      });
  }
}