How to use the Ionic Cordova plugin camera in Ionic 6?

Ionic Cordova plugin camera allows us to use a native camera to take a picture and allows us to choose images from the mobile device image library. With the release of ionic 4 and above, we can also use the Ionic capacitor camera plugin to achieve the same functionality as the ionic Cordova camera in  Progressive Native Web, Mobile, and Desktop applications. The Cordova camera plugin uses the native camera for taking pictures or getting images from the image gallery.

In this article, we’ll learn how to used the Ionic Cordova camera plugin to trigger the camera picture and get an image from a gallery of the phone. Our image is in Base64 or URI format.

Ionic Cordova camera example screenshot

If you are building an application only for a mobile device, then we can use the Ionic Cordova plugin camera plugin otherwise is recommended to use the capacitor camera plugin. We’ll demonstrate how to use the Ionic Cordova camera in the Ionic 5 project. We have two buttons in our example, one to take the photo using the device camera and the other is to load an existing picture from the device image library.

Screenshot of ionic Cordova camera example

Setting and configuring the Ionic project for ionic Camera Cordova

If you have not yet installed an Ionic CLI on your system. Then we need to install an Ionic CLI first. Ionic CLI allows us to create an Ionic project, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment. To install the Ionic CLI, open a terminal, and run the following command:

npm install -g @ionic/cli

With the release of ionic version 4, no longer limited to angular, we can create the ionic projects in different front-end frameworks like Angular, Vue, and React.  In this example, we’re using an Ionic angular project. Let’s create an Ionic angular project.

ionic start cordovaCameraApp

Once we execute the above command, it will allow us to select a framework and template. We have to select the Angular framework. The ionic framework already had lots of pre-made built-in templates. In our case, we are using a blank template.

Installing Ionic Cordova plugin camera

We must have the Node and NPM installed on your device, to get started with the Ionic 5 Camera tutorial. Let’s install the Ionic Cordova camera.

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

Ionic Cordova plugin camera supported many platforms and these include.

• Android
• Browser
• iOS
• Windows

We need to add the code below inside of the <platform name='ios> section for IOS platform.

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

Importing Ionic Cordova Camera Plugin in App Module

To use the Cordova camera in our ionic application, we need to import the Cordova camera class reference as a provider inside our app.module.ts file.

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';

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

What we will learn in the ionic Cordova plugin camera?

In this article on the Cordova camera plugin, we’re learning the following.

1. Access the Cordova camera plugin to trigger the camera picture and get the image back in the Base64 or URI format.
2. Parse the Base64 data or URI on an image tag DOM object.
3. Display the URI if it’s in the URI format.

Adding and using the Ionic Cordova camera plugin in component

Now we had finished the camera configuration in our application and now let’s start working on the Ionic camera. Our blank ionic angular page has a home component. Let’s first create two buttons in our home component template.

1. The button shows the camera for taking photos from the device camera
2. Button show an Album for taking images from the device image gallery.

Once we have an image, we are displaying it in our template using the image variable. Edit home.page.html templates.

<ion-header [translucent]="true">
  <ion-toolbar color="danger">
    <ion-title>
      Ionic 5 cordova camera
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <img [src]="image" *ngIf="image">
  <ion-grid>
    <ion-row class="ion-align-self-center">
      <ion-col size="6">
        <ion-button (click)="takePhoto(1)">Show Camera</ion-button>
      </ion-col>
      <ion-col size="6">
        <ion-button (click)="takePhoto(0)">Show Album</ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

We have an image tag with ngIf directive, whenever we have an image, we’re displaying it otherwise there is no image tag. In our takePhoto() method we have passed one argument, this argument indicates sourceType of the camera. Sourcetype 1 indicates taking an image from the camera and 0 indicates we want to use an image from our phone gallery. Using sourceType 0 or Zero will open a dialog popup instead of a camera and allow you to choose the image you want from the device.

Add the following code in home.page.ts, we have to import Camera and CameraOptions,  class as a dependency in our home.page.ts file

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 {
  image: string;

  constructor(private camera: Camera) { }

  async takePhoto(sourceType) {
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      sourceType
    };

    this.camera.getPicture(options).then((imageData) => {
      // imageData is either a base64 encoded string or a file URI
      // If it's base64 (DATA_URL):
      this.image = 'data:image/jpeg;base64,' + imageData;
    }, (err) => {
      // Handle error
      console.error(err);
    });
  }

}

We can have an image in base64 string or image file URI, in-camera option by specifying DestinationType as DATA_URL allows us to take an image in base64 string.  Cordova camera had a list of properties which is optional we can customize it to use it and here is the list of Ionic Cordova camera options we can use.

Adding Platform in our ionic camera project

Once we have completed our project, we need to test it on our real device. For that, we need to dd the target platform and in our case, we have tested in android 9. We can add the target platform by running the following commands based on your platform. Running the ionic Cordova camera application on a mobile device, for android follow these steps.

ionic cordova build android
ionic cordova run android
ionic cordova run android

Conclusion
In this article, we have explored details on how to use the Ionic Cordova camera in ionic angular applications. We used to take pictures from the camera or image gallery of the phone. I hope that this article was able to get you up and running with the Ionic Cordova camera.

Related Articles

• Ionic Capacitor camera example
• How to implement Ionic Barcode Scanner using Cordova?
• How to implement an Ionic QR code Scanner and generator?
• Complete guide on Ionic firebase image upload from camera or gallery