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.
The minimal demo displays a button that opens the camera and the picture you take.
You can get inspired or build upon the minimal demo:
You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or…
You may like
Deploy Your React App for Free Without Difficulty
How to deploy a React app to GitHub Pages in no time