Атрибут capture

Атрибут 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>


        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

2. Атрибут multiple позволяет загружать несколько файлов. Если вы хотите, чтобы пользователь мог загружать несколько изображений с помощью камеры, вы можете использовать следующий код:

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


        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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