Can Web Apps Access Mobile Cameras?

With the ever-evolving list of web application capabilities, there is now more incentive than ever to experiment with different available functionalities. With web apps already having offline functionality, single page loading and local storage, you would naturally assume it can connect directly to a phone’s camera.

Plenty of applications rely on the use of mobile phone cameras. In fact, many base their applications around the ability to take a photo. Some might want to edit the contents of a gallery and others may want to use some augmented reality to enhance a camera’s experience. The number of creative possibilities is endless.

Accessing the Camera

While conventional mobile applications have a relatively straightforward process of accessing the user’s camera and gallery. Attempting this on a web application is less common.

As I want to utilize a camera for a future web app of mine, I wanted to find out, how exactly can web access mobile cameras?

Thankfully, it’s very simple, HTML5 has a useful element which allows taking a picture from a mobile device. 

The following will work from iPhone IOs and Android ICS onwards. For the front camera:

<input type="file" name="image" accept="image/*" capture="environment">

For the rear-facing camera:

<input type="file" name="image" accept="image/*" capture="user">

If the user clicks into the input field they will be prompted to use their camera on the site.

This just scratches the surface on the capabilities of PWA’s for both iOS and Android. You can see the possibilities to access devices features on What Web Can Do Today.

Here you can see if your current browser supports various platform features such as Bluetooth, Camera, Location, etc. Most examples come with a code sample and relevant links to documentation.