Using Smartphone Camera With Ionic Framework

Written by on July 24, 2015

Using Smartphone Camera With Ionic Framework

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 dragan.gaic@gmail.com. Thanks and have a nice day!

Table of Contents

[spoiler title=” Click here if you want to see other tutorials, or articles about the Ionic framework (themes, templates, plugins, tutorials)”]

Tutorials

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

Cordova Plugin Tutorials


[/spoiler]

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

Categories

15 thoughts on “Using Smartphone Camera With Ionic Framework”

  1. Hi! Thanks for the tutorial. I have an issue, I do everything, but when I click on the button, nothing happen. Do you know what i´m doing wrong? Greetings!

  2. Olá!
    Fiz da forma como está descrito, mas na hora de carregar a foto ele retorna o seguinte erro: Refused to load the image ‘data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0P…KQ0hik+lNzkUnr9acP8KAGkGk9qU0lACE4FNz3pzdDTB/SmCHdqb60tIaAEP1pn+etOptIZ//Z’ because it violates the following Content Security Policy directive: “default-src *”. Note that ‘img-src’ was not explicitly set, so ‘default-src’ is used as a fallback.

    Gostaria de saber o que pode estar errado no código.
    Grato pela Atenção!

Leave a Reply to Ilair dos Santos Cancel reply