CODEWITHSUNDEEP
androidangularjscordovayeomanionic-framework
Matan Gubkin
Matan Gubkin

Reputation: 3099

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);
    }       

}});

Upvotes: 13

Views: 16735

Answers (2)

Chong Lip Phang
Chong Lip Phang

Reputation: 9279

After trying various solutions with no luck for my cordova project, I simply went ahead to use the built-in JavaScript APIs. Essentially:

async function startCapturing() {   // get ready to shoot
    await getPermission('android.permission.CAMERA');
    let stream = await navigator.mediaDevices.getUserMedia({ video: {width: 480, height: 320, facingMode:'environment' }, audio: false });
    let video = document.getElementById("pVideo");   // a <video> element
    video.srcObject = stream;
    video.play();
    video.style.display = "block";
}

function shootPhoto(){       // take a snapshot
    let video = document.getElementById("pVideo");
    let canvas = document.getElementById("pCanvas");  // a <canvas> element
    let context = canvas.getContext('2d');
    context.drawImage(video,0,0,480,320);
    document.getElementById('fsPhotoI').src = Photo.current.src = canvas.toDataURL('image/png');
    Photo.current.changed = Profile.current.changed = true;
    video.style.display = "none";
}

In particular, some plugins did not work for me because they could't use the Android rear camera right away. The following in getUserMedia(...) does the trick:

facingMode:'environment'

Also make sure you have the CAMERA permission in your AndroidManifest.xml.

Upvotes: 0

Mohamad Al Asmar
Mohamad Al Asmar

Reputation: 1177

  • 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.

Upvotes: 12

Related Questions