Ionic 5 camera tutorial using cordova camera plugin

Creating a Hybrid mobile app doesn’t take a lot of time. In most of the cases, we get stuck in building any feature which is directly related to hardware accessibility like GPS, File System, Storage and Camera.

In this tutorial, we are going to create a basic camera app using Ionic/Angular

1.Create new Ionic app

ionic start

2.Choose the framework as angular

3.Every Great application needs a name so, give what you prefer. Mine is ionic camera

4.Then select the template. I like to go with blank

5. Then required to install cordova and native camera plugin

5.1. Cordova camera plugin

ionic cordova plugin add cordova-plugin-camera

5.2. . Native camera plugin

npm install @ionic-native/camera

6. Since ios 10 the camera requires permissions to be placed in your config.xml (ios only)

<config-file parent=”NSCameraUsageDescription” platform=”ios” target=”*-Info.plist”>
<string>You can take photos</string>
</config-file>

Add the above code inside of the <platform name='ios> section

7.Importing Camera Plugin in App Module

Import the Cordova Camera plugin and also register in the providers array in

app.module.ts file.

import { Camera } from '@ionic-native/camera/ngx';
providers: [
    Camera,//add camera here
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],

8. Use Camera plugin in Home Component

8.1. Navigate to app/home/home.page.html

<ion-header [translucent]="true">
<ion-toolbar>
<ion-title> Camera </ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-button (click)="captureImage()">
   Click Picture
</ion-button>
<img [src]="clickedImage" />
</ion-content>

9. Go to 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 {
  clickedImage: string;
  options: CameraOptions = {
    quality: 30,
    destinationType: this.camera.DestinationType.DATA_URL,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE
  }
  constructor(private camera: Camera) { }
  captureImage() {
    this.camera.getPicture(this.options).then((imageData) => {
      // 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.clickedImage = base64Image;
    }, (err) => {
      console.log(err);
      // Handle error
    });
  }
}

Brief explain of above code

quality: We can set the image quality from 1 to 100, above image size set to 30 to control the image size. Due larger image becomes unstable so 30 is ok for reasonable image quality.

destinationType: Choose the format of the return value.

encodingType: Refers to the Image file type (JPEG or PNG).

mediaType: Used to get media type, refers to either Picture or Video.

captureImage(): This method triggers the getPicture() method, It takes the camera options in the parameter and return the data which setting in the variable to show the clicked image.

10 Final Results

asking permission