Breaking News

How to add Camera feature in angular js ionic mobile application

Share on Google Plus

Hi guys, today I am going to explain you how to add camera feature in angular js ionic mobile application. Let’s start to create sample ionic mobile application with camera. Here includes some steps to create ionic mobile application.

Step 1 Create ionic sample project

                Open command prompt and execute the command “ionic start MyCameraProject blank”

Step 2 Add the platform

Open command prompt and go to MyCameraProject and execute the command “ionic platform add android”

Step 3 Download  “ng-cordova.min.js” file and paste into  www/js/ folder

Step 4 Install cordova camera plugin

                Open command prompt and go to MyCameraProject and execute the command “cordova plugin add”

Step 5 Copy below code into head section  of www/index.html file.

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">


<link href="lib/ionic/css/ionic.css" rel="stylesheet">

                <link href="css/style.css" rel="stylesheet">

!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above

    <link href="css/" rel="stylesheet">



    <!-- ionic/angularjs js -->

    <script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->

                <script src="js/ng-cordova.min.js"></script>

    <script src="cordova.js"></script>

<!-- your app's js -->

    <script src="js/app.js"></script>

 Step 6 Copy below code into body section  of www/index.html file.


      <ion-header-bar class="bar-stable">

        <h1 class="title">Ionic Blank Starter</h1>


      <ion-content ng-controller="CameraController">

                                  <img ng-show="imgURI !== undefined" ng-src="{{imgURI}}">

                                  <img ng-show="imgURI === undefined" ng-src="">

                                  <button class="button" ng-click="takePicture()">Take Picture</button>




Step 7 Copy below code into www/js/app.js file.

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

.run(function($ionicPlatform) {

  $ionicPlatform.ready(function() {

    if(window.cordova && window.cordova.plugins.Keyboard) {



    if(window.StatusBar) {







                var options = {

                quality: 50,

                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) {





Step 8 Build the project

                Open command prompt and go to My Camera Project and execute the command “ionic build android”

Step 9 Run the project

                Connect the device to development machine and open command prompt and go to My Camera Project and execute the command “ionic run”

Step 10 Output(Result)

Screen before clicking.


Screen after clicking.


Trilok Singh

You Might Also Like


Our Logo

Our Logo
Tech Hunters

Like us on Facebook