How to add native camera in ionic 4

This Ionic 4 tutorial is written for beginners also. So we can go step by step. And you can easily create this camera app.

Step1:

Create a new Ionic 4 project. 

ionic start myapp blank

Skip this step, if you already had Ionic 4 project.

Step2:

Install the camera plugin using the below command.

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

Step3:

Import the plugin to the app.module.ts file and include the plugin in the providers.

import { Camera, CameraOptions } from '@ionic-native/camera/ngx';

Step4:
 
Import the camera plugin to home.ts file and create an object reference using the constructor.

import { Camera, CameraOptions } from '@ionic-native/camera/ngx';


export class HomePage {

constructor(private camera: Camera){}

}

Step5.

Create a function to capture the photo.

image:any=''
  openCam(){

    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }
    
    this.camera.getPicture(options).then((imageData) => {
     // imageData is either a base64 encoded string or a file URI
     // If it's base64 (DATA_URL):
     //alert(imageData)
     this.image=(<any>window).Ionic.WebView.convertFileSrc(imageData);
    }, (err) => {
     // Handle error
     alert("error "+JSON.stringify(err))
    });

  }

Step6. 

Create a button on the home.html file and add the click event to this function.

<ion-button (click)="openCam()" >Open Camera</ion-button>
<img src="{{image}}">

Step7.

Deploy the app to your phone and test it. 

ionic cordova platform add android
ionic cordova run android --aot

Please note, the camera plugin can be previewed using the device only. You can not test it using the browser.

Difference between Ionic 4 and Ionic 3 Native Plugins?.
Camera plugin in Ionic 4 works the same as in Ionic 3. However, the only difference is importing the libraries. You have to add /ngx at the end of the import. Say, for example, the import command for Ionic 3

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

The import command for Ionic 4.

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

For Angular, the import path should end with /ngx.

This tutorial focuses only on Angular Ionic.

The above changes are applicable for all the other native plugins. So try to add /ngx.

Tested Device:

Moto G4 Plus