Ionic Camera

In this section, we are going to see an example to access the native device camera based on Angular.

To access or integrate the native device features, you need a Cordova plugin. The Ionic Native acts as a wrapper for the Cordova plugin that provides integration with Angular and TypeScript.

The Ionic native camera plugin allows us to take a picture by using the device camera. Let us see step by step to learn how you can access the camera to take a photo in Ionic.

Step 1: Create a new project. You can learn how to create a project in Ionic 4 from here. You can skip this step if you already had an Ionic project.

Step 2: Next, navigate to the project and install the following camera plugin using the below command.

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

Step 3: Import the camera plugin in the app.module.ts file and also include the plugin in the providers as below.

App.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { Camera } from '@ionic-native/camera/ngx';
import { WebView } from '@ionic-native/ionic-webview/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    Camera,
    WebView,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 4: Open the home.page.ts file and import the camera plugin, then create an object reference by using the constructor. Now, create a function for capturing the photo. The following code snippet gives you a detailed explanation.

Home.page.ts

import { Component } from '@angular/core';
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  capturedSnapURL: string;

  cameraOptions: CameraOptions = {
    quality: 20,
    destinationType: this.camera.DestinationType.DATA_URL,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE
  };

  constructor(private camera: Camera) {}

  takeSnap() {
    this.camera.getPicture(this.cameraOptions).then((imageData) => {
      // this.camera.DestinationType.FILE_URI gives file URI saved in local
      // this.camera.DestinationType.DATA_URL gives base64 URI

      const base64Image = 'data:image/jpeg;base64,' + imageData;
      this.capturedSnapURL = base64Image;
    }, (err) => {

      console.log(err);
      // Handle error
    });
  }
}

Step 5: After creating a function, open the home.page.html file. In this file, you need to create a button and click event to use the function defined in the home.page.ts file.

Home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>Ionic Camera</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    <ion-button (click)="takeSnap()">
      Click Image
    </ion-button>
    <img [src]="capturedSnapURL" />
  </div>
</ion-content>

Step 6: Now, you need to add the target platform to deploy the app. You can use your phone to run and test the app. For this, you need to install the following command.

$ ionic cordova platform add android
$ ionic cordova run android --aot

If you want to test your app in the browser, run the below command.

You will get the output, click the button, the device camera will be open. Now you can take a photo or picture.

Camera Option

There are several options available that can be used with the camera. These options are given in the following table.

Parameter	Type	Description
quality Number	It	is used to set the quality of the image in the range of 0-100.
destinationType	Number	It is used to choose the format of the image.
sourceType	Number	It is used to set the source of the image.
encodingType	Number	It is used to choose the encoding type of the image. The value zero will set JPEG, and value one will set the PNG image format.
allowEdit	Boolean	It is used for allowing editing of the image before selection.
targetHeight	Number	It is used for scaling image width in pixels.
targetWidth	Number	It is used for scaling image width in pixels.
cameraDirection	Number	It is used to set the camera to use front or back facing.
popoverOptions	String	IOS-only options that specify popover location on iPad.
mediaType	String	It is used to set the media type.
correctOrientation	Boolean	It is used for correcting the orientation of the device during capturing.
saveToPhotoAlbum	Boolean	It is used for saving images to photo album on the device.