getUserMedia API

Эта статья познакомит Вас с getUserMedia — функция API, из проекта WebRTC. Благодаря WebRTC и связанные с ним API, такие модули как Flash и Silverlight для захвата аудио и видео с веб-камеры, не нужны.

Оглавление:
  1. Захват видео и аудио
  2. Демонстрация getUserMedia API
  3. Поддержка

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

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

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

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

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

Хотя getUserMedia API, по состоянию на 07 января 2014, всё-таки признан стандартом W3C. API предоставляет только один метод; getUserMedia(), который относится к элементам window.navigator. Метод принимает success, failure в качестве параметров обратного вызова. Элемент имеет свойства audio и video. Это логическое значение, где true означает запрос потока аудио или видео, а false без запроса потока.

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

{
  video: true,
  audio: true
}

Кроме того, значение может быть с Constraints Условия ограничений элементов. Этот тип элементов даёт нам больше контроля над потоком. Мы можем указать источник видеосигнала с высоким разрешением, например 1280 x 720, или с маленьким, например 320 x 180. Каждое ограничение элементов содержит два свойства: mandatory и optional.

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

optional, представляет собой массив элементов, указанных в наборе ограничений, требования которых должны выполнятся, но если они не смогут быть реализованы, будут игнорироваться.

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

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

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

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

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

к меню ↑

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

В этом разделе я покажу вам демонстрацию с использованием getUserMedia API, что бы Вы увидели как работает getUserMedia API и конкретно посмотреть его параметры. Цель этой демо-программы создание “зеркала”, в том смысле, что все, что захвачено с веб-камеры и микрофона будет передаваться на экран и аудио-динамики. Мы будем спрашивать у пользователя разрешение доступа к мультимедийному потоку, а затем выводить их с помощью простой разметки видео HTML5. К элементу видео HTML5 будут добавлены две кнопки: одна для воспроизведения видео, а другая чтобы остановить поток.

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

Код демонстрации getUserMedia API написан Aurelio De Rosa:

Демо

Код:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Демонстрация getUserMedia API</title>
<style>
body {
max-width: 500px;
margin: 2em auto;
font-size: 20px;
}
h1 {
text-align: center;
}
.buttons-wrapper {
text-align: center;
}
.hidden {
display: none;
}
#video {
display: block;
width: 100%;
}
.button-demo {
padding: 0.5em;
display: inline-block;
margin: 1em auto;
}
.author {
display: block;
margin-top: 1em;
}

</style>
</head>
<body>
<h1>Демонстрация getUserMedia API</h1>
<video id="video" autoplay controls></video>
<div class="buttons-wrapper">
<button id="button-play-gum" class="button-demo" href="#">Воспроизведение</button>
<button id="button-stop-gum" class="button-demo" href="#">Стоп</button>
</div>
<span id="gum-unsupported" class="hidden">Ваш браузер не поддерживает getUserMedia API</span>
<span id="gum-partially-supported" class="hidden">Ваш браузер поддерживает getUserMedia API частично (только видео)</span>
<script>
var videoStream = null;
var video = document.getElementById("video");

// Поддержка браузерами
window.navigator = window.navigator || {};
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
null;

if (navigator.getUserMedia === null) {
document.getElementById('gum-unsupported').classList.remove('hidden');
document.getElementById('button-play-gum').setAttribute('disabled', 'disabled');
document.getElementById('button-stop-gum').setAttribute('disabled', 'disabled');
} else {
// Опера <= 12.16 принимает direct stream.
// Подробнее об этом здесь: http://dev.opera.com/articles/view/playing-with-html5-video-and-getusermedia-support/
var createSrc = window.URL ? window.URL.createObjectURL : function(stream) {return stream;};

// Опера <= 12.16 поддерживает только видео.
var audioContext = window.AudioContext ||
window.webkitAudioContext ||
null;
if (audioContext === null) {
document.getElementById('gum-partially-supported').classList.remove('hidden');
}

document.getElementById('button-play-gum').addEventListener('click', function() {
// Захват аудио и видео с устройства пользователя
navigator.getUserMedia({
video: true,
audio: true
},
function(stream) {
videoStream = stream;
// Stream the data
video.src = createSrc(stream);
video.play();
},
function(error) {
console.log("Ошибка захвата видео: ", error.code);
});
});
document.getElementById('button-stop-gum').addEventListener('click', function() {
// Пауза
video.pause();
// Стоп
videoStream.stop();
});
}
</script>
</body>
</html>
к меню ↑

Поддержка

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