Use Device API and File API to take and display a photo using the Android browser
Switch branches/tags
Nothing to show
Latest commit 4cb95bf May 4, 2012 @don don update
Failed to load latest commit information. update May 4, 2012
index.html link to source, add google analytics May 4, 2012
script.js initial import May 4, 2012
style.css link to source, add google analytics May 4, 2012

The browser in Android 4 is able to take pictures from a web page and display them without any plugins or server interaction. This demo uses the Device API and File API to take and display a picture on a phone using the browser.

Watch a video of the demo.

Try it on your Android phone

I wrote this demo after reading David Calhoun's post about Android implementing device APIs.

This works on my Google Nexus S running Ice Cream Sandwich (4.0.4). The Device API works on Samsung Galaxy Tab 10.1 with Honeycomb (3.2) but the File APIs do not. YMMV.

Loading images from the gallery is finicky. Images load from the device but fail to load from Picasa albums. I had to alter the image blob and change data:base64 to data:image/jpeg;base64 to get photos from galleries to display.

I kludge the photo orientation based on the device orientation, clearly there is a better solution.

It's possible to run the browser out of memory. I'm guessing this is because a huge photo is encoded into a base64 string. Maybe window.URL.createObjectURL(file) would work better than reading the image with FileReader?

Adjusting the input tag can control the input types:

<input type="file" />
Browser prompts for camera, camcorder, sound recorder, music track, or gallery

<input type="file" accept="image/*" />			
Browser prompts for camera or gallery	

<input type="file" accept="image/*;capture=camera" />			
Browser goes directly to the camera