Захват изображения с камеры с помощью HTML5

С появлением HTML спецификации Media Capture стало возможным получать медиаданные с камеры пользователя так же, как если бы он загрузил на сайт какой-то файл с помощью элемента . Media Capture переопределяет поле для отправки файла если к нему добавить определённые атрибуты. Для десктопных компьютеров можно использовать метод navigator.getUserMedia() про который мы так же поговорим в этой статье.

Запись видео

Если добавить атрибут capture, то сразу откроется приложение камеры, не давая выбрать файл из библиотеки:

Можно указать режим камеры с помощью значений user — фронтальная или environment — основная:

Мультизагрузка видео

Если указать атрибут multiple, то пользователь сможет выбрать сразу несколько видео файлов из библиотеки:

Запись звука

С атрибутом capture возможность выбора готовых записей из библиотеки ограничена. На данный момент не сработало в Safari:

Изображения и фото

Фото только с камеры:

Режим камеры user — фронтальная или environment — основная:

Фото или видео

Фото и видео только с камеры:

Захват фото и видео на десктопах

отлично работает на мобильных и планшетах, но на обычном компьютере с веб-камерой у меня открывает только диалог выбора видео-файла. Как уже говорилось, чтобы захватить видео с веб-камеры можно использовать метод navigator.getUserMedia() из того же Media Streams API. Метод запрашивает у пользователя разрешение на использование до одного устройства ввода видео (например, камеры или общего экрана) и до одного устройства ввода звука (например, микрофона). Затем можно сохранить, вывести и даже наложить некоторые эффекты на полученный видео поток или сделать снимок.

В примере ниже мы добавляем тег и после разрешения на доступ к веб-камере, выведем в него видео-поток:

if(navigator.webkitGetUserMedia!=null) { 
  var options = { 
    video:true, 
    audio:true 
  }; 
  
  // Запрашиваем доступ к веб-камере
  navigator.webkitGetUserMedia(options, 
    function(stream) { 
      // Получаем тег video
      var video = document.getElementById('video-player'); 
      // Включаем поток в тег video
      video.srcObject = stream; 
    }, 
    function(e) { 
      console.log("произошла ошибка"); 
    } 
  ); 
}