Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Use The Android And iOS Camera With Ionic Framework

TwitterFacebookRedditLinkedInHacker News

Most smart phones on the market have at least one camera if not two. You may want to leverage these cameras to make the next Instagram or SnapChat type application. Lucky for us, the native Android and iOS camera can be easily accessed using Ionic Framework and the AngularJS extension set, ngCordova.

The following will help you add camera functionality into your latest creation.

Let’s start by creating a new Ionic project with the Android and iOS platforms:

ionic start IonicProject blank
cd IonicProject
ionic platform add android
ionic platform add ios

Remember that you must be using a Mac if you wish to build for iOS.

The next thing we want to do is add the Apache Cordova camera plugin. This can be done by running the following:

cordova plugin add org.apache.cordova.camera

For this tutorial we are going to be using the AngularJS extension set for Apache Cordova called ngCordova. Start by downloading the latest release of ngCordova and placing the ng-cordova.min.js file in your project’s www/js directory.

Next we need to include this file in our project’s code. Open the index.html file and include the script before the cordova.js line like below:

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="js/ng-cordova.min.js"></script>
        <script src="cordova.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter">

This will include the library into our project, but now we need to include it for use in AngularJS. Open your app.js file and alter the angular.module line to look like the following:

angular.module('starter', ['ionic', 'ngCordova'])

Now we’re ready for the fun stuff. Inside your app.js file, we need to add a controller with a method that will launch the camera. The following was copied almost exactly from the ngCordova documentation:

exampleApp.controller("ExampleController", function($scope, $cordovaCamera) {

    $scope.takePicture = function() {
        var options = {
            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
        });
    }

});

Notice I added a bunch of other data to my scope. Because our destination type is DATA_URL we will be returning raw camera data rather than a file. By adding data:image/jpeg;base64 we can use an HTML img tag to display our freshly created snapshot.

<ion-content ng-controller="ExampleController">
    <img ng-show="imgURI !== undefined" ng-src="{{imgURI}}">
    <img ng-show="imgURI === undefined" ng-src="http://placehold.it/300x300">
    <button class="button" ng-click="takePicture()">Take Picture</button>
</ion-content>

Just like that, you can call takePicture() from your UI and initialize the native Android and iOS camera in Ionic Framework.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.

Search

Follow Us

Support This Site