Search code examples
cordovacordova-plugins

Cannot read property 'getPicture' of undefined

Before opening this topic, I read several answers here, but all are very old and none worked.

I'm new to Cordova.

I am trying to use the cordova-plugin-camera plugin.

I generate the apk, and when I'm going to test it on my phone (MotoG 3 - Android 6.0), it doesn't open.

Using debug shows this error:

Cannot read property 'getPicture' of undefined

This code of mine:

<!DOCTYPE html>
<html>
  <head>
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="shortcut icon" href="img/favicon.png"  />

    <title>Foto</title>
  </head>
  <body>

    <div class="app">

      <button type="button" class="btn" id="cameraApp">Take a picture</button>
      <img src="" id="myImage">


    </div>




    <script src="js/jquery-3.4.1.min.js"></script>

    <script>

      document.getElementById('cameraApp').addEventListener('click', cameraApp);
      function cameraApp() {
        navigator.camera.getPicture(onSuccess, onFail,{
          quality: 100,
          saveToPhotoAlbum: true,
          destinatinType: Camera.DestinatinType.DATA_URL
        });

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

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

    </script>


  </body>
</html>

CONFIG.XML

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.myapp.app" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:android="http://schemas.android.com/apk/res/android" >
    <name>F.C. APP</name>
    <description>
        Myapp
    </description>
    <author email="[email protected]" href="www.mysite.net">
        Hostcia.net
    </author>
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
        <icon src="www/img/favicon.png" width="57" height="57" density="mdpi" />
        <custom-config-file target="AndroidManifest.xml" parent="/*">
            <uses-permission android:name="android.permission.INTERNET" />
            <uses-permission android:name="android.permission.NETWORK_ACCESS" />
            <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
            <uses-permission android:name="android.permission.CAMERA" />
            <uses-feature android:name="android.hardware.camera" />
            <uses-feature android:name="android.hardware.camera.autofocus" />
          </custom-config-file>
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
</widget>

What am I doing wrong?

Solution

  • navigator Available after device ready event

        <script>
    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
        console.log(navigator.camera);
    document.getElementById('cameraApp').addEventListener('click', cameraApp);
    }

    function cameraApp() {
    navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
                quality: 25,
                destinationType: Camera.DestinationType.FILE_URI,
                sourceType: Camera.PictureSourceType.CAMERA,
                allowEdit: true,
                encodingType: Camera.EncodingType.JPEG,
                popoverOptions: CameraPopoverOptions,
                saveToPhotoAlbum: true
            });
    }
    </script>