Атрибут capture

Атрибут 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, а человеку будет достаточно кликнуть по кнопке, как нужная камера выберется. Приятно!