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
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>
To capture a video,
accept="video/*" should be also set, same behaviour will happen for Chrome and Firefox.
<input type="file" accept="video/*" capture>
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.