Access Users Android and iOS Camera with Ionic Framework


In the series of Ionic blog posts earlier we have seen how to setup ionic development environment Setup dev environment for ionic framework, now we are going to build the app which is using Camera API

Now these days smart phones have at least one camera if not two. So many apps use the functionality of the user’s camera to click photos and access users phone gallery support to their apps. for adding cool features into thier app

Plugin

First, We need to install the Camera API plugin. From the ionic CLI, cd into your app/work directory

I am assuming you have already added the platform of your choice (android, ios or may be both)

Install Apache Cordova Camera Plugin

cordova plugin add org.apache.cordova.camera

We have install the Camera API and now we can use the Camera functionality by writing some Javascript code like below:

In code we are just creating a Controller (takePhoto) and injecting $scope and $cordovaCamera. Then create a function with $scope ($scope.takePhoto) and call into you UI view

.controller('takePhoto', function($scope, $cordovaCamera){
     $scope.takePhoto = function() {
     var options = {
     fileKey: "avatar",
     fileName: "image.png",
     chunkedMode: "false",
     mimeType: "false",
     quality: 75,
     destinationType: Camera.DestinationType.DATA_URL,
     sourceType: Camera.PictureSourceType.CAMERA,
     allowEdit: true,
     encodingType: Camera.EncodingType.JPEG,
     targetWidth: 300,
     targetHeight: 300,
     popoverOptions: CameraPopoverOptions,
     saveToPhotoAlbum: false
   };
$cordovaCamera.getPicture(options).then(function(imageData) {
 $scope.imgURI = "data:image/jpeg;base64," + imageData;
    }, function(err) {
   // An error occured. Show a message to the user 
  }); 
 };
});
 <ion-pane>
    <ion-header-bar class="bar-stable">
    <h1 class="title" align-title="center">Ionic Camera App</h1>
    </ion-header-bar>
    <ion-content ng-controller="takePhoto">
    <button class="button button-positive button-full" ng-click=
                   "takePhoto()">Take Picture</button>
    <div class="center">
        <img ng-show="imgURI !== undefined" ng-src="{{imgURI}}">
        <img ng-show="imgURI === undefined" ng-src="img/img.png">
     </div>
    </ion-content>
  </ion-pane>

And you can find full working code on Github

The output images below showing the working of cordova camera plugin:

Screenshot from 2016-01-16 03_02_03     Screenshot from 2016-01-16 03_02_29      Screenshot from 2016-01-16 03_02_42

 

 

Thanks!!.

This entry was posted in AngularJS, Ionic Framework, JavaScript, knoldus and tagged , , , , . Bookmark the permalink.

2 Responses to Access Users Android and iOS Camera with Ionic Framework

  1. Pingback: File Upload or Transfer in Cordova plus ionic to server in angularjs | Knoldus

  2. Pingback: Access Users Android and iOS Camera with Ionic Framework | knoldernarayan

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s