Hello Readers,

Cordova camera plugin allows to take pictures with device camera. First of all we need to install the plugin.

We can install it through CLI simple run:

$ cordova plugin add cordova-plugin-camera

This plugin requires Cordova 5.0+ version and for the older version we can install the following plugin :

$ cordova plugin add org.apache.cordova.camera

After installation, this plugin creates a global object navigator.camera and we get an API from this object. This API allows PhoneGap application to take picture with device camera and also we can choose the image from photo library.

Supported platforms:

• Android
• BlackBerry
• Browser
• Firefox
• FireOS
• iOS
• Windows
• WP8
• Ubuntu

Lets have a look on quick example how we can use camera plugin API in our PhoneGap application:

<button ng-click="captureImg()">Capture Photo</button>
<button ng-click="openGallery()">From Photo Library </button>
<div class="row">
  <img ng-show="myImg" src="{{myImage}}" style="border:1px solid;width:80px;height:80px;" />
</div>

$scope.myImg = false;

// Take picture with device camera
    $scope.captureImg = function()
    {
        var options = {
            quality: 50,
            destinationType : navigator.camera.DestinationType.FILE_URI,
            sourceType: navigator.camera.PictureSourceType.CAMERA,
            encodingType: navigator.camera.EncodingType.JPEG,
        }
        navigator.camera.getPicture(onSuccess, onFail, options);

        function onSuccess(imageData){
            $scope.myImg = true;
            $scope.myImage = imageData;
        }
        function onFail(message){
            alert('Failed because: ' + message);
        }
    }


// Retrieve Image from Device gallery
    $scope.openGallery = function()
    {
        var options = {
            quality: 50,
            destinationType : navigator.camera.DestinationType.FILE_URI,
            sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY,
            encodingType: navigator.camera.EncodingType.JPEG,
        }
        navigator.camera.getPicture(onSuccess, onFail, options);

        function onSuccess(imageData){
            $scope.myImg = true;
            $scope.myImage = imageData;
        }
        function onFail(message){
            console.log('Failed because: ' + message);
        }
    }

In the above example, navigator.camera.getPicture(onSuccess, onFail, options) method opens the device default camera. So that we can take picture or retrieve image from device photo library.  In this method we can pass three parameters for successcallback, errorcallback and option. The options parameter is used to customized the settings of camera. Following are the properties:

quality: We can define the quality of image. The range can be from 0 to 100 where 100 is for showing image in full resolution.

destinationType: destinationType is used choose the format of the image.

sourceType: sourceType defines the source of picture.

For example:  If we define camera.PictureSourceType.CAMERA then it will open the device camera so that you can take picture and if we define camera.PictureSourceType.PHOTOLIBRARY then it allows to retrieve image from device photo library.

encodingType: encodingType is used to define the image type. For Example: jpeg, png etc.

There are several properties you can add into option parameter as your requirement.

Hope this will help you :). For more details Click Here.