click fraud detection
click fraud detection
Blog Case

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

BLOG
CASE
2855
4.8/ 5stars
4.8/5

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

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

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

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

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

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

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

У ВАС ОСТАЛИСЬ ВОПРОСЫ?

Оставьте ваши контактные данные. Наш менеджер свяжется и проконсультирует вас.

ПОЛУЧИТЬ КОНСУЛЬТАЦИЮ

Наш менеджер свяжется с Вами в ближайшее время

4.8/5
Полезность
Проголосовали 5
Как вам статья?
Дмитрий Жариков
Дмитрий Жариков
Возможно
Бизнесу, бурлящему в технологиях, битвах корпораций, ежедневных открытиях, стратегическом планировании и построении многоступенчатой иерархии, сейчас,…
Wezom
Wezom
Несмотря на растущую популярность и востребованность разработки мобильных приложений, технологии веб-разработки развивались не менее стремительно.
Дмитрий Жариков
Дмитрий Жариков
Что такое медийная реклама? Это способ рекламы онлайн, при котором производится размещение баннеров различного размера…
Wezom
Wezom
Давайте начнем
беседу!
КОММЕНТАРИИ0
ОСТАВИТЬ КОММЕНТАРИЙ К СТАТЬЕ
ПОДПИСЫВАЙТЕСЬ НА РАССЫЛКУ АЙТЫЖБЛОГ
ХОТИТЕ ПОЛУЧАТЬ 
ИНТЕРЕСНЫЕ СТАТЬИ?
СЛЕДИТЕ ЗА НАМИ В СОЦИАЛЬНЫХ СЕТЯХ