Клавиша / esc

Атрибут capture

Направляем камеру или микрофон пользователя 📷

Время чтения: меньше 5 мин

Кратко

Скопировано

Атрибут capture доступен для файловых <input> (тех, что имеют type="file"). Он позволяет выбрать для записи фронтальную или основную камеру телефона пользователя, а также микрофон.

Как пишется

Скопировано

Для атрибута capture доступно два значения:

  • user — камера или микрофон направлены в сторону пользователя;
  • environment — камера или микрофон направлены от пользователя. «Environment» можно перевести как «наружу» или «в сторону окружающей среды».

Если у capture не указано явно, браузер сам решит, что использовать.

А ещё capture внимательно смотрит на атрибут accept, где указан тип файла для загрузки. Это может быть видео, фотография или аудиозапись. Так выглядит <input> для отправки голосового сообщения:

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

        
        
          
        
      

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

Как понять

Скопировано

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

На практике

Скопировано

Запишем видео на основную камеру смартфона:

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

        
        
          
        
      

С другими атрибутами

Скопировано

Атрибут capture можно использовать вместе с другими атрибутами, например:

  1. Атрибут accept позволяет указать типы файлов, которые можно загрузить. К примеру, если вы хотите, чтобы пользователь мог загружать только изображения, вы можете использовать следующий код:
        
          
          <input type="file" accept="image/*" capture>
          <input type="file" accept="image/*" capture>


        
        
          
        
      
  1. Атрибут multiple позволяет загружать несколько файлов. Если вы хотите, чтобы пользователь мог загружать несколько изображений с помощью камеры, вы можете использовать следующий код:
        
          
          <input type="file" accept="image/*" capture multiple>
          <input type="file" accept="image/*" capture multiple>


        
        
          
        
      

Поддержка браузеров

Скопировано

В данный момент не все браузеры поддерживают capture — всего 59.18%. Например, Edge не поддерживают его совсем. Ни один десктопный браузер не поддерживает этот атрибут, но некоторые браузеры андроид и iOS имеют его поддержку. Поэтому, при использовании capture помните, что он работает только в мобильных браузерах и проверяйте поддержку на Can I Use.