CameraPreview Plugin is not installed

Ionic Native
1

Hi, I’m using Ionic-native plugin, camera preview. But when i test the app in my iPhone, it says

Native : tried calling CameraPreview.startCamera, but the CameraPreview plugin is not installed.
Install the CameraPreview plugin : ‘ionic cordova plugin add cordova-plugin-camera-preview’

but in my package.json, there is the plugin
it’s my package.json

{
    "name": "righthere",
    "version": "0.0.1",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/common": "4.1.3",
        "@angular/compiler": "4.1.3",
        "@angular/compiler-cli": "4.1.3",
        "@angular/core": "4.1.3",
        "@angular/forms": "4.1.3",
        "@angular/http": "4.1.3",
        "@angular/platform-browser": "4.1.3",
        "@angular/platform-browser-dynamic": "4.1.3",
        "@ionic-native/camera-preview": "^4.2.1",
        "@ionic-native/core": "3.12.1",
        "@ionic-native/splash-screen": "3.12.1",
        "@ionic-native/status-bar": "3.12.1",
        "@ionic/storage": "2.0.1",
        "cordova-android": "^6.2.3",
        "cordova-browser": "^4.1.0",
        "cordova-ios": "^4.4.0",
        "cordova-plugin-camera-preview": "git+https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git",
        "cordova-plugin-console": "^1.0.7",
        "cordova-plugin-device": "^1.1.6",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.3",
        "cordova-plugin-whitelist": "^1.3.2",
        "ionic-angular": "3.5.3",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "rxjs": "5.4.0",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.12"
    },
    "devDependencies": {
        "@ionic/app-scripts": "2.0.2",
        "@ionic/cli-plugin-cordova": "1.4.1",
        "@ionic/cli-plugin-ionic-angular": "1.3.2",
        "ionic": "3.6.0",
        "typescript": "2.3.4"
    },
    "description": "An Ionic project",
    "cordova": {
        "plugins": {
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {},
            "cordova-plugin-camera-preview": {}
        },
        "platforms": [
            "android",
            "browser",
            "ios"
        ]
    }
}

i tried some ways to fix it.

  1. i already removed ios and added it back, but didn’t worked.

  2. i deleted plugins and package-lock.json and readded but didn’t worked. my command was

rm -rf node_modules platforms plugins package-lock.json

and then npm install , and readded ios platform.

  1. I typed
ionic plugin rm --save cordova-plugin-camera-preview
ionic plugin add --save https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview

but it didn’t work

i can’t figure out what’s the problem.

my info is

cli packages:

@ionic/cli-utils  : 1.6.0 
ionic (Ionic CLI) : 3.6.0

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts              : 2.0.2
@ionic/cli-plugin-cordova       : 1.4.1
@ionic/cli-plugin-ionic-angular : 1.3.2
Cordova Platforms               : android 6.2.3 ios 4.4.0
Ionic Framework                 : ionic-angular 3.5.3

System:

Node       : v8.1.3
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b 
ios-deploy : 1.9.2 
npm        : 5.4.1

is there anything i can do?

2

How are you calling the plugin?

This is pretty old and should be updated (but is not the reason for your problems)

3

oh thanks. I will update it right now.
but i’m new to ionic, i don’t understand ‘calling the plugin’. can you tell me more about it?

4

What is the code that executes the plugin and uses some of its functionality.

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

@Component({
  selector: 'page-camera',
  templateUrl: 'camera.html',
})


export class CameraPage {


  constructor(public navCtrl: NavController, public navParams: NavParams, private cameraPreview: CameraPreview) {

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

    this.cameraPreview.startCamera(cameraPreviewOpts).then(
      (res) => {
        console.log(res)
      },
      (err) => {
        console.log("error")
        console.log(err)
      });
  }

this is my code. It’s not finished. this is my first time using ionic native, so I put few code and tested whether it works.
but i got the problem that “CameraPreview plugin is not installed” even though it’s in my package.json

6

You have to wrap all calls to the plugin (this.cameraPreview in your code) in platform.ready so the plugin is actually loaded when you call it. See app.component.ts for an example.

3 Likes
7

thanks for help! I think I solved this problem :slight_smile:

8

Please select the post that contains the interesting information as “This reply solves this question” so future readers can also benefit. Thanks.

9

Hey @Sujan12, this didn’t work for me. I wrapped the code like this

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { CameraPreview, CameraPreviewOptions } from '@ionic-native/camera-preview';
import { Platform } from 'ionic-angular';

/**
 * Generated class for the ProcesamientoPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

declare var cv;
@Component({
  selector: 'page-procesamiento',
  templateUrl: 'procesamiento.html',
})
export class ProcesamientoPage {
  canvas: any;
  picture: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, private cameraPreview: CameraPreview, private platform: Platform) {
    
      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
      };
    
    platform.ready().then(() => {
      // start camera
      console.log("Starting camera");
      this.cameraPreview.startCamera(cameraPreviewOpts).then(
        (res) => {
          console.log(res)
        },
        (err) => {
          console.log(err)
      });
    });
  }

But I’m still getting the following in my console:
Native: tried calling CameraPreview.startCamera, but the CameraPreview plugin is not installed.

Is there something wrong?