I am assuming this is only possible with the PhoneGap framework and not part of native navigator object. Is this true? Thanks!

Yes of course.

Excellent! Thanks Shazron!

hey i am using the EDGE version. This camera API works on index.html but not in other pages... I thought this problem was fixed in EDGE isnt it??

Are you looking for the deviceready event? There is a FAQ item about the index.html stuff.

i am calling it from a click event not onload so i guess phonegap must have loaded by then.

ok used deviceready to just give it a try and it worked... but i need the image extension to save the image in my server.. How do i get that??

I've implemented this but the Photo Library button doesn't work. Am I being idiotic?

How about video's? I can imagine the base64 encoded string of a video would be huge, but I'd like to be able to record one..

This fails on the current edge with iPhone OS 3.01. The camera comes up, you can take the picture, then the "use/retake" preview view comes up and the device freezes - eventually it runs out of memory and is killed by the OS. So, right now, it does not work.

@Todd Blanchard
Same problem here.

I put this code into the default site that comes with phonegap and nothing happens I was using version 0.8.0 simulated in xcode in all 3.0 versions of iphone. Anybody have an idea!

Oh the simulator doesn't have camera support. f

I can't seem to call getPictureFromLibrary i have version 0.8 installed. When I download the edge version it has folders but its empty and I can't download any patch. getPicture works fine though.

function getPicture()
{
navigator.camera.getPicture(getPicture_Success, null, { quality: 10 });
};
function getPicture2()
{
navigator.camera.getPictureFromLibrary(getPicture_Success, null, null);
};

Can anybody help! Thanks.

this solved my problem
http://phonegap.lighthouseapp.com/projects/20116/tickets/10-enhancement-camera-api-add-option-to-specify-source#ticket-10-3

The source code provided works fine for me. However, it either (a) compreses or stretches the image to fit a defined <img> width and height, or (b) it displays the image full size if the <img> tag has no specified width and height. I would like to display the image in a defined box (i.e., a <div>) such that it is sized to fit, leaving empty spaces if necessary, as the jquery plugin jquery.scale promises to do. Neither that plugin no another I have tried will resize the image, even after waiting until the image is fully displayed and then initiating a resize via a button. The problem seems to be that the surrounding <div> has an undefined width, for example. Anybody know how to display the image from the camera or the library within the boundaries of a <div> without distortion?

Further, the dimensions of the newly-sourced image are 0 x 0 pixels at this point:

function getPicture_Success(imageData)
{
var newPhoto = new Image();
newPhoto.src = 'data:image/jpeg;base64,' + imageData;
var imgWidth = newPhoto.width;
var imgHeight = newPhoto.height;
alert(imgWidth + 'x' + imgHeight); // gives 0 x 0
}

Later, using an onload call fro the <img> tag

<img id="test_img" src="" style="position: relative;" onload="resizeImage()">

the resizeImage function gets the dimensions of the PREVIOUS image, not the new one from the camera or library. Frankly, I'm stuck -- I can't resize because I don't know the dimensions of the camera or library image. I can set the size of the new image, for example

$('#test_img').attr('width', 300);
$('#test_img').attr('height', 380);

but that just gives me a squozed image, not what I want. Any hints from the gurus out there?

Just tested this with an iPod Touch and i can't get the image library to work. Is that even available using ipod touch?

This doesn't seem to work anymore in the latest SDK (I'm using SDK 4.0.1). imageData = "(null)" when the success callback is invoked.