CameraPreview Plugin is not installed

jumice · September 10, 2017, 7:56am

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.

i already removed ios and added it back, but didn’t worked.
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.

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?

Sujan12 · September 10, 2017, 9:08am

How are you calling the plugin?

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

jumice · September 10, 2017, 4:46pm

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?

Sujan12 · September 10, 2017, 4:48pm

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

jumice · September 10, 2017, 5:15pm

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

Sujan12 · September 10, 2017, 5:17pm

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.

jumice · September 10, 2017, 6:05pm

thanks for help! I think I solved this problem

Sujan12 · September 10, 2017, 6:22pm

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

juanpestana · June 8, 2018, 1:58am

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?

Topic		Replies	Views
Ionic 3: CameraPreview.startCamera returns plugin_not_installed ionic-v3	5	4350	May 30, 2018
Unable to use the camera plugin cordova-plugin-camera install issue Ionic Native	11	11302	July 19, 2021
Ionic 2 CameraPreview cordova plugin not in ionic-native ionic-v3	6	2622	October 29, 2016
Cordova-plugin-camera installed but xcode saying plugin is not installed Ionic Native	1	628	July 19, 2021
On iOS - Camera Plugin Not Installed:( (Android works fine) ionic-v3	3	1009	July 19, 2021

CameraPreview Plugin is not installed

Related topics