How to Open the Native Camera in Mobile Browsers

Without using JavaScript

You don’t need any JavaScript library or any complicated solutions to open the native camera and take pictures in mobile browsers. It can be accomplished with a combination of attributes for the <input /> element.

You can try out my solution on your mobile device: https://pixochi.github.io/native-camera-in-mobile-browsers

Implementation

The only requirement for using the native camera is the <input /> element with 3 attributes:

1. type="file" — creates a file input that lets the user choose one or more files from their device storage
2. accept="image/*" — the file input accepts only files with an image/* MIME type
3. capture="environment" — the outward-facing camera should be used

Native Android camera

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 input attributes to open the camera, you need some minimal JavaScript code to process the picture.

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.