Cordova Camera - Ionic

Question

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

Answer 1

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

1. 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

2. 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>

Answer 2

You should make sure you include the ng-cordova.js file (from the ngCordova/dist/folder) before the cordova.js file in your html.

Answer 3

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

Answer 4

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;
    }
  }
}])

Answer 5

just try ionic run browser instead ionic serve