Last Updated: January 20, 2018
· brandonbeeks
Nice photo

HTML5 Mobile Device Camera Access

While working on a custom mobile admin for Wordpress I came across the need to access a mobile device's camera/images. I couldn't use services like Phone Gap because the admin would be packaged with a premium theme, so a native app was out of the question. After doing some research I came across this little nugget.

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

By adding the accept and capture attributes I was able to access my phone's camera and images. I should also point out that you don't need to do anything special with your php form in order to store the image...it acts just like a standar file upload input in a browser. The only catch is it only works with iOS6+ or Android 3.0+. I'm not worried about backwards compatibility, so this little code snippet saved me hours of work. Hopefully it'll do the same for you.

Say Thanks

9 Responses
Add your response


I'd advise to get a look at Capturing tutorial in HTML5 http://www.html5rocks.com/en/tutorials/getusermedia/intro/

over 1 year ago ·
Nice photo

@moiseevigor that's a great resource. Thanks for sharing!

over 1 year ago ·

thanks...really save my hours..better hv a sample nugget here

over 1 year ago ·

This is awesome!

over 1 year ago ·

Thank you so much just saved me so much time!

over 1 year ago ·

Yes this is way cool and i'm using it, thanks!
It works very well on latest browsers but i can't make it work under a native app (apk install), through the lastest webview in API19.
Any advices!?

over 1 year ago ·
0 y g sbwjmc8a9krap8ysszvyrx6un3eao3wsszecx3 yw5gmr5soqvpuzeqpz6wgg8x2vtshrknc

Can this API be used to capture image from camera or use an existing image from the gallery on an android phone. Also once done is there a way to get the byte array of the image and store it on the local db in my app ?

over 1 year ago ·

Hello! I want to open a WordPress page on my smartphone, and on this page, access my smartphone camera, capture a photo, and send it to an email. I inserted your code into a Contact Form 7 form, but it did not work. What can I do?

over 1 year ago ·

You think this will replace the cordova-camera-plugin ??

Thank you for the share

7 months ago ·