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="myemail@somedomain.com">
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>
Turns out you need to have this reference
Instead of
In case anyone else is running up against this build.phonegap will match the appropriate phonegap.js file to the platform your targeting.