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.

Leave a Reply

Your email address will not be published. Required fields are marked *