On Using The HTML Media Capture in Mobile Browsers

Media Capture is one of the most interesting features in HTML5, especially for mobile devices, it allows you to access the camera and the microphone of the device. HTML Media Capture simply extends the <input> element with a capture attribute.

The capture attribute is a boolean attribute that, if specified, indicates that the capture of media directly from the device's environment using a media capture mechanism is preferred.

The element can capture :

• An image
• A video sequence
• An audio sequence

Capture image

To capture an image you need to set the accept="image/*" and the capture attributes, on the implementation on Chrome for Android is quite differente from to Firefox and Opera, Chrome opens the camera directly while the others opens a menu to select from diffrentes sources.

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

Capture video

To capture a video, accept="video/*" should be also set, same behaviour will happen for Chrome and Firefox.

<input type="file" accept="video/*" capture>

Capture audio

To capture an audio sequence, you need to set audio/* as a value for the accept attribute, which will open the audio recorder application.

<input type="file" accept="audio/*" capture>

I hope you'll like this post and you'll start using the HTML Media Capture in your webapps.