Using cordova-camera plugin in your Ionic 2 Apps

http://tphangout.com/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.

ionic start cameraapp blank --v2

1	ionic start cameraapp blank --v2

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

1	ionic plugin add cordova-plugin-camera --save

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.

<button (click)="takepic()">Click</button>
  <ion-card>
      <img [src]="image">
  </ion-card>

<button (click)="takepic()">Click</button>

<ion-card>

</ion-card>

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.

import {Page} from 'ionic-angular';
import {NgZone} from 'angular2/core';


@Page({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
    static get parameters(){
        return [NgZone];
    }
    
    constructor(ngzone) {
        this.zone = ngzone;
        this.image = null;
    }
    
    takepic() {
        var options = {
            destinationType: Camera.DestinationType.DATA_URL,
            sourceType: Camera.PictureSourceType.CAMERA,
            encodingType: Camera.EncodingType.JPEG,
            quality:100,
            allowEdit: false,
            saveToPhotoAlbum: false
        };
        
        navigator.camera.getPicture((data) => {
            var imgdata = "data:image/jpeg;base64," + data;
            this.zone.run(() => this.image = imgdata);
        }, (error) => {
            alert(error);
        }, options);
    }
}

import {Page} from 'ionic-angular';

import {NgZone} from 'angular2/core';

@Page({

templateUrl: 'build/pages/home/home.html'

})

export class HomePage {

static get parameters(){

return [NgZone];

}

constructor(ngzone) {

this.zone = ngzone;

this.image = null;

}

takepic() {

var options = {

destinationType: Camera.DestinationType.DATA_URL,

sourceType: Camera.PictureSourceType.CAMERA,

encodingType: Camera.EncodingType.JPEG,

quality:100,

allowEdit: false,

saveToPhotoAlbum: false

};

navigator.camera.getPicture((data) => {

var imgdata = "data:image/jpeg;base64," + data;

this.zone.run(() => this.image = imgdata);

}, (error) => {

alert(error);

}, options);

}

Let’s break this down.

NgZone is used to execute services outside of angular and then get back in using run(). Read more about it here.
Options specify the options considered while taking/saving the picture.
navigator.camera is global when you install the plugin and can be used anywhere in the app.
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.

ionic platform add android

1	ionic platform add android

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

ionic run android

1	ionic run android

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

npm install ionic-native --save

1	npm install ionic-native --save

Now modify the home.js as shown below:

import {Page} from 'ionic-angular';
import {NgZone} from 'angular2/core';
import {Camera} from 'ionic-native';


@Page({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
    static get parameters(){
        return [NgZone];
    }
    
    constructor(ngzone) {
        this.zone = ngzone;
        this.image = null;
    }
    
    takepic() {
        var options = {
            destinationType: 0,
            sourceType: 1,
            encodingType: 0,
            quality:100,
            allowEdit: false,
            saveToPhotoAlbum: false
        };
        
        Camera.getPicture(options).then((data) => {
            var imgdata = "data:image/jpeg;base64," + data;
            this.zone.run(() => this.image = imgdata);
        }, (error) => {
            alert(error);
        });
    }
}

import {Page} from 'ionic-angular';

import {NgZone} from 'angular2/core';

import {Camera} from 'ionic-native';

@Page({

templateUrl: 'build/pages/home/home.html'

})

export class HomePage {

static get parameters(){

return [NgZone];

}

constructor(ngzone) {

this.zone = ngzone;

this.image = null;

}

takepic() {

var options = {

destinationType: 0,

sourceType: 1,

encodingType: 0,

quality:100,

allowEdit: false,

saveToPhotoAlbum: false

};

Camera.getPicture(options).then((data) => {

var imgdata = "data:image/jpeg;base64," + data;

this.zone.run(() => this.image = imgdata);

}, (error) => {

alert(error);

});

}

Things to notice:

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

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

Thanks.

Follow me