Ionic 6 Cordova Camera Plugin Integration Tutorial

Ionic Angular native camera integration tutorial; Throughout this extensive guide, you will learn how to add a camera in an Ionic application with the help of Cordova and Ionic native camera plugin.

Additionally, we will show you how to get clicked images from the device camera in the Base64 url format.

The native device comes with tons of features, and the Ionic ecosystem empowers these features allowing us to build the impeccable application.

Ionic native helps us access the native device features; it is a wrapper for Capacitor not only but also for Cordova.

You also get immaculate plugin libraries to tackle any problem that falls into the native device features category. Also, you get Observable and Promise support which is better than the callbacks pattern for development purpose.

How to Add Camera in Ionic 6 Angular Application

  • Step 1: Create Ionic Project
  • Step 2: Install Camera Plugin
  • Step 3: Register Camera Module in AppModule
  • Step 4: Implement Camera Feature in Ionic
  • Step 5: Test App in Device

Create Ionic Project

Let us install the Ionic CLI, the go-to tool for Ionic app development:

npm install -g ionic@latest

Next, execute command to generate blank Ionic Angular application:

ionic start ionic-app blank --type=angular

Enter inside the application:

cd ionic-app

Remove Type Errors

You have to remove strict type errors make sure to set “strictTemplates”: false in angularCompilerOptions in tsconfig.json file.

Install Cordova Camera Plugin

In this step you will use following commands to add camera plugin into Ionic angular app.

# Install Cordova plugin
ionic cordova plugin add cordova-plugin-camera

# Install Ionic Native TypeScript wrapper
npm install @ionic-native/camera


# Install Ionic Native core library (once per project)
npm install @ionic-native/core

To deal with iOS 10 camera permission, insert the below code within the <platform name='ios> tags.

Update the code in config.xml file:

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

Add Camera Module in Main Module

Next, import the Camera module from the ‘@ionic-native/camera/ngx’ package, also add the Camera module into the providers’ array within the AppModule class.

Update 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 { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

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

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

export class AppModule {}

Implement Camera in Ionic

The camera options can be accessed via CameraOptions module, you can work upon quality, destination type, encoding type and media type.

Similarly, we have injected the camera module into the constructor, and because of which we can use the native camera to click the picture, you have to pass the cmera option as a parameter to getPicute() metod.

Update code in 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;

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

  constructor(private camera: Camera) { }

  clickImg() {
    this.camera.getPicture(this.cameraOptions).then((res) => {
      let base64 = 'data:image/jpeg;base64,' + res;
      this.image = base64;
    }, (error) => {
      alert(error);
    });
  }
}

Add code in home.page.html file:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Use Native Camera in Ionic Example
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  
  <img [src]="image" />

  <ion-button (click)="clickImg()">
    Click
 </ion-button>

</ion-content>

Test Camera App in Browser

In the last step, we will show you how to click an image from the native device. So, you have to add the device, create a runnable build and run the app on the simulator or actual device.

Execute command to add device:

# iOS
ionic cordova platform add ios

# Android
ionic cordova platform add android

# Windows
ionic cordova platform add windows

Use command to create the runnable build:

# iOS
ionic cordova build ios

# Android
ionic cordova build android

# Windows
ionic cordova build windows

Ultimately, run command to start the application:

# iOS
ionic cordova run ios -l

# Android
ionic cordova run android -l

# Windows
ionic cordova run windows -l

Conclusion

The Ionic native camera integration tutorial is done; in this tutorial, we ascertained how to add a camera feature in the Ionic Angular application using Cordova and Ionic native plugin.