`capture` Атрибут HTML

Ограниченная доступность

Эта функция не входит в Baseline, поскольку она не работает в некоторых наиболее широко используемых браузерах.

Атрибут capture указывает, что при необходимости следует захватить новый файл, а также какое устройство использовать для захвата нового мультимедийного контента типа, определяемого атрибутом accept.

Значения включают user и environment. Атрибут capture поддерживается для типа поля ввода file.

Атрибут capture принимает в качестве значения строку, указывающую, какую камеру использовать для захвата изображений или видео, если атрибут accept указывает, что поле ввода должно принимать один из этих типов.

Значение	Описание
`user`	Следует использовать фронтальную камеру и/или микрофон.
`environment`	Следует использовать основную камеру и/или микрофон.

Примечание: Ранее capture был логическим атрибутом: если он присутствовал, запрашивалось использование устройств захвата мультимедиа, например камеры или микрофона, вместо выбора файла.

Попробуйте

<label for="selfie">Take a picture of your face:</label>

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

<label for="picture">Take a picture using back facing camera:</label>

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

label {
  display: block;
  margin-top: 1rem;
}

input {
  margin-bottom: 1rem;
}

Примеры

Если задать этот атрибут для поля ввода типа file, операционные системы с микрофонами и камерами отобразят интерфейс, позволяющий выбрать существующий файл или создать новый.

<p>
  <label for="soundFile">What does your voice sound like?:</label>
  <input type="file" id="soundFile" capture="user" accept="audio/*" />
</p>
<p>
  <label for="videoFile">Upload a video:</label>
  <input type="file" id="videoFile" capture="environment" accept="video/*" />
</p>
<p>
  <label for="imageFile">Upload a photo of yourself:</label>
  <input type="file" id="imageFile" capture="user" accept="image/*" />
</p>

Обратите внимание, что на мобильных устройствах это работает лучше; если вы используете настольный компьютер, скорее всего, появится обычное окно выбора файла.

Спецификации

Спецификация
HTML Media Capture> # dfn-capture>

Совместимость с браузерами

	Настольные компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`capture`	Нет	Нет	Нет	Нет	Нет	25	79	14	10	1.5	4.4	10

См. также