How to Open the Native Camera in Mobile Browsers
<input /> element.
You can try out my solution on your mobile device: https://pixochi.github.io/native-camera-in-mobile-browsers
The only requirement for using the native camera is the
<input /> element with 3 attributes:
type="file"— creates a file input that lets the user choose one or more files from their device storage
accept="image/*"— the file input accepts only files with an image/* MIME type
capture="environment"— the outward-facing camera should be used
No styling is necessary but the UI looks better if you hide the native file input, and use a customized button with your own style.
Even though you can completely rely on the
When a picture from the camera loads, the
change event is dispatched. That’s where you can access the loaded picture and use it for your use case. This example shows how you can set the
src attribute of the
<image /> element, which displays the picture.