navigator.camera is undefined

3,532 views

Skip to first unread message

Alex

unread,

Dec 6, 2011, 3:45:39 PM12/6/11

to phonegap

Hi, All

I am new for phonegap development, and I am trying to achieve the
camera functions.

I have been tried according to following url instructions.

http://docs.phonegap.com/en/1.2.0/phonegap_camera_camera.md.html#Camera

I have some errors that I am unable to resolve or say to fix.

TypeError: Result of expression 'navigator.camera' [undefined] is not
an object.

SyntaxError: Parse error at file:///android_asset/www/index.html:70

ReferenceError: Can't find variable: capturePhoto

Please help me to get out of it.

This is the HTML page:
<!DOCTYPE html>
<html>
<head>
<title>Capture Image</title>
<script type="text/javascript" charset="utf-8"
src="phonegap-1.2.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
if (navigator.camera == null) {
alert('navigator.camera is nothing');
}
navigator.camera.getPicture(onPhotoDataSuccess, onFail,
{ 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,
{ 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: destinationType.FILE_URI,
sourceType: source
});
}

// Called if something bad happens.
//
function onFail(message) {
alert('Failed because: ' + message);
}
</script>
</head>
<body>
<button onclick="capturePhoto();">Capture Image</button> <br>
<img style="display:none;width:60px;height:60px;" id="smallImage"
src="" />
<img style="display:none;" id="largeImage" src="" />
</body>
</html>

Manuel

unread,

Jan 18, 2012, 4:00:34 AM1/18/12

to phonegap

Hi, you have to check the JS path. I had the same problem, you
probably copied the example and anfter, you dedin't update the:
<script type="text/javascript" charset="utf-8" src="phonegap.js"></
script>

Bye
M

> // Take picture using devicecameraand retrieve image as

> base64-encoded string
> if (navigator.camera== null) {

> alert('navigator.camerais nothing');

> }
> navigator.camera.getPicture(onPhotoDataSuccess, onFail,
> { quality: 50 });
> }
>
> // A button will call this function
> //
> function capturePhotoEdit() {