How to Access Mobile’s Camera Using HTML5

Each phone has a built-in Camera app which can be used to take a photo or record a video. However, they are triggered via app shortcut. What if you want users to access camera feature while visiting your website?

This is simpler than you think of.

//front-camera
<input type="file" accept="image/*" capture="user" />
//rear-camera
<input type="file" accept="image/*" capture="environment" />

This field is just a normal File field so you don’t need to handle your form differently. Remember that this field only works with iOS6+ or Android 3.0+, which is not an issue anymore. Devices produced in recent years run on a higher OS version.

In case you want to record video or audio, below are 2 neccessary HTML5 fields.

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

In case you want to control the camera better, WebCodeCamJS can be used.

It is a JavaScript library which handles camera input. WebCodeCamJS is very simple usage (but more complex than basic HTML5), has some options for optimal result, and is optimized for most modern browsers.