Атрибут capture

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

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

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Скопировано

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

Пример

Скопировано

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

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

        
        
          
        
      

Как пишется

Скопировано

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

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

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

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

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

        
        
          
        
      

Как понять

Скопировано

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