Ionic 7 Cordova Camera Plugin Tutorial with Example

To access Network, Sensors, GPS, File System, Storage and Camera in Native devices sometimes becomes a bit tedious.In this tutorial, we are going to create a basic camera app using Ionic/Angular. This allows a user to click a picture via a native camera device and returns the images in Base64 URL format.

Ionic Camera tutorial is going to be today’s main topic, In this tutorial, we will learn how to take pictures using Ionic Native & Cordova Camera plugin.

Creating a Hybrid app doesn’t take a lot of time. however, in most of the cases, we get stuck in building any feature which is directly related to hardware accessibility.

To access native device camera, we will use Ionic Native, Its a wrapper for Cordova plugins that offers easy and better integration with Angular.

Installing Cordova

You must have the Node and NPM installed in your device, to get started with Ionic Camera tutorial.

Run the following command to install Cordova to access the native device.

sudo npm install -g cordova

We will test our Ionic camera app on a real device. You must have Java SDK installed to build the camera app on Android.

If you are creating a camera app for iOS, then you must have an Xcode app installed on macOS.

Setting Up Ionic Camera App

Run the following command to create a brand new blank Ionic/Angular app.

ionic start ionic-cordova-camera-app blank --type=angular

Get into the project folder.

cd ionic-cordova-camera-app

Run the below command to add the native core package.

npm install @ionic-native/core --legacy-peer-deps

Disable Strict Type Errors

To avoid TypeScript compiling issues, we just need to open tsconfig.json file:

First, set below property under “compilerOptions” property.

"compilerOptions": {
    "strictPropertyInitialization": false,
    "skipLibCheck": true
    ...
}

Secondly, add given props under “angularCompilerOptions”.

"angularCompilerOptions": {
    "strictTemplates": false,
    ...
}

Install Ionic Cordova and Native Camera Plugin

Next, run the command to install Native camera plugin to access the camera features.

npm i cordova-plugin-camera --legacy-peer-deps

npm install @ionic-native/camera --legacy-peer-deps

<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

Ionic Supports Following Platforms

• iOS
• Android
• Windows
• Browser

Importing Camera Plugin in App Module

Now, we have installed and configured everything we required in our Ionic app.

Next, To use the camera plugin, we need to import the Cordova Camera plugin and also register in the providers array in 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';

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


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

export class AppModule {}

Using Camera Plugin in Ionic Component

Finally, we are going to use camera plugin in an Ionic home component. Navigate to home.page.html file and place the following code inside of it.

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

<img [src]="clickedImage" />

Navigate to home.page.ts file and add the following code inside of it.

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: any;

  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
    });
  }
}

Have a look what we did above using Cordova Camera plugin.

quality: We can set the image quality from 1 to 100, above we set the image size to 30 to control the image size.

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 we are setting in the variable to show the clicked image.

Add Platform in Ionic

Seldom, you may get below error: Refusing to run ionic cordova plugin inside a Capacitor project

You have to execute the given command before adding the platform in Ionic project.

ionic integrations disable capacitor

We can add the target platform by running the following commands based on your platform.

ionic cordova platform add ios

ionic cordova platform add android

Conclusion

Finally, we have completed the Ionic Cordova Camera Plugin Tutorial with Example.

In this tutorial, we learned how to use the Cordova camera plugin to capture the image in an Ionic app.

Ionic Native support is fantastic to access the native devices. I hope you liked this tutorial and share it with others.