Current hybrid mobile applications are almost a marvel of modern web/mobile development. Where it was impossible few year ago, now you can use JavaScript and access any smartphone hardware. Do you want to send an SMS, send a file remotely, use a barcode scanner? Easy peasy, just find an appropriate Cordova plugin and make it work.
I’m writing this article to show you how easy it can be done. This article will cover using a smartphone camera with Ionic Framework.

Note: If this tutorial was helpful, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to Thanks and have a nice day!

Table of Contents

Click here if you want to see other tutorials, or articles about the Ionic framework (themes, templates, plugins, tutorials)


Other Resources (themes, templates, plugins, Cordova plugins, starter apps)

Cordova Plugin Tutorials



Before we can start make sure you have everything configured correctly.
You will need to have these:
  • Android Environment (or iOS if your working on a MacOS)
  • nodeJS
  • Ionic
  • Cordova
In case you don’t have a properly configured development environment take a look at this article: Ionic Framework | Installation Guide.

1. Update Ionic & Cordova

Don’t forget to update Ionic and Cordova, older versions may not work with this tutorial:
npm update -g cordova ionic

2. Create a New Project

ionic start IonicCameraDemo blank
cd IonicCameraDemo 
Warning: Since a few of my readers never worked with Ionic CLI. From this point and further, every time I tell you to execute something, do that inside a project folder.
Now we need to include an appropriate mobile platform; we’re going to add Android platform:
ionic platform add android
if you’re using MacOS, you can also add an iOS platform:
ionic platform add ios

3. Download ngCordova archive

ngCordova is a collection of 63+ AngularJS extensions on top of the Cordova API that make it easy to build, test, and deploy Cordova mobile apps with AngularJS. While we can make this work without ngCordova, it’s much more practical this way.
Download ngCordova zip file, here’s site link:
Official Site Docs Download Link
Unzip this archive and find a file named: ng-cordova.min.js, it should be available at this location: ng-cordova-master\dist\.
Open your newly created project directory and copy ng-cordova.min.js to this location: IonicCameraDemo\www\js.
Now include this location to index.html located at IonicCameraDemo\www; add it above cordova.js file, like this:
<!-- cordova script (this will be a 404 during development) -->
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>

4. Install Cordova Camera Plugin

Next line will import and install camera plugin into newly created project:
cordova plugin add cordova-plugin-camera
If for whatever reason plugin is no loner available in this repository, find a new one here.



At this point, you should have everything set up and ready, we can start working on our example.
Go to IonicCameraDemo project directory and find app.js, alter angular.module line and include ngCordova service, like this:
var app = angular.module('starter', ['ionic', 'ngCordova'])
Open index.html file, add a controller to ion-content directive:
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      <ion-content ng-controller="MainCtrl">
Initialize this controller in app.js file; don’t forget to inject $cordovaCamera service, like this:
app.controller('MainCtrl', function($scope, $cordovaCamera) {

And for a final touch, we’re going to use ngCodova Camera plugin example, wrapped inside a takeImage function:
app.controller('MainCtrl', function($scope, $cordovaCamera) {
    $scope.takeImage = function() {
        var options = {
            quality: 80,
            destinationType: Camera.DestinationType.DATA_URL,
            sourceType: Camera.PictureSourceType.CAMERA,
            allowEdit: true,
            encodingType: Camera.EncodingType.JPEG,
            targetWidth: 250,
            targetHeight: 250,
            popoverOptions: CameraPopoverOptions,
            saveToPhotoAlbum: false
        $cordovaCamera.getPicture(options).then(function(imageData) {
            $scope.srcImage = "data:image/jpeg;base64," + imageData;
        }, function(err) {
            // error
Our example is going to have a little bit different code. Instead of using vanilla JavaScript to populate image box, we’re going to do it like this:
    $cordovaCamera.getPicture(options).then(function(imageData) {
        $scope.srcImage = "data:image/jpeg;base64," + imageData;
    }, function(err) {
      // error
Now add a button and an image box to index.html file. When you press the button it will trigger $scope.takeImage function. When you finally take a picture, it will be shown inside an image box:
<img ng-src="{{srcImage || 'img/dummy.jpg'}}" id="srcImage" width="250 " height="250" style="display: block; margin: 0 auto;"/><br/>
<button class="button button-full button-positive " ng-click="takeImage() ">Take Image</button><br/>
This much code should be enough for a skeleton application, just a bare minimum. In a next chapter, I will show you how this application looks.
Continue Reading