时间戳

首页 > 解决方案 > CameraPreview Ionic Cordova 错误“plugin_not_installed”，但插件已安装 | 角 8

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

问题描述

我正在制作一个需要获取照片并将其最后发送到服务器的应用程序。因此，该应用程序是使用 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

也许问题是这样的？

有什么解决办法吗？

谢谢

标签： androidangularcordovaionic-framework

解决方案

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

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

推荐阅读