Camera Plugin not working (build error)

Ionic Framework ionic-v3
1

Hi guys,

According to the documentation here: http://ionicframework.com/docs/v2/native/Camera/
I was unable to make plugins work correctly. I tried to test Camera and Barcode Scanner and in both cases I encounter similar problem.
Error message:

./plugins/cordova-plugin-camera/www/Camera.js
Module not found: Error: Cannot resolve module 'cordova/argscheck' in /Users/yhnavein/puredev/test/test-app/plugins/cordova-plugin-camera/www
resolve module cordova/argscheck in /Users/yhnavein/puredev/test/test-app/plugins/cordova-plugin-camera/www
  looking for modules in app
    app/cordova doesn't exist (module as directory)
  looking for modules in /Users/yhnavein/puredev/test/test-app/node_modules
    /Users/yhnavein/puredev/test/test-app/node_modules/cordova doesn't exist (module as directory)
[app/cordova]
[/Users/yhnavein/puredev/test/test-app/node_modules/cordova]
 @ ./plugins/cordova-plugin-camera/www/Camera.js 22:16-44,./plugins/cordova-plugin-camera/www/Camera.js
Module not found: Error: Cannot resolve module 'cordova/exec' in /Users/yhnavein/puredev/test/test-app/plugins/cordova-plugin-camera/www
resolve module cordova/exec in /Users/yhnavein/puredev/test/test-app/plugins/cordova-plugin-camera/www
... etc ...

Probably I donā€™t have something installed / configured, but I have no knowledge about additional stuff to do, as I just wanted to try out the native functions in Ionic 2.

Plugin added by: ionic plugin add cordova-plugin-camera
My JS code:

import {Camera} from '../../../plugins/cordova-plugin-camera/www/Camera';
//...
export class HelloIonicPage {
	scanCode(event) {
		Camera.getPicture(options).then((imageData) => {
		  // imageData is either a base64 encoded string or a file URI
		  // If it's base64:
		  let base64Image = "data:image/jpeg;base64," + imageData;
		  console.log('Success');
		}, (err) => {
			console.error(err);
		});
	}
}

And ionic info:

Cordova CLI: 6.0.0
Gulp version:  CLI version 1.2.1
Gulp local:
Ionic Version: 2.0.0-beta.1
Ionic CLI Version: 2.0.0-beta.17
Ionic App Lib Version: 2.0.0-beta.8
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Mac OS X El Capitan
Node Version: v5.7.0
Xcode version: Not installed

What should I do to make it working?

Thanks,

2

You donā€™t need that Camera import, instead try navigator.camera (or something similar).

3

Hi @ZiFFeL,

How do you get the ā€œnavigator.cameraā€ shows up? In my editor (VS Code), when I start writing navigator and add a dot after, there is no camera showing up. It seems that I should see it, because you are not the only one talking about it.

Thanks

4

Is too late here, and Iā€™ll try tomorrow, just found this: https://github.com/driftyco/ionic-native

You should do something like:

npm install ionic-native --save

and fix the import to:

import {Camera} from 'ionic-native';

BTW, after installing the plugin you should be able to use it from navigator object, in my app I have the StatusBar and the Geoloaction plugins there, but I will test this tomorrow, I like the idea of having most used plugins together in one package.

1 Like
5

@icarus_31 after adding plugin, try to remove platforms and adding it back. Recently I face similar problem with cordova-plugin-bluetooth-serial from megster.

6

The reason you are seeing problems with your editor is that you donā€™t have typescript bindings for the javascript implementations of the plugins you are using. Your IDE is essentially unaware that there is anything on navigator.

To fix that, install the d.ts file for the plugin, or write your own.

You can use tsd to manage the published d.ts files for you if you donā€™t want to do it yourself.

7

Did you manage to get this working?

8

Yay!

Thatā€™s the fix for my issue and indeed it helped me get going with my app.

Thanks! :slightly_smiling:

9

Hiā€¦ How to retrive image from phone gallery sing native plugin?