Last Updated: November 17, 2023
·
341K
· 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.

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

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

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

over 1 year ago ·

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

over 1 year ago ·

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.

over 1 year ago ·

This is a great article. Thanks for sharing. I have one question thought.
in Adnroid, this solution gives me options for camera along with files as well. I just want to open straight camera in android. how do I do this? it always comes up with image chooser options.

over 1 year ago ·

i love you man..., i spent so much time to get a camera access natively...

over 1 year ago ·

If i add the code in my website where do i get the photo which was uploaded by public

over 1 year ago ·

You save my life! Thanks!

over 1 year ago ·

thanks

over 1 year ago ·

Wow!! Great post. Thanks for sharing this post here with us.

over 1 year ago ·

very helpful!

8 months ago ·

I can't tell if I can post comments or not OTL

4 months ago ·