Using Build.PhoneGap.com with android device results in 'cannot call method 'getPicture' of undefined'

Question

I using the sample code from the Build.PhoneGap site to capture an image from the phone and getting a "cannot call method 'getPicture' of undefined" error.

Using the following sample code in an index.html and the following config.xml I uploaded the zipped directory to PhoneGap, installed the application on a Thunderbolt Android device and in the try catch around the 'navigator.camera.getPicture' part of the capturePhoto() function I get the error. Does anyone know what may be going on with this? Thanks in advance.

Url for Full Sample:

http://docs.phonegap.com/en/1.0.0/phonegap_camera_camera.md.html

Index Code (without commenting):

<!DOCTYPE html>
<html>
  <head>
    <title>Capture Photo</title>

    <script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    var pictureSource;   // picture source
    var destinationType; // sets the format of returned value 

    document.addEventListener("deviceready",onDeviceReady,false);

    function onDeviceReady() {
        pictureSource=navigator.camera.PictureSourceType;
        destinationType=navigator.camera.DestinationType;
    }

    function onPhotoDataSuccess(imageData) {
      var smallImage = document.getElementById('smallImage');
      smallImage.style.display = 'block';
      smallImage.src = "data:image/jpeg;base64," + imageData;
    }

    function onPhotoURISuccess(imageURI) {
      var largeImage = document.getElementById('largeImage');
      largeImage.style.display = 'block';
      largeImage.src = imageURI;
    }

    function capturePhoto() {
      try
      { //this throws the error
        navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });
      } catch(exc){
        alert(exc.message);
      }
    }

    function capturePhotoEdit() {
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true }); 
    }

    function getPhoto(source) {
      navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
        destinationType: destinationType.FILE_URI,
        sourceType: source });
    }

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

    </script>
  </head>
  <body>
    <button onclick="capturePhoto();">Capture Photo</button> <br>
    <button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>
    <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
    <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
    <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
    <img style="display:none;" id="largeImage" src="" />
  </body>
</html>

Config File:

<?xml version="1.0" encoding="UTF-8" ?>
    <widget xmlns = "http://www.w3.org/ns/widgets"
        xmlns:gap = "http://phonegap.com/ns/1.0"
        id        = "com.phonegap.SampleImg"
        versionCode="10" 
        version   = "1.1.0">

    <!-- versionCode is optional and Android only -->

    <name>PhoneGap SampleImg</name>

    <description>
        An SampleImg for phonegap build docs. 
    </description>

    <author href="https://build.phonegap.com" email="[email protected]">
        My Name
    </author>
    <!-- to enable individual permissions use the following examples -->
<feature name="http://api.phonegap.com/1.0/battery"/>
<feature name="http://api.phonegap.com/1.0/camera"/>
<feature name="http://api.phonegap.com/1.0/contacts"/>
<feature name="http://api.phonegap.com/1.0/file"/>
<feature name="http://api.phonegap.com/1.0/geolocation"/>
<feature name="http://api.phonegap.com/1.0/media"/>
<feature name="http://api.phonegap.com/1.0/network"/>
<feature name="http://api.phonegap.com/1.0/notification"/>

</widget>

likestoski likestoski · Accepted Answer · 2012-08-01T17:36:11

Turns out you need to have this reference

<script src="phonegap.js" type="text/javascript" charset="utf-8"></script>

Instead of

<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>

In case anyone else is running up against this build.phonegap will match the appropriate phonegap.js file to the platform your targeting.

Using Build.PhoneGap.com with android device results in 'cannot call method 'getPicture' of undefined'

3 Answers