Ionic 5 Camera Native Plugin Tutorial

In this article, we will learn How to use Native Camera of the device in Ionic 5 Angular application using Native plugin and Cordova wrappers to access device features.

The Native Camera plugin allows an application to click photos or get them from the phone’s own gallery. There are also a number of configuration options available to select the quality of clicked snap, the format of Image clicked, default Camera selection from Front or Back, etc. We will discuss them further.

Let’s start!

Version Check

@ionic/cli Version 6.1.0 Latest

Run following NPM command to check Ionic CLI version:

Update to the latest version:

 

Create an Ionic 5 Angular Application

To create a new Ionic 5 application, you can run $ ionic start which will as further configuration options.

Or run following command with name, template, and framework like Angular or React provided in --type  option:

After successfully creating, just move to the application’s root by running

To open the app in Visual Studio Code IDE, run . code  command

 

Install Camera Plugin

To use Camera we need to install the Cordova plugin and Native wrapper for Ionic. Run following commands one by one at project’s root

Update App Module

To use Camera feature in application pages, we need to import Camera class to app.module.ts then add in the providers array:

Using Camera Feature

Now we are done with the installation and configuration of Native Camera plugin in the application, next to use it in a page add a button to click photo and an img element to show a clicked photo

In the component class, import the Camera class and CameraOptions interface to configure the options available.

The Camera class provides getPicture() method which takes options object as configurations to return a promise.

Options available in the CameraOptions interface:

quality: Picture quality in range 0-100. Default is 50.

destinationType: Choose the format of the return value.
DATA_URL: 0, Return image as base64-encoded string (DATA_URL can be very memory intensive and cause app crashes or out of memory errors. Use FILE_URI or NATIVE_URI if possible),
FILE_URI: 1, Return image file URI,
NATIVE_URI: 2 Return image native URI
(e.g., assets-library:// on iOS or content:// on Android)

sourceType: Set the source of the picture.
Set the source of the picture.
Defined in Camera.PictureSourceType. Default is CAMERA.
PHOTOLIBRARY: 0,
CAMERA: 1,
SAVEDPHOTOALBUM: 2

allowEdit: Allow simple editing of image before selection.

encodingType: Choose the returned image file’s encoding.
Choose the returned image file’s encoding.
Defined in Camera.EncodingType. Default is JPEG
JPE: 0 Return JPEG encoded image
PNG: 1 Return PNG encoded image

targetWidth: Width in pixels to scale image. Must be used with targetHeight.

targetHeight: Height in pixels to scale image. Must be used with targetWidth.

mediaType: Set the type of media to select from. Only works when PictureSourceType is PHOTOLIBRARY or SAVEDPHOTOALBUM. Defined in Camera.MediaType
PICTURE: 0 allow selection of still pictures only. DEFAULT.
Will return format specified via DestinationType
VIDEO: 1 allow selection of video only, WILL ALWAYS RETURN FILE_URI
ALLMEDIA : 2 allow selection from all media types

cameraDirection: Choose the camera to use (front- or back-facing).
Defined in Camera.Direction. Default is BACK.
BACK: 0
FRONT: 1

 

Leave a comment

Your email address will not be published. Required fields are marked *