click fraud detection
click fraud detection
0 800 755 007
(Бесплатно по Украине)
Blog Case

Использование WebRTC и Tornado сокет-сервера в веб-приложениях

BLOG
CASE
285
0
5/ 5stars
5/5

В интернете передача аудио и видеоинформации – обычное дело. Но передача в режиме реального времени связана с определенными трудностями. Многие решают их с помощью установки специальных плагинов в браузер, разворачивания медиа-серверов и пр. В этой ситуации технология WebRTC (Web Real-Time Communication) может облегчить задачу.

Поэтому мы решили подготовить цикл статей, о технологии WebRTC, где постараемся осветить базовые принципы ее работы, а также создать рабочее приложение для установки peer-to-peer соединения и передачи одного видео-аудио потока между двумя точками в сети.

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

Какую роль играет WebRTC в современном вебе и как мы можем это использовать

Основное преимущество технологии в том, что она способна обеспечить онлайн трансляцию аудио- и видеопотока высокого качества в браузере без установки дополнительных программ или плагинов. В настоящее время нет таких готовых решений для браузера. Если мы хотим создать подобное приложение, нам потребуется масса усилий и знаний о принципах действия сетевых протоколов, соединений, маршрутизации и т.д. Хорошая новость заключается в том, что API браузера уже содержит все инструменты для этого, чем значительно упрощает разработку. API содержит механизмы захвата данных с микрофона и камеры, кодирования и раскодирования сигнала, транспортную систему и систему управления сеансами связи.

Приложение WebRTC можно представить следующей схемой с 4-мя уровнями:

Захват камеры и микрофона

Первым шагом в коммуникационной платформе является получение доступа к устройствам, разрешения на их использование и получение потока данных.

Чтобы попробовать, как работает захват можно зайти по следующей ссылке:

https://apprtc.appspot.com/

Первым делом вы увидите запрос на разрешение доступа к вашим медиа-устройствам.

Трансляция и кодирование медиа-потоков

Далее этот поток преобразуется в мелкие кусочки, которые сжимаются по размеру. Этот процесс называется кодированием, а алгоритм – кодеком. WebRTC использует много кодеков, таких как H.264, Opus, iSAC, VP8. Когда два браузера общаются между собой и обмениваются своими возможностями, они выбирают самый оптимальный из них.

Транспортный уровень

Весьма сложен и отвечает за  соединение с удаленным компьютером, доставку сетевых пакетов, их порядок и оптимизацию потерь.

Уровень сессии

Это финальный уровень приложения. Он так же оперирует кодеками и отвечает за управление сессией, ее завершением и реакцией на разные события (сигналы).

WebRTC обеспечивает соединение между браузерами по типу peer-to-peer (точка-точка), это означает что данные передаются непосредственно из браузера в браузер, минуя серверную часть. с минимальной задержкой и высоким быстродействием, что не может быть достигнуто другими типами соединения. Однако, есть возможность использования TURN сервера в качестве транспортного шлюза, при таком типе, соединение можно назвать как peer-TURN-peer.

Этапы установки соединения

Получение медиа-потоков от пользователя

Для этой задачи используется функция Javascript getUserMedia из состава API браузера, также известного как MediaStream API.

Это API предоставляет следующие функции:

  • получение потока stream видео и аудио;
  • возможность выбора между подключенными к компьютеру устройствами;
  • обеспечивает безопасность и не допускает удаленное использование устройств без разрешения пользователя.

Создадим нашу первую 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 создадут действительно эффективное решение для вашего бизнеса.

5/5
Проголосовало людей: 1
СОДЕРЖАНИЕ
СТАТЬИ
Какую роль играет WebRTC в современном вебе и как мы можем это использовать
Этапы установки соединения
Пишем сигнальный сервер Tornado
Итак, это третья и последняя статья нашего цикла, где речь. В предыдущих двух мы рассматривали…
Дмитрий Жариков
Дмитрий Жариков
Кейс: Оптовые поставки товаров
Как мы сделали ребрендинг сайта известной компании TopChinaOpt, которая занимается оптовыми поставками и заказами продукции…
Полина Приходько
Полина Приходько
Как создать простое WebRTC-приложение
Мы продолжаем наш цикл статей о WebRTC, в прошлый раз мы говорили об использовании технологии…
Дмитрий Жариков
Дмитрий Жариков
Автор
285
0
Дмитрий Жариков
Дмитрий
Жариков
Возможно
Что общего между психологией и уровнем продаж? Гораздо больше, чем может показаться на первый взгляд.…
Елена Пименова
Елена Пименова
Как сделать минималистичный сайт с плоским дизайном, карточками и изображениями высокого разрешения? В этом руководстве…
Галина Назарова
Галина Назарова
Несколько полезных советов, которые помогут вам зайти на запрещенные соцсети и ресурсы и сохранить бизнес…
Wezom
Wezom
Оставить комментарий
к статье
ПОДПИСЫВАЙТЕСЬ НА РАССЫЛКУ АЙТЫЖБЛОГ
ХОТИТЕ ПОЛУЧАТЬ 
ИНТЕРЕСНЫЕ СТАТЬИ?
Уже подписались 232 человек
313
ПОПИСЧИКОВ
ЧИТАТЬ
4269
ПОПИСЧИКОВ
СЛЕДИТЬ
10139
ПОПИСЧИКОВ
СЛЕДИТЬ