Cannot read property 'getPicture' of undefined - ionic camera

Question

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

}});

Mortification

did you install this plugin? aka cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git and after android update? – Tissue

BTW, there is no dependancy to Ionic. – Tissue

i installed that plugin – Mortification

can we please talk in chat? its kinda like a broken phone here... – Mortification

https://mcmap.net/q/793751/-ionic-cordova-how-to-integrate-cordova-plugins-into-existing-ionic-project – Cassady

If you are testing your ionic app on browser, please try that on device. On browser, the Camera is indeed undefined. – Paroxysm

Answer 1

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

Monoploid

Have you tried this is it really working, in my case its not working – Raymer

your suggest is all right. I did test on chrome://inspect/#devices and works like charm. – Extortion

Answer 2

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.

Endodontics