HTML5: camera access

The getUserMedia method is now supported on Firefox 17+,Chrome 23+ and Opera 12+. (See caniuse.com)

Screenshot of the CanIUse.com support grid as of 2/24/12


This works on Firefox mobile, Chrome mobile, iPhone and Android:

<input type="file" id="mypic" accept="image/*">

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

See Capturing Audio & Video in HTML5

Support:

  • Android 3.0 browser - one of the first implementations. Check out this video to see it in action.
  • Chrome for Android (0.16)
  • Firefox Mobile 10.0
  • iOS6 Safari and Chrome (partial support)

We've had some success with this basic approach cobbled together from across the Web:

<form method="post" action="takephoto.php" enctype="multipart/form-data">
<input type="file" accept="image/*" name="file">
<input type="submit">
</form>

Then in the PHP file we generate unique file names using now() or something similar for storage.