Ionic Cordova Camera not working

Question

I am using exactly the following Git (see here the code) as an input for Phonegap Build and have installed the app on my phone correctly (iOS).

The app opens correctly but when I try to take a picture (clicking on the button) nothing happens. It should display the image that was taken by the camera.

Can someone explain to me what is not working? The tutorial is from the Ionic website.

Alternative: does someone have a working .git or code for phonegap?

Solution

Oke so I figured it out, its all about setting up config.xml properly!

Here is an overview how to build a sample camera app with Ionic and Phonegap Build

1. Install NodeJS or go to c9.io (Cloud Environment) and start a NodeJs project. Delete all files if needed

2. Install Ionic and start a project (here: tabs)

npm install -g cordova ionic
ionic start myApp tabs 

2a. cd myApp

2b. optional, add the plugin (if testing in browser or on your simulator)

cordova plugin add org.apache.cordova.camera

3. cd www

4. Install through Bower or Unzip ngCordova in /lib

bower install ngCordova

5. Add the ngCordova reference in index.html

In index.html add

<script src="lib/ngCordova/dist/ng-cordova.js"></script> 

before

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

6. in app.js add 'ngCordova' as dependency

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

7. Write the controller

.controller("ExampleCtrl", 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
        });
    }

});

8. Use the controller in .html (don't forget to add a state tab.example with ExampleCtrl in app.js)

<ion-view view-title="Example">
  <ion-content>
    <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>
</ion-view>

9. Add the proper config.xml. Use this template:

https://github.com/phonegap/phonegap-start/blob/master/www/config.xml

Comments

[Nic Raboy]

Glad you figured it out :)

[Abhishek Deb]

1 thing though - "3. cd www 4. Install through Bower or Unzip ngCordova in /lib bower install ngCordova" - .bowerecc file already takes care of the bower files to place them directly under /www/lib .. so we don't need to cd into www ..

[Dinesh Devkota]

Can you elaborate step number 9. Where to add config.xml or what to do with it?

[Peege151]

That config.xml won't run. It also needs a <content src='index.html'>

[DebuggerCoder]

Options : cameraDirection : 1 [ front camera = 1 ] and allowEdit : true for camera taken pic is not working.

[shenku]

@DineshDevkota you need to add the camera to the the config.xml <plugin name="cordova-plugin-camera" />