Javatpoint Logo
Javatpoint Logo

Ionic Camera

In this section, we are going to see an example to access the native device camera based on Angular.

To access or integrate the native device features, you need a Cordova plugin. The Ionic Native acts as a wrapper for the Cordova plugin that provides integration with Angular and TypeScript.

The Ionic native camera plugin allows us to take a picture by using the device camera. Let us see step by step to learn how you can access the camera to take a photo in Ionic.

Step 1: Create a new project. You can learn how to create a project in Ionic 4 from here. You can skip this step if you already had an Ionic project.

Step 2: Next, navigate to the project and install the following camera plugin using the below command.

Step 3: Import the camera plugin in the app.module.ts file and also include the plugin in the providers as below.


Step 4: Open the file and import the camera plugin, then create an object reference by using the constructor. Now, create a function for capturing the photo. The following code snippet gives you a detailed explanation.

Step 5: After creating a function, open the file. In this file, you need to create a button and click event to use the function defined in the file.

Step 6: Now, you need to add the target platform to deploy the app. You can use your phone to run and test the app. For this, you need to install the following command.

If you want to test your app in the browser, run the below command.

You will get the output, click the button, the device camera will be open. Now you can take a photo or picture.

Ionic Camera

Camera Option

There are several options available that can be used with the camera. These options are given in the following table.

Parameter Type Description
quality Number It is used to set the quality of the image in the range of 0-100.
destinationType Number It is used to choose the format of the image.
sourceType Number It is used to set the source of the image.
encodingType Number It is used to choose the encoding type of the image. The value zero will set JPEG, and value one will set the PNG image format.
allowEdit Boolean It is used for allowing editing of the image before selection.
targetHeight Number It is used for scaling image width in pixels.
targetWidth Number It is used for scaling image width in pixels.
cameraDirection Number It is used to set the camera to use front or back facing.
popoverOptions String IOS-only options that specify popover location on iPad.
mediaType String It is used to set the media type.
correctOrientation Boolean It is used for correcting the orientation of the device during capturing.
saveToPhotoAlbum Boolean It is used for saving images to photo album on the device.

Next TopicIonic Geolocation

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA