HTML media capture
The capture HTML attribute for <input type="file"> elements allows the user to capture media using the device's camera or microphone. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The capture HTML attribute for <input type="file"> elements allows the user to capture media using the device's camera or microphone. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| | | | | 25 | 10 | |
| HTML attribute | ||||||
| The capture attribute specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the accept attribute. | | | | | 25 | 10 |
Syntax
<!-- Camera activation --> <input type="file" accept="image/*" capture="environment"> <!-- Front camera --> <input type="file" accept="image/*" capture="user"> <!-- Microphone activation --> <input type="file" accept="audio/*" capture>Use cases
Improve form input
Use HTML media capture to make data entry more efficient, guided, or predictable inside real forms.
Reduce friction
Apply HTML media capture when the browser can help users complete a task with fewer mistakes or less repetitive work.
Cautions
- Test HTML media capture in your target browsers and input environments before depending on it as a primary behavior.
- Provide a fallback path or acceptable degradation strategy when support is still limited.
Accessibility
- Keep labels, instructions, validation, and keyboard behavior clear so the enhancement helps rather than surprises users.
Related links
Powered by web-features