14

I have an Ionic project where I need the Cordova Camera plugin (which I now installed successfully). But in my project the Camera API is still not available, i.e. I get error thrown:

ReferenceError: Camera is not defined
at Scope.$scope.takePic 

How do I active the plugin API(s) to be used in an Ionic project? Documentation about this seems to be rather nonexistant or very well hidden.

7 Answers 7

28

Follow these steps:

1. Include ngCordova before cordova.js

You can found the same description in the docs.

<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>

2. Add your plugin on the command line

You can find this step in the docs in the section of your specific plugin.

ionic plugin add org.apache.cordova.camera

3. Remember that cordova is not available while working in the browser

So when using the $cordovaCamera.getPicture the library is calling internally navigator.camera.getPicture which is not available when developing in the desktop browser. Further reading

The ngCordova / Ionic team is currently working on mocks you can use to avoid problems like that.


You can download ngCordova here: http://ngcordova.com/docs/install/


Update: There is Ionic Native now, it's like ngCordova but for ES6 and TypeScript.

5
  • Im following the docs for ngCordova and testing on a real device. I get the same error. Im pretty sure $cordovaCamera is injecting correctly since I can print out $cordovaCamera in the console, BUT the problem Im having is Camera is undefined so you can't use the convenience constants such as Camera.DestinationType.DATA_URL in camera options.
    – Eno
    Nov 20, 2014 at 21:28
  • I have the same error here. Did you solve this problem? Jan 3, 2015 at 11:21
  • I have this error now $cordovaCamera.getPicture is not a function. Your solution did not work. Problem is: my camera function worked before, I have commented/deleted all my code I wrote after the camera function and it is still broken.. Tested on emulator, chrome linked to Android, and ionic lab
    – nclsvh
    Dec 18, 2015 at 14:07
  • I have lot of work on camera. we cannot solve the issue.My Suggestion is to create new project and firstly add the camera plugin and then other plugns Jan 4, 2017 at 11:11
  • ng-Cordova has to be downloaded here ngcordova.com/docs/install Aug 13, 2017 at 6:58
6

Open a terminal in your app's root directory and add the plugin via

cordova plugin add org.apache.cordova.camera

Edit:
the new command is:

cordova plugin rm cordova-plugin-camera //remove
cordova plugin add cordova-plugin-camera //add
1
  • 2
    This did not work for me. I still get the Camera is not defined error.
    – Chad
    Mar 13, 2015 at 14:28
4

I'm trying to figure out how to use standard Cordova plugins with Ionic myself, but the ionic team just recently built ngCordova--an angular wrapper for common cordova APIs, which includes the Camera api you want to use. Would suggest using that: see their docs for more info.

2

Go to the project directory.

Run this command:

$ ionic integrations enable cordova --quiet

(Hope this helps others.)

1
  • This command is for adding cordova to an existing ionic project. In other words, to integrate cordova in an existing ionic project.
    – RS. Utsha
    Feb 24, 2019 at 14:19
1

This is a common issue when testing on a browser: http://ngcordova.com/docs/common-issues/

0

You need to inject Camera 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, you will need to add a factory to your services.js:

.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;
    }
  }
}])
4
  • Do you really need the factory? Can you not just add it to the controller for the view that uses it? Apr 29, 2015 at 11:50
  • Perhaps not, but I recall trying many different things and finally stumbling upon the factory, which was the first thing that worked for me. So, you may not need the factory, but I know it works with it.
    – Chad
    Apr 29, 2015 at 15:24
  • I get "navigator not defined" when trying to build for ios
    – Lotus
    Jun 5, 2015 at 23:38
  • @Lotus I do not have a mac so I have not tried building this for iOS yet. But I do know that this code has worked with the Ionic Viewer on my iPhone.
    – Chad
    Jun 7, 2015 at 19:11
0

You can install the plugin by run :

$ cordova plugin add org.apache.cordova.camera

Now that you have the plugin installed, you can use the camera API from your Javascript:

function takePicture() {
  navigator.camera.getPicture(function(imageURI) {

    // imageURI is the URL of the image that we can use for
    // an <img> element or backgroundImage.

  }, function(err) {

    // Ruh-roh, something bad happened

  }, cameraOptions);
}

This will prompt the user to take a photo, and will return the local URL of the image that you can then use inside of an tag or use for a CSS background image.

You can use the code below for a simple wrapper over the Camera plugin that makes it easy to asynchronously grab photos:

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

This factory can be used in your controllers like this:

.controller('MyCtrl', function($scope, Camera) {

  $scope.getPhoto = function() {
    Camera.getPicture().then(function(imageURI) {
      console.log(imageURI);
    }, function(err) {
      console.err(err);
    });
  };

Which will open the Camera when getPhoto() is called (from a button click, for example).

Depending on how you request the data back from the Camera and use it in your Angular markup, you may have to whitelist image URLs so Angular allows file:// URLs (for example, if you are using ng-src for an tag):

module.config(function($compileProvider){
  $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
})

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.