HTML capture Attribute

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The capture attribute is used with the <input type="file"> element to control how users interact with the file selection dialog. It allows you to prompt the user to capture a new media file using their device's camera or microphone, rather than simply selecting a file from their storage.

Here's what it does:

When present, the capture attribute indicates the browser should prioritize capturing new media over selecting existing files.
The attribute takes a string value specifying the preferred camera to use for capturing media:
- "user": This value prompts the user to use the front-facing camera, typically for capturing selfies or videos of themselves.
- "environment": This value prompts the user to use the environment-facing camera, usually the back camera on mobile devices, for capturing pictures or videos of their surroundings.

Important considerations:

Browser support for specific capture attribute values might vary depending on the device and browser version.
It's recommended to use the capture attribute in conjunction with the accept attribute, which specifies the allowed media types (e.g., image/* for images, video/* for videos). This ensures the user can only capture media formats supported by the application.
To provide a better user experience, consider offering an option to choose between capturing a new file or selecting an existing one from storage. This gives users more control over the file selection process.

Syntax

<input type="file" capture="value">

Values

value
defines which camera to use for capturing media (image or video) and can be one of the following:
- "user": This indicates the user-facing camera (typically the front camera on mobile devices).
- "environment": This indicates the environment-facing camera (typically the back camera on mobile devices).

Applies To

<input>

Example

HTML

<h3>Take a Selfie</h3>

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

<br><br>

<button type="submit">Upload Selfie</button>

Result

Editor

Browser Support

The following information will show you the current browser support for the HTML capture attribute. Hover over a browser icon to see the version that first introduced support for this HTML attribute.