Now, we've put everything we needed into our Ionic app and set it up. 

Next, we need to import the Cordova Camera plugin and 

register in the app.module.ts 

file's providers array to use the camera plugin.

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, Camera,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})

export class AppModule { }

So next next is to use camera plugin in our Ionic/Angular home component.

Go to home.page.html file and open it. Then replace the file code with the below one.

Last, an Ionic home component will use a camera plugin.

Copy and paste the code below into the home.page.html file.

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

<img [src]="imgURL" />

Go to the home.page.ts file and paste the code below into 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 {
imgURL: string;

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 string | base64 or file URI
// If it's base64 (DATA_URL):
const base64Image = 'data:image/jpeg;base64,' + imageData;
this.imgURL = base64Image;
}, (err) => {
console.log(err);
// Handle error
});
}
}

Look at what we did above with the help of the Cordova Camera plugin in Our Ionic/Angular application.

Quality: We can set the image quality between 1 to 100. 

In the above example, we set the image size to 30, and this will control the 

image size.

destinationType: Choose how the value will be returned.

encodingType: This is the type of Image file (JPEG or PNG).

mediaType is used to find out the type of media.

It can mean either "Picture" or "Video."

This method calls the getPicture() method. It takes the camera options as a

parameter and returns the data that we set in a variable to show the clicked

image.

Let's test our camera functionality in Ionic/Angular app


To deploy Ionic/Angular project following command can be used:

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

Please note that you can only test the camera plugin on the device itself. 

You can't use the browser to try it out.

Run the following command to make an app to test on your phone:

ionic cordova build android --aot --prod

What is the difference between the native plugins for Ionic 4 and Ionic 5?


The camera plugin works the same way in Ionic 4 and 5 as in Ionic 3. 

But the only difference is how the libraries are brought in. At the end of the import,

you need to add /ngx. Let's use the import command for Ionic 3 as an example.

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

It is the Ionic 4 import command.

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

The import path for Angular should end with /ngx.

Conclusion

We finally added the Native Camera feature to our Ionic 4/5 Angular app by adding the Cordova and Native plugins. Also, we talked about the different methods used in the Camera class. We hope this tutorial was helpful. Think about giving to others. Thanks for stopping by! Message me in the comments if you have any questions.