Access Users Android and iOS Camera with Ionic Framework

Table of contents

Reading Time: 2 minutes

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: