Use Native Device Camera in Ionic 3 Application

In this tutorial, we will create an Ionic 3 application to demonstrate the usage of Native Camera feature with the help of Cordova and Ionic Native Plugins wrappers.

Check: Ionic 4 Camera Tutorial Example

Before we start with application make sure that your system is having updated version of NodeJS installed.

Create a new Ionic 3 Application

Install latest version of Ionic and Cordova CLI.

$ npm install -g ionic cordova

Now we will create a new blank application

$ ionic start Ionic3CameraDemo blank

After application is created, go to the root using CD command

$ cd Ionic3CameraDemo

If your system is having Visual Studio code(VS Code) intalled, use $ code .  command to open project in VS Code

Install the Cordova and Ionic Native plugins:

$ ionic cordova plugin add cordova-plugin-camera
$ npm install --save @ionic-native/camera

Add this plugin in application’s module file

In app.module.ts, import plugin and add in imports array.

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { Camera } from '@ionic-native/camera';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

  declarations: [
  imports: [
  bootstrap: [IonicApp],
  entryComponents: [
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler}
export class AppModule {}

Capture Image in Application

In home.html, add a button to capture an image

      Ionic Blank

<ion-content padding>
  <h1>Use Camera in Ionic App</h1>

  <button ion-button (click)="clickImage()">Capture Image</button>
  <img src="{{clickedImagePath}}" />


In HTML we have a button to start the camera and click an image, an image tag to show an image we just clicked.

Add Method in Home Component

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { Camera, CameraOptions } from '@ionic-native/camera';

  selector: 'page-home',
  templateUrl: 'home.html'
export class HomePage {
  options: CameraOptions = {
    quality: 100,

    public navCtrl: NavController, 
    private camera: Camera
    ) {


  clickImage(){ => {
      // imageData is either a base64 encoded string or a file URI
      // If it's base64 (DATA_URL):
      let base64Image = 'data:image/jpeg;base64,' + imageData;
      this.clickedImagePath = 'data:image/jpeg;base64,' + imageData;
     }, (err) => {
      // Handle error


Import Camera module then in constructor providers. We can add configuration options.

Available Options:

quality: it ranges from 0-100
sourceType: Source of an image can be PHOTOLIBRARY(0), CAMERA(1), SAVEDPHOTOALBUM(2)
encodingType: JPEG(0) or PNG(1)
saveToPhotoAlbum: Save the image to the photo album on the device after capture
cameraDirection: BACK(0) or FRONT(1)

You can check more options here

About The Author

3 thoughts on “Use Native Device Camera in Ionic 3 Application”

  1. after select the picture in the gallery,it doesn’t appear in the app .
    what am i supposed to do ( i am using ionic 3

Leave a Comment

Your email address will not be published. Required fields are marked *