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 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 element with 3 attributes:

  1. creates a file input that lets the user choose one or more files from their device storage
  2. the file input accepts only files with an image/* MIME type
  3. the outward-facing camera should be used
Native camera in mobile browsers — HTML
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.

Native camera in mobile browsers — CSS

Even though you can completely rely on the attributes to open the camera, you need some minimal JavaScript code to process the picture.

When a picture from the camera loads, the 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 attribute of the element, which displays the picture.

Native camera in mobile browsers — JavaScript

Result

Demo using the native camera in mobile browsers

The minimal demo displays a button that opens the camera and the picture you take.

Live demo: https://pixochi.github.io/native-camera-in-mobile-browsers

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store