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, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Table of Contents

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

Preparation

 
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.
 

Development

 

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-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content ng-controller="MainCtrl">
      </ion-content>
    </ion-pane>
 
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