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.

<input type="file" accept="image/*" capture="user" />
<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 Comment

Your email address will not be published.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.