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?

Answer 1

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