В интернете передача аудио и видеоинформации – обычное дело. Но передача в режиме реального времени связана с определенными трудностями. Многие решают их с помощью установки специальных плагинов в браузер, разворачивания медиа-серверов и пр. В этой ситуации технология WebRTC (Web Real-Time Communication) может облегчить задачу.
Поэтому мы решили подготовить цикл статей, о технологии WebRTC, где постараемся осветить базовые принципы ее работы, а также создать рабочее приложение для установки peer-to-peer соединения и передачи одного видео-аудио потока между двумя точками в сети.
В этой статье речь пойдет о том, что из себя представляет данная технология и как она работает.
Основное преимущество технологии в том, что она способна обеспечить онлайн трансляцию аудио- и видеопотока высокого качества в браузере без установки дополнительных программ или плагинов. В настоящее время нет таких готовых решений для браузера. Если мы хотим создать подобное приложение, нам потребуется масса усилий и знаний о принципах действия сетевых протоколов, соединений, маршрутизации и т.д. Хорошая новость заключается в том, что API браузера уже содержит все инструменты для этого, чем значительно упрощает разработку. API содержит механизмы захвата данных с микрофона и камеры, кодирования и раскодирования сигнала, транспортную систему и систему управления сеансами связи.
Приложение WebRTC можно представить следующей схемой с 4-мя уровнями:
Захват камеры и микрофона
Первым шагом в коммуникационной платформе является получение доступа к устройствам, разрешения на их использование и получение потока данных.
Чтобы попробовать, как работает захват можно зайти по следующей ссылке:
Первым делом вы увидите запрос на разрешение доступа к вашим медиа-устройствам.
Трансляция и кодирование медиа-потоков
Далее этот поток преобразуется в мелкие кусочки, которые сжимаются по размеру. Этот процесс называется кодированием, а алгоритм – кодеком. WebRTC использует много кодеков, таких как H.264, Opus, iSAC, VP8. Когда два браузера общаются между собой и обмениваются своими возможностями, они выбирают самый оптимальный из них.
Транспортный уровень
Весьма сложен и отвечает за соединение с удаленным компьютером, доставку сетевых пакетов, их порядок и оптимизацию потерь.
Уровень сессии
Это финальный уровень приложения. Он так же оперирует кодеками и отвечает за управление сессией, ее завершением и реакцией на разные события (сигналы).
WebRTC обеспечивает соединение между браузерами по типу peer-to-peer (точка-точка), это означает что данные передаются непосредственно из браузера в браузер, минуя серверную часть. с минимальной задержкой и высоким быстродействием, что не может быть достигнуто другими типами соединения. Однако, есть возможность использования TURN сервера в качестве транспортного шлюза, при таком типе, соединение можно назвать как peer-TURN-peer.
Получение медиа-потоков от пользователя
Для этой задачи используется функция Javascript getUserMedia из состава API браузера, также известного как MediaStream API.
Это API предоставляет следующие функции:
Создадим нашу первую html-страницу index.html, где определим блок с видео и подключим js скрипт нашего будущего приложения.
Помните, что WebRTC это исключительно часть стандарта HTML5, а значит вы должны использовать те браузеры, которые его поддерживают. Примеры этой статьи тестировались в браузере Chrome.
Теперь создадимновый файл main.js, и напишем следующий код:
function hasUserMedia() {
return !!(navigator.getUserMedia || navigator.webkitGetUserMedia
|| navigator.mozGetUserMedia || navigator.msGetUserMedia);
}
if (hasUserMedia()) {
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getUserMedia({ video: true, audio: true }, function
(stream) {
var video = document.querySelector('video');
video.srcObject = stream;
}, function (err) {});
else {
alert("Извините, но ваш браузер не поддерживает getUserMedia.");
}
В функции hasUserMedia мы проверяем, поддерживает ли наш браузер захват из медиа-устройств. Если да, то вызываем функцию navigator.getUserMedia(settings,clb), куда передаем два параметра.
В первом у нас объект настроек видео и аудио. Во втором – функция обратного вызова, в которую опустится объект stream.
Мы ограничились только двумя параметрами настройки, которые определяют доступность видео и аудиопотока. На самом деле, настроект может быть достаточно много (размер, разрешение, битрейд и пр.) . С полным списком можно ознакомится в официальной документации по адресу https://tools.ietf.org/html/draft-alvestrand-constraints-resolution-03
Управление многими устройствами
Если у нас несколько веб-камер, получить их список можно воспользовавшись функцией MediaSourceTrack. Она принимает колбек, в котором можно провести всю инициализацию потока, перебрав в цикле доступные устройства так:
MediaStreamTrack.getSources(function(sources) {
var audioSource = null;
var videoSource = null;
for (var i = 0; i < sources.length; ++i) {
var source = sources[i];
if(source.kind === "audio") {
console.log("Microphone found:", source.label, source.id);
audioSource = source.id;
} else if (source.kind === "video") {
console.log("Camera found:", source.label, source.id);
ideoSource = source.id;
} else {
console.log("Unknown source found:", source);
}
}
var constraints = {
audio: {
optional: [{sourceId: audioSource}]
},
video: {
optional: [{sourceId: videoSource}]
}
};
navigator.getUserMedia(constraints, function (stream) {
var video = document.querySelector('video');
video.srcObject =stream;
}, function (error) {
console.log("Raised an error when capturing:", error);
});
})
Установка веб-сервера
Установим статический веб-сервер из дистрибутива NodeJS и запустим его:
npm install -g
node-static
Можно сделать это и через Python:
python -m SimpleHTTPServer 8080Теперь заходим в браузер по открытому порту сервера http://localhost:8080 и после того, как появится всплывающее сообщение, кликаем «разрешить» и видим картинку с нашей веб-камеры.
Если нужно сделать фотографию с веб-камеры, необходимо добавить html-элемент canvas (холст).
А потом сформировать 2d-изображение и поместить его на холст.
var canvas = document.getElementById("cnv");
button.onclick = function() {
canvas.getContext("2d").drawImage(video, 0, 0, 300, 300, 0, 0, 300, 300);
var img = canvas.toDataURL("image/png");
};
В функции drawImage мы помещаем фото в нужные координаты холста.
Его размеры можно определить динамически из параметров видео video.clientWidth и video.clientHeight.
Мы даже можем воспользоваться CSS-фильтрами для изменения видео и наложения на него эффектов, например:
А затем, применить эти классы к элементу canvas, установив нужный CSS-класс canvas.className = ‘sepia’.
Если вы хотите передать это изображение на сервер, то можно воспользоваться библиотекой jQuery и сформировать ajax POST запрос, куда поместить наше изображение:
$.ajax({
url: 'http:....',
type: 'POST',
dataType: 'json',
data: { 'data': img },
complete: function(xhr, textStatus) {
....
}
})
Помните, что изображение будет в формате BASE64 и чтобы сохранить картинку на сервере, данные необходимо немного преобразовать, убрав строку “data:image/png;base64,”.
replace('data:image/png;base64,', '', $img);
На этом все, благодарю за ваше внимание. В следующей статье речь пойдет о том, как создать простое WebRTC-приложение. Будет много практики! Подпишитесь на наш блога, чтобы не пропустить следующую публикацию, а также первыми узнавать о самом интересном контенте.
Если вас заинтересовали возможности, которые предоставляет WebRTC-приложение – оставьте заявку на сайте. Специалисты Wezom создадут действительно эффективное решение для вашего бизнеса.
