capture
The capture attribute in HTML instructs file upload input fields to utilize the device's camera or microphone for direct media capture instead of selecting files from storage.
capture attribute
The capture attribute for file inputs specifies which camera to use for capturing media. Values: user (front camera) or environment (back camera).
| Value | Description |
|---|---|
user | The user-facing camera and/or microphone should be used. |
environment | The outward-facing camera and/or microphone should be used |
Syntax
index.html
<input type="file" capture="value" />
Examples
When using the capture attribute on a file input, the device's camera or microphone can be used to create new media.
Take a Selfie
index.html
<h3>Take a Selfie</h3>
<input type="file" name="selfie" capture="user" accept="image/*">
<br><br>
<button type="submit">Upload Selfie</button>
The
capture attribute was once a boolean attribute that, when included, triggered the device's media capture devices (like the camera or microphone) instead of asking for a file input.Value
- The value attribute determines which camera to utilize for capturing media, such as images or videos. It can have one of these options:
- user: Refers to the front-facing camera, commonly used for selfies or video calls.
- environment: Refers to the rear-facing camera, typically used for taking photos or videos of the surroundings.
Applies To
The capture attribute can be applied to the following HTML elements.
See also
- Using files from web applications
- File API
- HTMLInputElement.files
Conclusion
The capture attribute in HTML enables file inputs to directly access the device's camera or microphone for media capture. It can specify either the front-facing camera (user) or the back-facing camera (environment). This feature simplifies media uploads by allowing users to take pictures or record videos directly within a web application.