Cordova Camera Plugin Not Working w/ AngularJS

ionic-v1
1

Trying to get the Cordova Camera to work. I’ve upgraded to the latest apache cordova camera plugin to handle issues with IOS8. Now I get issues stating:
“getPicture()” undefined from the Camera class (refer to the Camera Sample here https://github.com/driftyco/ionic-example-cordova-camera/blob/master/www/js/services.js)

Also, in another project I get an error when I use the options as such in the Angular Controller
"Camera.DestinationType.DATA_URL" --> Says Camera is undefined whenever I use the ngCordova plugin…Essentially, it’s quite weird. When I simply replace the attribute with it’s value of 0 the error doesn’t happen but the camera still does not popup.

Any way to solve this?

2

If I can give you an advice, remove the plugin installed by
cordova plugin remove org.apache.cordova.camera
and install with :
cordova plugin add https://github.com/apache/cordova-plugin-camera

3

Hello,
I did this…Did further digging and found out that the “navigator.camera” object nor the Camera class is defined in the app itself. I’m doing debugging on the IOS Phone via Safari browser. I pulled the latest version of the plugin…In the nGCordova, the promise object returns null if “navigator.camera” is undefined, and null is exactly what I get form my getPicture() below.

If this has worked for you, what repo did you pull from to get the latest camera plugin and how did you do the include in Angular so that it’s in view? I’ve done the Camera module include already and still doesnt work for me.

Code Snippet:
angular.module(‘controllers.profile’, [‘ngCordova.plugins.camera’])

.controller(‘ProfileCtrl’, [
’$cordovaCamera’,
’$cordovaLocalStorage’,
’$ionicActionSheet’,
…,
‘Utils’,
function($cordovaCamera, $cordovaLocalStorage, $ionicActionSheet, $ionicModal, $ionicLoading, $ionicPopup, $timeout, $scope, $state, $stateParams, $ionicPlatform, Constants, AuthService, Utils,Camera) {
var options = {};
$ionicPlatform.ready(function() {
$scope.openCamera = function(){
$cordovaCamera.getPicture(options).then(function(imageData) {
//$scope.imgURI = “data:image/jpeg;base64,” + imageData;
console.log(imageData);
}, function(err) {
// An error occured. Show a message to the user
console.log("Error: "+err);
});

    };

…

4

Here is my code :

'use strict';

/**
 * editaccount controller: 
 */
angular.module('lio').controller('editaccountCtrl', function ($scope, $ionicGesture, $state,
                                                                UserService,
                                                                appConstants) {

    // get a working copy of the object
    $scope.user = JSON.parse(JSON.stringify(UserService.user()));

    $scope.changePicture = function() {

        navigator.camera.getPicture(onSuccess, onFail,
            {
                sourceType : Camera.PictureSourceType.CAMERA,
                correctOrientation: true,
                quality: 75,
                targetWidth: 200,
                destinationType: Camera.DestinationType.DATA_URL,
                encodingType: Camera.EncodingType.PNG,
                saveToPhotoAlbum:false
            });
        function onSuccess(imageData) {
            $scope.user.picture = "data:image/png;base64," + imageData;
            $scope.$apply();
        }

        function onFail(message) {
            if (appConstants.debug) {
                alert('Failed because: ' + message);
            }
        }
    };

    [...]

});

I didn’t try on iOS because don’t have an iOS phone, but it should works. (Works on Android).

5

Thank you.
I actually got it working…cordova.js was defined after ng-cordova.js. Love it when the biggest debugging time consumer is always from something simple. Thanks.

1 Like
6

glad to hear that.
Have a nice week end.

1 Like