How to use camera in an ionic application

Posted By : Ankit Singh Rana | 03-Sep-2017

To use camera in a ionic app we would need cordova plugin and ng-cordova Library. The cordova camera plugin makes it very easy to take photo from the device. And it can a base64-encoded image or a file location on the device. In this blog, I will show you how to get file URI of an Image from the device.

Steps : 1

First run the following command to add the plugin, and also inject 'ngCordova' in your app.js and include ng-cordova.js file in your index.html

        cordova plugin add cordova-plugin-camera

Step : 2

Now have to inject $cordovaCamera in a service or a controller. After that define the camera option like picture quality camera orientation etc. Now to get an image URI we have to set destinationType to "Camera.DestinationType.FILE_URI". You can also set it to base_64.

           var options = {
                        quality: 100, // High quality Image
                        destinationType: Camera.DestinationType.FILE_URI, //Base_64 or File URI, currently getting file URI 
                        sourceType: Camera.PictureSourceType.CAMERA, //Source is camera
                        allowEdit: true, // Allow user to edit before saving
                        encodingType: Camera.EncodingType.JPEG, // Save as JPEG
                        targetWidth: 100,
                        targetHeight: 100,
                        popoverOptions: CameraPopoverOptions,
                        saveToPhotoAlbum: false, // Album save opton
                        correctOrientation: true // Camera orientation

Step 3 :

Taking the picture and getting the URI is pretty straight forward, we'll just have to call getPicture function on the $cordovaCamera with the options defined above and it will return an Image URI.

          $cordovaCamera.getPicture(options).then(function(imageURI) { // Get the picture recived from camera
                    }, function(err) {

Then you can simply set the src of an img tag to imageURI retured, an it will display the image to user.

About Author

Author Image
Ankit Singh Rana

Ankit is a UI Developer having experience in Angular 2, Angular JS, JavaScript, HTML5 and CSS3. His hobbies includes playing video Games and traveling.

Request for Proposal

Name is required

Comment is required

Sending message..