epwmoa
Last Updated: November 04, 2018
·
170.2K
· brandonbeeks

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.

14 Responses
Add your response

2628

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

over 1 year ago ·
2629

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

over 1 year ago ·
7796

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

over 1 year ago ·
7958

This is awesome!

over 1 year ago ·
8668

Thank you so much just saved me so much time!

over 1 year ago ·
14981

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 ·
15364

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 ·
28378

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 ·
29176

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

Thank you for the share

over 1 year ago ·
29741

I have the same problem that you @anjoalre, did you resolve that?

8 months ago ·
29763

its great tips i think its very easy to access
http://www.trickworld.co.uk/free-netflix-account-january-2018

8 months ago ·
29943

That's great. Is it however possible to override the default behavior of <input type="file" accept="image/*" /> such that only the user gallery is shown instead of the camera option also popping up.

6 months ago ·
29960

sdfs

6 months ago ·
30286

Thanks for sharing

3 months ago ·