Hi,
I am trying to get my first basic app working with the ionic framework and ngCordova.To get the camera working in my Ionic app, I have followed the instructions in the ngCordova documentation and taken the following steps:
- Installing ngCordova with bower
- Including ngCordova.js in a script tag before ngCordova.js
- Installing the necessary plugins with
cordova plugin add org.apache.cordova.camera
I have the example code from the docs included in my main controller:
var options = {
quality : 75,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.CAMERA,
allowEdit : true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 100,
targetHeight: 100,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
};
$cordovaCamera.getPicture(options).then(function(imageData) {
// Success! Image data is here
}, function(err) {
// An error occured. Show a message to the user
});
I then add android as a platform using ionic platform add android
, then run the app on my phone using ionic run
while my LG G2 phone is connected via USB. The problem is, it doesn’t work. I get the following error:
ReferenceError: Camera is not defined
at new <anonymous> (file:///android_asset/www/js/app.js:36:45)
at invoke (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:11591:17)
at Object.instantiate (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:11602:23)
at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:14906:28
at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:14295:34
at forEach (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:7957:20)
at nodeLinkFn (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:14282:11)
at compositeLinkFn (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:13730:13)
at compositeLinkFn (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:13733:13)
at publicLinkFn (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:13626:30)
To figure out whether it was something wrong with ngCordova as a whole, or just specifically the camera function, I also tried to get the flashlight working by the same steps and using the flashlight example code:
var isAvailable = $cordovaFlashlight.available()
$cordovaFlashlight.switchOn() .then( function (success) { /* success / }, function (error) { / error */ });
When I try to run this, I get a similar error.
TypeError: Cannot read property 'flashlight' of undefined
at Object.available (file:///android_asset/www/lib/ngCordova/dist/ng-cordova.js:1243:23)
at new <anonymous> (file:///android_asset/www/js/app.js:36:42)
at invoke (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:11591:17)
at Object.instantiate (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:11602:23)
at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:14906:28
at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:14295:34
at forEach (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:7957:20)
at nodeLinkFn (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:14282:11)
at compositeLinkFn (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:13730:13)
at compositeLinkFn (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:13733:13)
Does anyone know what could be going on? I feel like I have followed the steps outlined in the documentation correctly.
(As a sanity check, I tried logging the value of window.cordova to check that it is actually there. It is, but interestingly, the cordova.plugins property is an object that only contains the property “Keyboard”. I would have expected it to also have some sort of reference to a Camera and Flashlight too. Perhaps this has something to do with the problem?)