Use Native Device Camera in Ionic 3 Application

In this tutorial, we will create an Ionic 3 application to demonstrate the usage of Native Camera feature with the help of Cordova and Ionic Native Plugins wrappers.

Before we start with application make sure that your system is having updated version of NodeJS installed.

Create a new Ionic 3 Application

Install latest version of Ionic and Cordova CLI.

Now we will create a new blank application

After application is created, go to the root using CD command

If your system is having Visual Studio code(VS Code) intalled, use  $ code .  command to open project in VS Code

Install the Cordova and Ionic Native plugins:

Add this plugin in application’s module file

In app.module.ts, import plugin and add in imports array.

Capture Image in Application

In home.html, add a button to capture an image

In HTML we have a button to start the camera and click an image, an image tag to show an image we just clicked.

Add Method in Home Component

Import Camera module then in constructor providers. We can add configuration options.

Available Options:

quality: it ranges from 0-100
sourceType: Source of an image can be PHOTOLIBRARY(0), CAMERA(1), SAVEDPHOTOALBUM(2)
encodingType: JPEG(0) or PNG(1)
saveToPhotoAlbum: Save the image to the photo album on the device after capture
cameraDirection: BACK(0) or FRONT(1)

You can check more options here

Leave a Reply

avatar
  Subscribe  
Notify of