Using cordova-camera plugin in your Ionic 2 Apps

Hi friends,

Hope you are all well. Now this post deals with using the cordova-camera plugin in your Ionic 2 apps to take photos using your smartphone camera. As with my previous posts I will try to keep this as much simple as possible.

The complete code of this tutorial can be found here.

A screencast of this tutorial is available below

 

Create an Ionic 2 application using the below command.

Let’s get started. Once you have created the Ionic 2 application; install the camera plugin using the below command.

Now once the plugin is installed, open up the app in an editor of your choice, navigate to app -> pages -> home and in the home.html file add the below code in between the <ion-content> tags.

Now this will add a button which upon clicking would trigger a takepic function and a card that holds an image.

If you with to use ionic-native to access camera, please skip the below steps and read the update at the end of this post.

Lets wire this up to the takepic function. Open up home.js and add the below code.

Let’s break this down.

  1. NgZone is used to execute services outside of angular and then get back in using run(). Read more about it here.
  2. Options specify the options considered while taking/saving the picture.
  3. navigator.camera is global when you install the plugin and can be used anywhere in the app.
  4. The image is captured and stored in the form of base64 encoding and then placed in this.image which is then used in the src attribute in the img tag.

Now this code is enough to use camera in our app. To execute this in your android phone please add the android platform using the below command.

and then run the app (on your mobile or emulator) using the below command.

This is a very simple way to use the smartphone camera in our app for taking pictures using the cordova camera plugin in our Ionic 2 apps.

Hope this helped you guys. Peace.. :)

Update:

The same could be done using ionic-native a new successor to ngCordova from driftyco. Once you install the plugin install ionic-native using the below command

Now modify the home.js as shown below:

Things to notice:

  1. We use numbers now to denote sourceType, destinationType and encodingType.
  2. Camera.getPicture returns a promise which is then resolved.

I have made a repo on this updated code and this is available here.

Thanks.

  • David Lazarev

    thanks , good tutorial ,but i’ve got an error

    • Paca-vaca

      Probably you should try using ionic-native instead – https://github.com/driftyco/ionic-native

      • Thanks for the suggestion bro, I checked it out and added an update.. :)

    • After adding the plugin please open the package.json file and check whether this line exists bro.

      “cordovaPlugins”: [

      “cordova-plugin-camera”

      ],

      • David Lazarev

        Thanks for quick reply ,yes this line exists and i still got an error

        • Okay, Please try using ionic-native bro. I have added an update to the post and a github link as well. (If you still face the same issue, let me know).. :)

          • David Lazarev

            Great ! it works thanks bro!!

            Have you any tutorial that you explain how to upload image from gallery ?

          • Well, I can make one.. Will post it soon.. :)

  • Kosala Mudalige

    hi…how to get image from gallery?

    • Well, did you try chaning the sourceType bro.. ? Try this code.. (After installing ionic-native as shown in the update, please check the post).

      var options = {
      sourceType: 0
      };
      Camera.getPicture(options).then((data) => {
      //Your desired actions
      });

      (0 stands for photolibrary, 1 stands for camera and 2 denotes savedphotoalbum).

      • Kosala Mudalige

        Hi …Thanks for the reply..i tried this but not any luck.the i get some code from https://github.com/marcusasplund/ionic2-camera-demo/

        this code works for me

        this.platform.ready().then(() => {
        let options = {
        quality: 80,
        destinationType: Camera.DestinationType.DATA_URL,
        sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
        allowEdit: false,
        encodingType: Camera.EncodingType.JPEG,
        saveToPhotoAlbum: false
        };
        // https://github.com/apache/cordova-plugin-camera#module_camera.getPicture
        navigator.camera.getPicture(
        (data) => {
        let imagedata = “data:image/jpeg;base64,” + data;

        }, (error) => {
        alert(error);
        }, options
        );
        });

        • Cool, thanks for sharing it here bro. It would be a great help to others who read this. Have a nice day.. :)

  • Thanks for your article. I’ve also wrote some articles about ionic 2 camera
    Access Gallery: https://phonegappro.com/ionic2-tutorial/access-photo-gallery-using-ionic-2/
    Access Camera: https://phonegappro.com/ionic2-tutorial/access-camera-using-ionic-2/

  • Riccardo Proietti

    How i can skip the popup confirmation, after taking the photo?