Cannot read property ‘getPicture’ of undefined – ionic camera

this code returns:

 Cannot read property 'getPicture' of undefined

Have no idea what im doing wrong, can you please help me with the code?

My App:

angular.module(‘Todo’, [‘ionic’, ‘Todo.controllers’,’ngStorage’, ‘Todo.services’, ‘ngCordova’])

my Controller:

.controller('profileEditCtrl', function($scope,Camera, $localStorage,
 $cordovaCamera) 
     {  
        $scope.$storage = $localStorage.$default({ data:[]});

    $scope.takePicture = function() 
    {
        navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
            destinationType: Camera.DestinationType.DATA_URL }); 

      function onSuccess(imageData) {
        var image = document.getElementById('myImage');
        image.src ="data:image/jpeg;base64," + imageData;       
    }

    function onFail(message) {
        alert('Failed because: ' + message);
    }       

}});

Answer

  • Your code is correct, just add an html button with ng-click="takePicture()".

  • There is no problem here, It’s sure that the browser "cannot read property 'getPicture' of undefined" because it has no configuration for a mobile camera that you defined, which means you should test your application on a real device using:

    > ionic run android.

  • Notice that the new update of Google Chrome has a new feature which helps your test your device on the browser if it is connected to the PC/laptop, for testing go to chrome’s navigation panel >> More tools >> Inspect devices or just go to this link:

    chrome://inspect/#devices

  • I’m sure your camera will function normally if you have the plugin cordova plugin add org.apache.cordova.camera installed in the app,
    I hope this helps you.

Leave a Reply

Your email address will not be published. Required fields are marked *