getUserMedia API

getUserMedia API из проекта WebRTC благодаря которому такие модули как Flash и Silverlight для захвата аудио и видео с веб-камеры не нужны.

Захват видео и аудио

Существует несколько вариантов использования захвата видео и аудио с веб-камеры. Например, общение в реальном времени, наблюдение за домом или за рабочими, чтобы не уменьшалась производительность труда. Запись книг и уроков, онлайн-курсов для дальнейшего распространения. Еще getUserMedia API можно применить для прозрачности видео или выполнить захват содержания сайта с кодом, смотрите записи «Прозрачность в видео», «Захват содержания».

Сам по себе getUserMedia API способен только захватить аудио и видео, чтобы отправить захват по интернету используйте RTCPeerConnection API, для сохранения данных локально применяется MediaStreamRecorder API.

getUserMedia API полезен как для разработчиков, так и пользователей. Разработчики могут получить доступ к аудио и видео только одним методом. При этом пользователям не нужно устанавливать дополнительное программное обеспечение. Для пользователей это означает, уменьшение времени загрузки страницы и расширенное использование программного обеспечения для технически подкованных людей.

Метод getUserMedia() относится к элементам window.navigator, он принимает success и failure в качестве параметров обратного вызова.

Аудио и видео передаётся следующими запросами:

navigator.getUserMedia(
{
video: true,
audio: true
}
)

Значение true запрос потока, false без запроса. Для большего контроля над потоком, значения могут быть с ограничением. Где мы можем указать источник видеосигнала и разрешение видео 1280 x 720 или 320 x 180.

Значение с ограничением имеет два свойства:

  • mandatory (обязательное свойство) набор ограничений с требованиями, без них будет ошибка обратного вызова.
  • optional (не обязательно) массив элементов для ограничений.

Предположим, нам нужно аудио и видео с высоким разрешением и частотой 30 или 60 кадров в секунду.

Для выполнения этой задачи нужно сделать следующее:

{
video: {
mandatory: {
minWidth: 1280,
minHeight: 720,
minFrameRate: 30
},
optional: [
{ minFrameRate: 60 }
]
},
audio: true
}

Более подробную информацию о свойствах, Вы можете найти на странице технические характеристики.

Два других аргумента для обратного вызова. Если полученный поток успешно передается в функцию обратного вызова, Вы увидите видео, если нет, будет ошибка MediaError, содержание которой информация о ошибке.

Демонстрация

В этом разделе демонстрация работы getUserMedia API с параметрами. После разрешения пользователем доступа к потоку, всё что захвачено с веб-камеры и микрофона будет передаваться на экран и динамики. К элементу видео HTML5 будут добавлены две кнопки: одна для захвата видео, а другая для остановки потока.

getUserMedia API для захвата аудио и видео
Захват аудио и видео с веб камеры с помощью getUserMedia

Если браузер не поддерживает getUserMedia API, на мониторе появляется сообщение “Ваш браузер не поддерживает getUserMedia API”, и отключит кнопки. Если браузер поддерживает getUserMedia API, кнопки будут активны. Затем, будет вызов аудио и видео с устройства пользователя. Если запрос выполнен успешно, мы увидим поток данных с помощью видеотега. В противном случае будет ошибка в консоли. Кнопка “Стоп” остановит видео в режим паузы, и поток видеозахвата будет остановлен.

Демо

Поддержка

Мы не должны игнорировать проблемы совместимости getUserMedia API с браузерами, используйте getUserMedia.js который решит проблему поддержки.