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

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

27 февраля 2020 HTML

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

Запись видео

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

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

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

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

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

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

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

<input type="file"  accept="video/*" multiple>

Запись звука

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

Если вам нужен консультант по строительству

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

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

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

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

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

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

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

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

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

<input type="file"  accept="image/*,video/*" >

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

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

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

<input type="file" accept="video/*" capture /> отлично работает на мобильных и планшетах, но на обычном компьютере с веб-камерой у меня открывает только диалог выбора видео-файла. Как уже говорилось, чтобы захватить видео с веб-камеры можно использовать метод navigator.getUserMedia() из того же Media Streams API. Метод запрашивает у пользователя разрешение на использование до одного устройства ввода видео (например, камеры или общего экрана) и до одного устройства ввода звука (например, микрофона). Затем можно сохранить, вывести и даже наложить некоторые эффекты на полученный видео поток или сделать снимок.

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

<video autoplay id="video-player"></video>

<script>
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("произошла ошибка"); 
    } 
  ); 
}
</script>
Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:
Остались вопросы по статье? Задайте их прямо сейчас!
Похожие записи
Как конвертировать HTML в Word на JavaScript

Экспортировать HTML-страницу как документ Microsoft Word можно различными способами. Существуют PHP-библиотеки, плагины jQuery. Но когда HTML-файл прост без какой-либо сложной разметки, тогда можно экспортировать HTML-содержимое в формат .doc без особых усилий. Мне даже не нужны сторонние библиотеки. Если вы хотите Читать далее

Сохранение данных в форме после обновления страницы

Часто ли у вас случалось такое, что при заполнении формы на сайте истекал срок действия сеанса или например зависал браузер, после чего приходилось заполнять форму заново?! HTML5 представил концепцию механизмов хранения заполняемых данных в браузере. В хранилище HTML5 есть возможность Читать далее

Использование drag and drop на HTML5

Из всех технологий, которые нужно освоить веб-разработчикам, кажется, что та, которая вызывает наибольшую путаницу и потенциальные проблемы, - это drag ‘n’ drop (перетаскивание). Это не новая технология, она существует уже много лет, но многие разработчики все ещё цепляются за старые Читать далее

Прижать футер с помощью Flexbox

Создание прилипающего футера является одной из самых распространенных задач веб-разработки, которую вы легко можете решить с помощью Flexbox. Без прилипающего футера, если у вас недостаточно содержимого на странице, футер «подпрыгивает» до середины экрана, что может полностью испортить взаимодействие с пользователем. Читать далее

Семантические теги HTML5, которые вы должны использовать

Введение спецификации HTML5 принесло с собой множество новых семантических тегов, которые придают ещё больше смысла тегам HTML. Это означает, что теперь веб-разработчикам нужно меньше придумывать и создавать осмысленные типы тегов для построения структуры своего сайта. Основные семантические теги HTML, такие Читать далее

Коды специальных символов HTML и символы юникода (unicode)

В статье приведена наиболее полная таблица кодов специальных символов HTML и символы юникода (unicode), которые можно использовать для своих проектов и в социальных сетях. Коды специальных символов HTML Чтобы клавиатура была удобной в использовании, она должна быть достаточно компактной. Однако Читать далее

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

  1. vova:

    а можно добавить как-то кнопку, при нажатии на которую последний кадр будет отправляться на бэк? Тобишь мне нужно сделать так, чтобы пользователь навёл камеру, так как ему надо и сделал фотографию, с которой я буду работать на бэке. Заранее спасибо

Добавить комментарий

*

code