Camera Plugin: Property 'takePicture' does not exist on type 'Camera'


#1

i am getting errors on all the Camera methods for example:

Property ‘takePicture’ does not exist on type ‘Camera’.
Property ‘PictureSourceType’ does not exist on type ‘typeof Camera’.
Property ‘getPicture’ does not exist on type ‘typeof Camera’.

Any ideas?


Ionic-native Cannot find module "ionic-native"
#2

If you’re using the latest Ionic Native then Camera is now an injected class variable rather than a static class.

So, in your constructor you’ll have this (along with whatever else you have in here, of course)

constructor(camera: Camera) {
}

Then elsewhere you call the methods on this.camera, e.g.

takePictureClicked() {
   this.camera.takePicture();
}

#3

Yes, I have done that, here is my code, still getting the error…


import { Component } from '@angular/core';
import { NavController, ActionSheetController, ToastController, Platform, LoadingController, Loading } from 'ionic-angular';
import { Camera } from '@ionic-native/camera';



declare var cordova: any;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {
  lastImage: string = null;
  loading: Loading;

  constructor(public navCtrl: NavController, public actionSheetCtrl: ActionSheetController,private camera : Camera, public toastCtrl: ToastController, public platform: Platform, public loadingCtrl: LoadingController) {}

  public presentActionSheet() {
    let actionSheet = this.actionSheetCtrl.create({
      title: 'Select Image Source',
      buttons: [
        {
          text: 'Load from Library',
          handler: () => {
            this.camera.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
          }
        },
        {
          text: 'Use Camera',
          handler: () => {
            this.camera.takePicture(Camera.PictureSourceType.CAMERA);
          }
        },
        {
          text: 'Cancel',
          role: 'cancel'
        }
      ]
    });
    actionSheet.present();
  }

#4

What does your package.json look like?

(I mean, aside from a file obviously)


#5
{
  "name": "ionic-hello-world",
  "version": "0.0.0",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@ionic-native/camera": "^3.5.0",
    "@ionic-native/core": "^3.4.2",
    "@ionic-native/file": "^3.5.0",
    "@ionic-native/file-path": "^3.5.0",
    "@ionic-native/splash-screen": "3.4.2",
    "@ionic-native/status-bar": "3.4.2",
    "@ionic-native/transfer": "^3.5.0",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.0.1",
    "ionic-native": "^3.5.0",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.0",
    "typescript": "~2.2.1"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-statusbar",
    "cordova-plugin-console",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [
    "ios",
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    }
  ],
  "description": "TrueIdFace: An Ionic project"
}

#6

$5 says the error message has changed to “No provider for ‘Camera’”.


#7

I am also Getting same Error…

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';

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

  
  
  
 imageURL
  constructor(camera: Camera) {
}
  takePhoto(){
    this.camera.getPicture().then((imageData) => {
       this.imageURL = imageData
    }, (err) => {
       console.log(err);
    });
  }



}

(index):35 GET http://localhost:8100/build/main.css
(index):44 GET http://localhost:8100/build/polyfills.js
core.es5.js:354 Uncaught reflect-metadata shim is required when using class decorators
DecoratorFactory @ core.es5.js:354
(anonymous) @ about.ts:4
webpack_require @ bootstrap f4e2a5a…:19
(anonymous) @ home.ts:9
webpack_require @ bootstrap f4e2a5a…:19
(anonymous) @ platform-browser-dynamic.es5.js:170
webpack_require @ bootstrap f4e2a5a…:19
(anonymous) @ src async:7
webpack_require @ bootstrap f4e2a5a…:19
(anonymous) @ main.js:111836
webpack_require @ bootstrap f4e2a5a…:19
(anonymous) @ bootstrap f4e2a5a…:65
(anonymous) @ bootstrap f4e2a5a…:65
ion-dev.js?v=1.3.7:450 Uncaught TypeError: Cannot read property ‘replace’ of undefined
at Object.escapeHtml (ion-dev.js?v=1.3.7:450)
at Object.handleError (ion-dev.js?v=1.3.7:79)
at window.onerror (ion-dev.js?v=1.3.7:41)
escapeHtml @ ion-dev.js?v=1.3.7:450
handleError @ ion-dev.js?v=1.3.7:79
window.onerror @ ion-dev.js?v=1.3.7:41


#8

What makes you think this is “the same error”?


#9

I got the Error

Camera Plugin: Property ‘takePicture’ does not exist on type ‘Camera’

So I tried this solution and got above error

If you’re using the latest Ionic Native then Camera is now an injected class variable rather than a static class.

So, in your constructor you’ll have this (along with whatever else you have in here, of course)

constructor(camera: Camera) {
}
Then elsewhere you call the methods on this.camera, e.g.

takePictureClicked() {
this.camera.takePicture();
}


#10

But your error says “Cannot read property ‘replace’ of undefined”, which indicates that you are attempting to access a replace property of something that doesn’t have one.


#11

Issue has been resolved

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
//import { Camera } from 'ionic-native';
import { Camera, CameraOptions, CameraPopoverOptions } from '@ionic-native/camera';

@Component({
  selector: 'page-home',
   providers: [Camera],
  templateUrl: 'home.html'
})

export class HomePage {
	imageURL
  constructor(private camera:Camera, public navCtrl: NavController) {

  }

   options: CameraOptions = {
    quality: 100,
    destinationType: this.camera.DestinationType.DATA_URL,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE
  }

  popover: CameraPopoverOptions = {
    x: 20,
    y: 60,
    width: 200,
    height: 100,
    arrowDir: 1
  }


  takePhoto(){
    this.camera.getPicture(this.options).then((imageData) => {
       this.imageURL = 'data:image/jpeg;base64,' + imageData;
    }, (err) => {
       console.log(err);
    });
  }

}