PhoneGap Camera API for Android - Uncaught Exception

I am trying to run the Camera API using Phone gap in Android, and i am running in all sort of issues.

I just copied phonegap camera example.

I am getting the following error

07-12 18:18:00.706: E/Web Console(17837): Uncaught TypeError: Cannot read property 'SAVEDPHOTOALBUM' of undefined at file:///android_asset/www/index.html:98

07-12 18:17:59.456: E/Web Console(17837): Uncaught ReferenceError: Camera is not defined at file:///android_asset/www/index.html:67

I tried all the other destination type. It dint work

destinationType: destinationType.FILE_URI
destinationType: Camera.DestinationType.FILE_URI
destinationType: destinationType.DATA_URL

Also i added the permission for Camera and hardware camera permission. But still it failed

Here is the following

<!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 

// Wait for PhoneGap to connect with the device
//
document.addEventListener("deviceready",onDeviceReady,false);

// PhoneGap is ready to be used!
//
function onDeviceReady() {
    pictureSource=navigator.camera.PictureSourceType;
    destinationType=navigator.camera.DestinationType;
}

// Called when a photo is successfully retrieved
//
function onPhotoDataSuccess(imageData) {
  // Uncomment to view the base64 encoded image data
  // console.log(imageData);

  // Get image handle
  //
  var smallImage = document.getElementById('smallImage');

  // Unhide image elements
  //
  smallImage.style.display = 'block';

  // Show the captured photo
  // The inline CSS rules are used to resize the image
  //
  smallImage.src = "data:image/jpeg;base64," + imageData;
}

// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
  // Uncomment to view the image file URI 
  // console.log(imageURI);

  // Get image handle
  //
  var largeImage = document.getElementById('largeImage');

  // Unhide image elements
  //
  largeImage.style.display = 'block';

  // Show the captured photo
  // The inline CSS rules are used to resize the image
  //
  largeImage.src = imageURI;
}

// A button will call this function
//
function capturePhoto() {
  // Take picture using device camera and retrieve image as base64-encoded string
  navigator.camera.getPicture(onPhotoDataSuccess, onFail, {destinationType: Camera.DestinationType.FILE_URI, quality: 50 });
}

// A button will call this function
//
function capturePhotoEdit() {
  // Take picture using device camera, allow edit, and retrieve image as base64-encoded string  
  navigator.camera.getPicture(onPhotoDataSuccess, onFail, { destinationType: Camera.DestinationType.FILE_URI,quality: 20, allowEdit: true }); 
}

// A button will call this function
//
function getPhoto(source) {
  // Retrieve image file location from specified source
  navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
    destinationType: Camera.DestinationType.FILE_URI,
    sourceType: source });
}

// Called if something bad happens.
// 
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>

Upvotes: 9

Answers (6)

Shady Mohamed Sherif

Reputation: 15759

I had the same problem I solved it on three steps

The javascript include

I used cordova.js ONLY and removed any phonegap.js

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

Installing the plugin(s)

You must install the camera plugin using command line; xml only doesn't work

cordova plugin add org.apache.cordova.camera

Use right android-package

In your xml you may are using org.apache.cordova.CameraLauncher it is wrong and will give you NullPointer exception. The right package could be included like that

<feature name="Camera">
    <param name="ios-package" value="CDVCamera" />
    <param name="android-package" value="org.apache.cordova.camera.CameraLauncher" />
</feature>

Give them a try! Thanks :)

Upvotes: 1

tttpapi

Reputation: 887

I had the same problem.

You are using pictureSource.PHOTOLIBRARY and pictureSource.SAVEDPHOTOALBUM directly in the code.

The problem is that the html is loaded before the javascript and then you are trying to reach pictureSource. But has not been specified yet.

You have to use this when the app is fully loaded (eg. use jQuery event in documents.ready or some alternative in javascript)

Upvotes: 0

Muhammad Riyaz

Reputation: 2942

Just adding
<script src="phonegap.js"></script>
in my html solved it for me!
And also I had <script src="cordova.js"></script>, so removed it and kept only
<script src="phonegap.js"></script>.

Upvotes: 0

Kousik

Reputation: 22395

You can try this for Capturing Photo using phonegap

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

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

// Wait for Cordova to connect with the device
//
document.addEventListener("deviceready",onDeviceReady,false);

// Cordova is ready to be used!
//
function onDeviceReady() {
    pictureSource=navigator.camera.PictureSourceType;
    destinationType=navigator.camera.DestinationType;
}

// Called when a photo is successfully retrieved
//
function onPhotoDataSuccess(imageData) {
    // Uncomment to view the base64 encoded image data
    //alert(imageData);  

    // Get image handle
    //
    var smallImage = document.getElementById('smallImage');
    // Unhide image elements
    //
    smallImage.style.display = 'block';

    // Show the captured photo
    // The inline CSS rules are used to resize the image
    //
    smallImage.src = "data:image/jpeg;base64," + imageData;
}

// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
    alert("inside large image")
    // Uncomment to view the image file URI 
    // console.log(imageURI);

   // Get image handle
   //
    var largeImage = document.getElementById('largeImage');

  // Unhide image elements
  //
    largeImage.style.display = 'block';

  // Show the captured photo
  // The inline CSS rules are used to resize the image
  //
    largeImage.src = imageURI;
}

// A button will call this function
//
function capturePhoto() {
  // Take picture using device camera and retrieve image as base64-encoded string
    navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
    destinationType: destinationType.DATA_URL });
}

// A button will call this function
//
function capturePhotoEdit() {
  // Take picture using device camera, allow edit, and retrieve image as base64-encoded string  
    navigator.camera.getPicture(onPhotoDataSuccess, onFail,
    { quality: 20, allowEdit: true,
    destinationType: destinationType.DATA_URL });
}

// A button will call this function
//
function getPhoto(source) {
  // Retrieve image file location from specified source
    navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
    destinationType: destinationType.FILE_URI,
    sourceType: source });
}


// Called if something bad happens.
// 
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>

Upvotes: 1