Cross device photo capture for upload

Question

Since iOS6 Mobile Safari browser users of the have been able to upload images from their device either through the camera or their photo album.

Web developers only had to write a upload script bound a file input tag as follows:

<input type="file" accept="image/*" capture="camera">

This would prompt iOS users to select the image source (image file or camera) and then the image would be uploaded to the server. Something like in this image.

This works well for iOS with Mobile Safari however, I would like to have this same behavior in Windows Phone, Android as well iOS iPhone and iPad.

Are there similar HTML specifications for each device ?

You can use this link provided by Chris Droukas on his answer to try it.

Thank you.

EDIT:

I've had the chance to try <input type="file" accept="image/*" capture="camera"> on Android 4.2 and iOS6 and on both it allowed the user to take a picture (or select one) and submit it.

Can someone with more devices tell me if this worked for them?

Answer 1

According to this chart, HTML Media Capture is available on the following mobile platforms:

iOS Safari: 6.0 and greater

Android Browser: 3.0 and greater

Google Chrome: 4.0 and greater

BlackBerry Browser: BB10

Opera Mobile (Android & Symbian): 14.0 and greater

Firefox (Android, MeeGo): 11.0 and greater

It does not appear to be supported in Internet Explorer on Windows Phone. You can test on different devices here.

Answer 2

Using PhoneGap:

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

<script>
function takePicture() {
    navigator.camera.getPicture(
        function (uri) {
            var img = document.getElementById('camera_image');
            img.style.visibility = "visible";
            img.style.display = "block";
            img.src = uri;
            document.getElementById('camera_status').innerHTML = "Success";
        },
        function(e) {
            console.log("Error getting picture: " + e);
            document.getElementById('camera_status').innerHTML = "Error getting picture.";
        },
        { quality: 50, destinationType: navigator.camera.DestinationType.FILE_URI});
};
</script>


<input type="button" onclick="takePicture();" value="Take Picture" /><br/>