Пиринговый видеочат на базе WebRTC

RSS, Twitter, Vkontakte, Facebook

p2p видеочат

Демонстрационный образец пирингового видеочата

Автор: Vladimir Tkachenko

Источник: http://www.lessons-tva.info/

Цель этой статьи — на демонстрационном образце пирингового видеочата (p2p видеочата) ознакомиться с его структурой и принципом работы. Для этой цели воспользуемся многопользовательским демонстрационным образцом пирингового видеочата webrtc.io-demo. Его можно скачать по ссылке: https://github.com/webRTC/webrtc.io-demo/tree/master/site.

Необходимо отметить, что GitHub — это сайт или веб-сервис для совместной разработки Web-проектов. На нем разработчики могут размещать коды своих разработок, обсуждать их и общаться друг с другом. Кроме того, некоторые крупные IT-компании размещают свои официальные репозитории на этом сайте. Сервис является бесплатным для проектов с открытым исходным кодом. GitHub - это хранилище библиотек открытого, свободного исходного кода.

Итак, скачанный с GitHub демонстрационный образец пирингового видеочата, разместим на диске C персонального компьютера в созданной директории для нашего приложения "webrtc_demo".

Структура пирингового видеочата или p2p видеочата
Рис. 1

Как следует из структуры (рис.1) пиринговый видеочат состоит из клиентского script.js и серверного server.js скриптов, реализованных на языке программирования JavaScript. Скрипт (библиотека) webrtc.io.js (CLIENT) - обеспечивает организацию коммуникаций в реальном времени между браузерами по одноранговой схеме: "клиент-клиент", а webrtc.io.js (CLIENT) и webrtc.io.js (SERVER), используя протокол WebSocket, обеспечивают дуплексную связь между браузером и веб-сервером по архитектуре "клиент-сервер".

Скрипт webrtc.io.js (SERVER) входит в библиотеку webrtc.io и находится в директории node_modules\webrtc.io\lib. Интерфейс видеочата index.html реализован на HTML5 и CSS3. Содержимое файлов приложения webrtc_demo можно посмотреть одним из html-редакторов, например "Notepad++".

Принцип работы видеочата будем проверять в файловой системе ПК. Для запуска сервера (server.js) на ПК необходимо установить среду выполнения node.js. Node.js позволяет запускать JavaScript-код вне браузера. Скачать node.js можно по ссылке: http://nodejs.org/ (версия v0.10.13 на 15.07.13). На главной страничке сайта node.org щелкаем на кнопке download и переходим на http://nodejs.org/download/. Для пользователей windows сначала скачиваем win.installer (.msi), затем запускаем win.installer (.msi) на ПК, и устанавливаем nodejs и "npm package manager" в директорию Program Files.


Установка node.js на ПК для отладки видеочата
Рис. 2

Таким образом, node.js состоит из среды разработки и выполнения JavaScript кода, а также из набора внутренних модулей, которые можно установить с помощью менеджера или диспетчера пакетов npm.

Для установки модулей необходимо в командной строке из директории приложения (например, "webrtc_demo") выполнить команду: npm install имя_модуля. В процессе установки модулей npm-менеджер создает папку node_modules в директории, из которой была выполнена установка. В процессе работы nodejs автоматически подключает модули из директории node_modules.

Итак, после установки node.js, открываем командную строку и обновим модуль express в папке node_modules директории  webrtc_demo с помощью менеджера пакетов npm:

C:\webrtc_demo>npm install express

Модуль express - это веб-фреймворк для node.js или веб-платформа для разработки приложений. Чтобы иметь глобальный доступ к express, можно установить его таким образом: npm install -g express.

Затем обновим модуль webrtc.io:

C:\webrtc_demo>npm install webrtc.io

Затем в командной строке запускаем сервер: server.js:

C:\webrtc_demo>node server.js

Запуск сервера server.js в командной строке ПК для видеочата
Рис. 3

Все, сервер работает успешно (рисунок 3). Теперь с помощью веб-браузера можно обратиться к серверу по ip-адресу и загрузить веб-страницу index.html, с которой веб-браузер будет извлекать код клиентского скрипта - script.js и код скрипта webrtc.io.js, и выполнять их. Для работы пирингового видеочата (для установки соединения между двумя браузерами) необходимо с двух браузеров, поддерживающих webrtc, обратиться по ip-адресу к сигнальному серверу, работающему на node.js.

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

Запуск сервера server.js в командной строке ПК для видеочата
Рис. 4

После щелчка на кнопке "Разрешить" подключаются камера и микрофон для мультимедийное общения. Кроме того, через интерфейс видеочата можно общаться текстовыми данными (рис. 5).

Запуск сервера server.js в командной строке ПК для видеочата
Рис. 5

Необходимо отметить, что сервер не принимает участия в передаче информационных потоков между браузерами. Сервер является сигнальным, и в основном предназначен для установки соединения между браузерами пользователей. Для работы серверного скрипта server.js, обеспечивающего WebRTC-сигнализацию, используется Node.js.