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.
Written by Brandon Beeks
Related protips
20 Responses
I'd advise to get a look at Capturing tutorial in HTML5 http://www.html5rocks.com/en/tutorials/getusermedia/intro/
@moiseevigor that's a great resource. Thanks for sharing!
thanks...really save my hours..better hv a sample nugget here
This is awesome!
Thank you so much just saved me so much time!
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!?
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 ?
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?
You think this will replace the cordova-camera-plugin ??
Thank you for the share
I have the same problem that you @anjoalre, did you resolve that?
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.
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.
i love you man..., i spent so much time to get a camera access natively...
If i add the code in my website where do i get the photo which was uploaded by public
You save my life! Thanks!
thanks
Wow!! Great post. Thanks for sharing this post here with us.
very helpful!
I can't tell if I can post comments or not OTL
That's a solid approach for this use case. The capture="camera" attribute is indeed the most straightforward way to handle mobile image uploads without introducing external frameworks.
Its key advantage, as you noted, is the seamless integration with existing backend file handling - it removes significant development overhead. At Modsen, we often evaluate this method for client projects where a native app isn't feasible. It's a pragmatic and efficient solution for getting camera functionality into a web-based admin, especially when backward compatibility is not a primary concern.
Thanks for highlighting this. It's a useful technique that doesn't get mentioned enough.
