HTML capture Attribute

Description

The capture attribute in HTML

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

• valuedefines 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

The capture attribute can be used on the following html elements.

• <input>

Example

<h3>Take a Selfie</h3>

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

<br><br>

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

Browser Support

The following table will show you the current browser support for the HTML capture Attribute.

Desktop
x	x	x	x	x

Tablets / Mobile
25	79	14	10	1.5	4.4

Last updated by CSSPortal on: 25th March 2024