I've been looking up for a solution for up to almost 2 days.
I'm trying to use the ngCordova Camera plugin.
I'm using the ionic-yeoman framework with AngularJS.
What I did was:
bower install --save ngCordova.
Added ngCordova
to my app.module
.
Installed the cordova camera plugin:
cordova plugin add org.apache.cordova.camera.
My controller:
.controller('profileCtrl', function($scope, myService, $cordovaCamera)
{
$scope.takePicture = function() {
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
});
}
myService.getFoo().then(function(data) {
//this will execute when the
//AJAX call completes.
$scope.items = data;
});
})
And I get this error:ReferenceError: Camera is not defined
If you are serving your app through browser, whatever you use of cordova
regarding the usage of device, doesn't work. But, if you are having the problem even after serving your app in emulator or the device itself. Try the following steps.
Firstly, check the cordova plugin lists:
Go to project directory type: cordova plugin lists
see for cordova-plugin-media-capture
, cordova-plugin-camera
(if these are not in the list, you are simply missing your plugins).
Run the command
cordova plugin add cordova-plugin-media-capture
and cordova plugin add cordova-plugin-camera
If the plugins are there and you are still having the issue of camera is not defined
cordova plugin rm cordova-plugin-camera
cordova plugin rm cordova-plugin-media-capture
ionic platform rm android
ionic platform add android
cordova plugin add cordova-plugin-camera
cordova plugin add cordova-plugin-media-capture
Following must be present in your index.html
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
You should make sure you include the ng-cordova.js
file (from the ngCordova/dist/
folder) before the cordova.js
file in your html.
make sure you include ngCordova in the controller declaration as well. becoz i had kept my controllers and app.js files seperately and had not included ngCordova in angular.module('xx.controllers', ['ionic','ngCordova']). once i did it my problem was solved and i coul runn the app in genymotion
Just figured this out by analyzing the Ionic Camera example project. You did all of the setup correctly, but you still need to inject it into the controller, like so:
.controller('MyCtrl', function($scope, Camera) {
Note that there is not a dollar sign before Camera
. This really should be documented more explicitly.
Also, add this factory if you don't already have it:
.factory('Camera', ['$q', function($q) {
return {
getPicture: function(options) {
var q = $q.defer();
navigator.camera.getPicture(function(result) {
// Do any magic you need
q.resolve(result);
}, function(err) {
q.reject(err);
}, options);
return q.promise;
}
}
}])
just try ionic run browser instead ionic serve