10 Minutes with Ionic 2: Using the Camera with Ionic Native
In past posts in this series, we looked at some of the basics of creating an Ionic App, including a basic Hello World App, an app with pages and navigation, and finally an app that calls an API.
In this article, we will look at using Ionic Native to interface with the Cordova Camera plugin. We’ll use the native camera to take a picture and output that picture into our view.
Ionic Start
We’ll start by creating an app with the blank template using ionic start
.
ionic start cameraApp blank --v2 --ts
As described in the first post of this series, we now have some basic plumbing, including a home
page.
Setting up the Plugin
If you have not yet installed Cordova, you’ll need to do that before completing this tutorial. This may require adding sudo
before the command.
npm install -g cordova
After changing into our app directory (cd cameraApp
), you’ll want to add a platform for your app.
ionic platform add android
Add the camera
plugin.
ionic plugin add cordova-plugin-camera
Taking a Picture
In our home.ts file, we’ll need to import Camera
from ionic-native
.
import {Camera} from 'ionic-native';
Inside of our HomePage
class, we’ll want to create a property that will hold the base64 string of our picture.
import {Page} from 'ionic-angular';
import {Camera} from 'ionic-native';
@Page({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
public base64Image: string;
constructor() {}
}
Now, let’s add a method,’ takePicture
, which calls the Camera.getPicture
method. This method accepts an options
parameter and returns a promise that resolves when we get an image from the user. In our options array, we are specifying that we want our image to be a base64Image (destinationType
) and that we want it to be 1000
by 1000
pixels. In the resolved promise, we are receiving imageData
, which is our base64 image data.
import {Page} from 'ionic-angular';
import {Camera} from 'ionic-native';
@Page({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
public base64Image: string;
constructor() {
}
takePicture(){
Camera.getPicture({
destinationType: Camera.DestinationType.DATA_URL,
targetWidth: 1000,
targetHeight: 1000
}).then((imageData) => {
// imageData is a base64 encoded string
this.base64Image = "data:image/jpeg;base64," + imageData;
}, (err) => {
console.log(err);
});
}
}
UPDATE: A previous version of this post discussed using ngZone due to a bug in an earlier version of the framework. This is no longer required in the newest version of the framework.
Inside of our template, we’ll add a button that calls our takePicture
method and shows an image if we have image data in our base64Image
property.
<ion-navbar *navbar>
<ion-title>
Home
</ion-title>
</ion-navbar>
<ion-content class="home">
<ion-card>
<ion-card-content>
Hello World, this is my camera app
<button (click)="takePicture()">Take a Picture</button>
Latest Picture:
<img [src]="base64Image" *ngIf="base64Image" />
</ion-card-content>
</ion-card>
</ion-content>
Ionic Upload
In previous parts of this series, we would normally run ionic serve
here. However, in this case, because we’re working with Cordova plugins, we will need to run it on a device. ionic upload
allows us to view and rapidly develop the app in the Ionic View app.
Before we run this, let’s make sure that inside our gulpfile
, we’re running the build
task before we upload. I added this task in the Ionic hooks
section.
gulp.task('serve:before', ['watch']);
gulp.task('emulate:before', ['build']);
gulp.task('deploy:before', ['build']);
gulp.task('build:before', ['build']);
gulp.task('upload:before', ['build']); //Build before we upload
Now, we can build and upload our app to ionic.io:
ionic upload
Now, we can go into Ionic View, Sync To Latest, and View our App.
Once in our app, we can take a picture of a cute kitten and an awesome sticker by pressing the “Take a Picture” button.
And our awesome picture will be outputted to our view:
Conclusion
In under ten minutes, we have integrated a common native feature into our app with a relatively small amount of code. The combination of Ionic Native and Ionic View is a killer partnership for rapid prototyping, developing, and ultimately creating top-of-the-line mobile apps.