HTML capture Attribute

HTML capture Attribute

The HTML capture attribute provides a hint that a new media file should be captured using a device camera or microphone. It is used with <input type="file"> and works with the accept attribute to indicate the type of media to capture.

Syntax

The capture attribute is used on an <input> element whose type is file. The accept attribute identifies the type of media that should be captured.

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

The value of capture provides a preferred facing mode for the device's media capture mechanism.

Attribute Values

The capture attribute is an enumerated attribute with two keywords for selecting a preferred media capture direction.

If the requested facing mode is unavailable, the browser or device may use its default media capture mechanism instead.

Elements That Use the capture Attribute

The capture attribute applies to the <input> element when it is used as a file upload control.

Using the capture Attribute

The capture attribute can be used when a form is intended to receive media captured directly from the user's device.

<label for="photo">Take a Photo:</label>
<input type="file" id="photo" name="photo" accept="image/*" capture="environment">

On a supported mobile device, activating the file control may offer the device's camera for taking a new photo. The exact interface is controlled by the browser and operating system.

Using the User-Facing Camera

Use capture="user" when the user-facing camera is preferred, such as when asking the user to take a photo of themselves.

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

On devices with front and rear cameras, the user-facing camera is typically the camera directed toward the person using the device.

Using the Environment-Facing Camera

Use capture="environment" when the outward-facing camera is preferred, such as when the user needs to photograph an object or their surroundings.

<input type="file" accept="image/*" capture="environment">

The requested camera is a preference. If the device cannot provide the requested facing mode, it may use another available capture mechanism.

Capturing Audio

The capture attribute can also be used with an audio file type to request capture using a microphone.

<input type="file" accept="audio/*" capture="user">

Support and the exact capture interface depend on the browser, operating system, and available hardware.

capture and accept

The capture and accept attributes work together. The accept attribute indicates the media type, while capture provides a preferred media capture direction.

<!-- Capture an image -->
<input type="file" accept="image/*" capture="environment">

<!-- Capture video -->
<input type="file" accept="video/*" capture="environment">

<!-- Capture audio -->
<input type="file" accept="audio/*" capture="user">

If the accept value does not identify a media type for which the device has an appropriate capture mechanism, the browser may behave as though the capture attribute were not present.

Mobile and Desktop Devices

The capture attribute is primarily useful on mobile devices that have built-in cameras and microphones. On supported devices, the file picker may provide an interface for capturing new media.

Desktop browsers commonly provide an ordinary file picker instead, and support for the attribute varies considerably between browsers and platforms. A form should therefore continue to work when the capture hint is ignored.

Common Mistakes

Do not treat the modern capture attribute as a Boolean attribute. Use user or environment when requesting a preferred facing mode.

<!-- Preferred modern form -->
<input type="file" accept="image/*" capture="environment">

Do not assume that capture guarantees that a particular camera or microphone will be used. The requested facing mode is a hint, and the browser may fall back to another available capture mechanism.

Do not rely on capture without an appropriate accept value. The media type identified by accept helps determine which capture mechanism is appropriate.

Browser Support

Baseline: Limited availability indicates that a feature is not yet available in all core browsers. Use these features with caution because they may only work in select browsers, so additional compatibility checks may be needed before general use.

The capture attribute on <input type="file"> has limited availability. Behavior varies considerably between desktop and mobile browsers and depends on the available media-capture devices.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the capture Attribute

The example provides file controls that request the user-facing and environment-facing cameras. The results are easiest to observe on a supported mobile device with front and rear cameras.

Summary

The HTML capture attribute is used with <input type="file"> to request media capture from a device camera or microphone. The user value requests a user-facing capture mechanism, while environment requests an outward-facing one. The attribute works with accept to identify the type of media being captured, but browser and device support varies.