Ionic 4 | Use Camera using Ionic Native plugin in Ionic 4 Latest version |

Ionic 4 Application to use Camera and get pictures returning images as Base64 URL to show user Image taken.

Hybrid applications are very quick to build but sometimes it becomes challenging to achieve some features which involve access to hardware like GPS, Network, Storage, File Storage, Camera. Cordova comes in charge to provide plugins to make a connection with java libraries to use them.

We have already discussed How to access the camera in Ionic’s version 3, in this article we will use Camera feature in Ionic application with latest version 4 using Cordova and Ionic Native

Let’s start…

Create a new Ionic 4 Application

We will create an application using the latest version of Ionic CLI v5.0.3

Make sure you have installed the latest version by running following npm command

$ npm install -g ionic@latest

1	$ npm install -g ionic@latest

After updating the Ionic CLI run following command to create a new Ionic 4 application with a blank template.

$ ionic start Ionic4Camera blank

1	$ ionic start Ionic4Camera blank

Install Cordova and Native Camera Plugin

Next, run following Cordova and Ionic Native commands to install camera plugin to access camera features.

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

1 2	$ ionic cordova plugin add cordova-plugin-camera $ npm install @ionic-native/camera

For IOS: Add following configuration in config.xml inside of the <platform name='ios> section as IOS 10 asks for camera permission.

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

<config-file parent="NSCameraUsageDescription" platform="ios" target="*-Info.plist">

<string>You can take photos</string>

</config-file>

Import Camera Plugin in App Module

To use camera plugin in the application we will import it then add in the providers array.

Navigate to app.module.ts file then replace below code in it.

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

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

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

@NgModule({

declarations: [AppComponent],

entryComponents: [],

imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],

providers: [

StatusBar,

SplashScreen,

Camera,

{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }

bootstrap: [AppComponent]

})

export class AppModule { }

we are done with configuration.

Use the Camera in Home Component

In the blank template we already have home component, add a button in home.page.html file to open the camera by calling takeSnap() method in (click) event handler

  <ion-button (click)="takeSnap()">
    Take Snap
  </ion-button>

  <img [src]="capturedSnapURL" />

<ion-button (click)="takeSnap()">

Take Snap

</ion-button>

<img> tag will show the Image clicked using the camera.

Now open the home.page.ts file, then replace the following code in it.

//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
      
      let base64Image = 'data:image/jpeg;base64,' + imageData;
      this.capturedSnapURL = base64Image;
    }, (err) => {
      
      console.log(err);
      // Handle error
    });
  }


}

//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

let base64Image = 'data:image/jpeg;base64,' + imageData;

this.capturedSnapURL = base64Image;

}, (err) => {

console.log(err);

// Handle error

});

}

Here we have imported for Camera & CameraOptions to control features.

Add Camera in the class constructor

CameraOptions have parameters which are very important to control how images are handles clicked using the camera.

quality: can be from 1-100, due larger image size app becomes unstable so 20 is ok for reasonable image quality

destinationType: it can be FILE_URI (.jpg file path) or DATA_URI (base64)

encodingType: Image file type is returned in JPEG or PNG

mediaType: Used to get ALLMEDIA(Pictures or Videos), PICTURE or VIDEO

takeSnap() method calls getPicture which returns promise to get data url or base64 url based on the option provided in destinationType.

Conclusion: Cordova plugin with ionic Native wrapper makes it very handy to use camera feature in an Ionic application. It solves the basic function when the quality parameter is small otherwise it can do app crashes due to limited device memory of webviews which we use in hybrid apps. But its better than nothing 🙂

193

Create a new Ionic 4 Application

Install Cordova and Native Camera Plugin

Import Camera Plugin in App Module

Use the Camera in Home Component

Leave a Reply Cancel reply