Коммуникационные облачные Web сервисы на основе WebRTC

RSS, Twitter, Vkontakte, Facebook

OpenTok, PubNub и WebRTC

Облачные платформы OpenTok и PubNub для разработки коммуникационных сервисов на основе WebRTC

Автор: Владимир Ткаченко

Источник: Обучение в интернет

В настоящее время Web Video Chats становятся все более и более популярными. Web Video Chat — это веб-приложение для диалогового общения, построенное на основе Web-сервера и браузеров.

Из всех существующих технологий построения Web видеочатов (Ajax; Java; Flash-технологии; ASP.Net + Silverlight; HTML5 + JavaScript на базе WebRTC API и др.) наиболее перспективной технологией является WebRTC API. Web чаты, построенные на базе технологии WebRTC, обеспечивают качественную передачу текста, голоса, видео и данных (файлов) без установки в браузеры дополнительных плагинов или расширений. Основными элементами видеочата на WebRTC является браузер и контактный сервер.

Браузер, поддерживающий WebRTC, становится единым интерфейсом для всех пользовательских устройств (ПК, смартфонов, айпадов, IP-телефонов, мобильных телефонов и т.д.), которые работают с коммуникационными сервисами. WebRTC с WebSocket, HTML5, CSS3 и JavaScript позволяют создавать веб-коммуникационные сервисы нового поколения. Технология WebRTC реализуется тремя интерфейсами JavaScript API.

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

В связи с тем, что поддержка WebRTC осуществляется не всеми хостингами, для реализации коммуникационных приложений на основе WebRTC API и интеграции их в веб-узлы (веб-сайты) сети Интернет можно использовать специальные платформы, поддерживающие WebRTC и предоставляющие APIs и SDKs .

API обеспечивает взаимодействие коммуникационных приложений с платформой (Web сервисом), предоставляющей этот API, а SDK обеспечивает разработку коммуникационных приложений, которые могут взаимодействовать с платформой, предоставляющей этот SDK.

К таким платформам относятся: OpenTok от TokBox, PubNub, VoxImplant, Twilio, SkyWay от NTT Communications, Kandy.io, SightCall и т.д. Следует отметить, что для создания контактного сервера можно развернуть Node.js для веб-коммуникационных приложений на арендованном виртуальном сервере VPS или использовать хостинги облачных платформ (PaaS), которые поддерживают проекты на базе Node.js, например, OpenShift/Red Hat, Heroku/Salesforce, AWS Elastic Beanstalk/Amazon и т.д.

Кроме того, для создания коммуникационного приложения можно приобрести платформу Flashphoner Web Call Server (серверное программное обеспечение, предназначенное для организации браузерных онлайн-трансляций аудио- и видео-потоков), которая основана на HTML5 Websockets, WebRTC и Flash технологии, и установить ее на веб-сервер под OC Linux или арендованный виртуальный сервер VPS. В настоящее время компания Flashphoner развернула свой WebRTC сервер (Web Call Server 5) на облачном хостинге Amazon Web Services.

В данном обзоре рассмотрим наиболее популярные облачные коммуникационные Web-сервисы на основе технологии WebRTC - OpenTok от TokBox и PubNub.

OpenTok от TokBox

OpenTok - это облачная платформа PaaS (платформа как услуга), которая является ведущей коммуникационной платформой WebRTC для интеграции в веб-сайты и мобильные приложения видео коммуникаций и средств обмена сообщениями. OpenTok имеет распределенную инфраструктуру, которая содержит центры обработки данных по всему миру.

Открытая платформа OpenTok от TokBox обеспечивает разработчикам возможность встраивать кроссплатформенные видеочаты на основе WebRTC API в Web приложения (веб-сайты), Java/Android и ОС IOS приложения.

Архитектура OpenTok состоит из клиентской части библиотеки WebRTC OpenTok (например, OpenTok.js), которая обеспечивает встраивание видеосвязи в клиентскую часть приложения (веб-страницу) и комплект средств (OpenTok Client SDKs) для разработки клиентских приложений (JavaScript/Web приложений, ОС Java/Android и ОС IOS).

Кроме того, составной частью архитектуры OpenTok являются серверные SDK (OpenTok Server SDKs), которые предназначены для разработки серверной инфраструктуры (для управления и аутентификации пользователей) приложения, которое обеспечивает динамическую генерацию уникальных идентификаторов сеансов ID OpenTok (sessionId) и маркеров (token) для каждого пользователя, а также работу с архивами OpenTok. Web сервер передает соответствующий идентификатор сеанса и маркер, который клиент может затем использовать для подключения к сессии.

Серверные SDKs OpenTok доступны для основных языков программирования серверной части приложений: Java, .NET, Node.js, PHP, Python, Ruby. Следует отметить, что если для серверной части приложения требуется другой язык программирования, который не входит в перечисленный список, то TokBox предоставляет OpenTok REST API для создания сессий OpenTok и работы с архивами OpenTok.

Таким образом, для создания коммуникационных приложений для узлов Интернет следует использовать серверные SDKs OpenTok в сочетании с клиентской библиотекой WebRTC OpenTok и средствами OpenTok Client SDKs.

Видеочат на базе платформы OpenTok

Чтобы использовать платформу OpenTok для создания видеочата WebRTC, встроенного в узел сети Интернете, в первую очередь, необходимо создать учетную запись на TokBox.com. Бесплатная учетная запись на OpenTok действует в течение тридцати дней. Зарегистрированный пользователь имеет возможность получить ключ API (ApiKey), необходимый для разработки коммуникационного приложения OpenTok. Ключ API идентифицирует учетную запись разработчика OpenTok.

Используя руководство разработчика OpenTok (https://tokbox.com/developer/guides/) в аккаунте разработчика TokBox можно создать коммуникационное приложение (веб-страницу видеочата) с помощью OpenTok Client SDKs. Чтобы использовать платформу OpenTok для приложения, необходимо включить библиотеку OpenTok.js в веб-страницу.

https://static.opentok.com/webrtc/ .../opentok.js

Идентификатор сеанса (SESSIONID) и маркер (token) необходимые для функционирования приложения обычно создаются программно на Web сервере с одним из серверных SDKs (OpenTok Server SDKs).

Но для создания тестовой версии приложения без серверных SDKs OpenTok, можно на основе ключа API (ApiKey) получить идентификатор сеанса и маркер для этого идентификатора сессии вручную с помощью панели инструментов разработчика. Клиенту нужен маркер, который дает ему доступ к сессии.

Образцы таких переменных как ключ "apiKey", идентификатор сессии "sessionId" и маркера "token" имеют вид:

var apiKey = '17493650';
var sessionId = '2_MX40NT...tWXR-UH4';
var token = 'T1==cGFyd...2RhdGE9';

После создания объекта сеанса с идентификатором сеанса (SESSIONID) и маркера (token), приложение инициализирует объект сессии.

var session = OT.initSession(apiKey, sessionId);

Затем осуществляется подключение клиента к сеансу и публикация аудио и видео потоков:

session.connect(token, function(error) {
publisher = OT.initPublisher( "publisher");
session.publish(publisher);
});

После подключения клиента к сеансу приложение инициализирует объект Publisher OpenTok и публикует аудио и видео поток для данной сессии, чтобы его могли увидеть другие клиенты.

Далее приложение должно слушать события и подписаться на видео потоки, созданные другими клиентами в сеансе с использованием метода Session.subscribe ():

session.on( {
streamCreated: function(event) {
session.subscribe(event.stream, "subscriber");
}});

Таким образом, в соответствии с руководством разработчика можно создать основу видеочата WebRTC на базе платформы OpenTok, который можно внедрить на свой сайт. На рисунке 2 представлен интерфейс скриншота этого видеочата на WebRTC, созданного в аккаунте разработчика TokBox.

Далее необходимо создать серверную часть видеочата, используя OpenTok Server SDKs для одного из языков программирования. OpenTok Server SDKs позволяют программно создавать сеансы OpenTok, генерировать маркеры, и работать с архивацией OpenTok.

Следует отметить, что в TokBox применяются два режима передачи медиа потоков (Media Streams):

  • relayed (ретрансляция), в этом режиме медиа потоки передаются непосредственно между пирингами (например, между браузерами пользователей в видеочате один-к-одному);
  • routed (маршрутизация), в этом режиме используются OpenTok Media Router для маршрутизации аудио-видео потоков между клиентами (например, в многопользовательском или групповом видеочате для онлайн-совещаний).

PubNub

PubNub - это глобальная сеть потоковой передачи данных для: IoT (Internet of Things), Mobile и Web. PubNub – это облачный Web сервис обмена сообщениями в режиме реального времени, который предназначен для организации веб-коммуникаций между различными платформами: мобильными телефонами, планшетами, веб-браузерами веб-узлов и т.д. PubNub предоставляет более 70 SDKs для основных языков программирования с целью создания кроссплатформенных коммуникационных приложений и встраивания их в Web приложения (веб-сайты) и приложения мобильных устройств (Java/Android и ОС IOS).

Список поддерживаемых языков и SDKs сервисом PubNub представлен на страничке: https://github.com/pubnub/pubnub-api. Следует отметить, что кроме API-интерфейсов к конкретным программным платформам PubNub также поддерживает API REST. Например, PubNub WebRTC SDK предназначен для организации веб-коммуникаций (пиринговых сетей) в реальном времени между браузерами по одноранговой архитектуре. Архитектура взаимодействия компонентов коммуникационного приложения на основе платформы PubNub и технологии WebRTC представлена на рис. 3.

Взаимодействие компонентов коммуникационного приложения на основе PubNub
Рис. 3. PubNub с WebRTC

Как следует из схемы взаимодействия компонентов WebRTC видеочата (рис.3) платформа PubNub использована в качестве масштабируемого сервера сигнализации (сервера согласования) для WebRTC приложений. Кроме того, платформа PubNub обеспечивает выполнение таких дополнительных функций как присутствие (предоставление информации о доступных в сети пользователях или об актуальном списке пользователей), хранение/воспроизведение (позволяет пользователям видеть историю прошлых разговоров в течение определенного периода времени) и регистрация.

В коммуникационных WebRTC приложениях на основе платформы PubNub применяются два способа обмена сообщениями (WebSockets и AJAX) между браузером и сервером согласования. PubNub предлагает новый API для подключения WebRTC приложения к платформе PubNub. WebRTC API PubNub выполняет сигнализацию между браузерами пользователей, чтобы позволить им соединиться по одноранговой архитектуре, используя API PeerConnection WebRTC. После обмена сигнальными сообщениями между браузерами, между ними устанавливается дуплексная связь для обмена видеопотоками и произвольными данными. Связь браузеров координируется PubNub.

Сервис PubNub обеспечивает не только взаимодействие всех компонентов необходимых для установления связи между браузерами по одноранговой схеме с целью обмена сообщениями в реальном времени, но и предоставляет для них глобальную сеть потоковой передачи данных.

Чтобы использовать платформу PubNub для создания видеочата, в первую очередь, необходимо зарегистрироваться на PubNub с целью создания бесплатной учетной записи. Зарегистрированный пользователь имеет возможность получить API ключи subscribe_key и publish_key, необходимые для разработки коммуникационного приложения PubNub. Затем в своем аккаунте можно добавить такие функции, как security , присутствие и хранение.

После получения API ключей можно приступить к созданию коммуникационного приложения на основе платформы PubNub, используя SDKs на одном из основных языков программирования, или использовать демонстрационные приложения (шаблоны). Учебное пособие для создания коммуникационного приложения представлено на страничке: https://www.pubnub.com/docs/tutorials/pubnub-publish-subscribe. Справочное руководство по созданию видеочата на основе PubNub WebRTC SDK рассмотрено на страничке https://www.pubnub.com/docs/webrtc-javascript/pubnub-javascript-sdk.

Для создания видеочата WebRTC с нуля в соответствии с руководством необходимо применить несколько простых API для JavaScript:

  • подключить библиотеку PubNub в HTML страницу, т.е. включить JavaScript PubNub SDK в код HTML страницы перед инициализацией клиента;
  • init() - инициализировать клиентское API PubNub;
  • subscribe() - подписаться на определенный канал (вызвать метод subscribe() PubNub API);
  • publish() - отправить сообщение на конкретный канал (вызвать метод publish() PubNub API);
  • unsubscribe() - отказаться от подписки на определенный канал.

Инициализация клиентского API PubNub может быть представлена в следующем виде:
var PUBNUB = PUBNUB.init({
publish_key: 'Your Publish Key',
subscribe_key: 'Your Subscribe Key'
});

Для создания видеочата WebRTC на основе PubNub WebRTC можно воспользоваться шаблоном с открытым исходным кодом: https://www.pubnub.com/developers/demos/webrtc/. Для проверки работы этого видеочата необходимо с двух ПК обратиться по указанному адресу, в открывшемся в браузерах интерфейсе видеочата пользователям назначаются номера телефона. Для общения пользователи должны ввести номера телефона в текстовое поле "Type Recipient's" и щелкнуть на кнопке с изображением телефонной трубки.

В результате изображения с видеокамер предаются в браузеры и отображаются на экранах мониторов. Кроме того, этот видеочат выполняет функции чата для передачи текста. Для переписки пользователи должны ввести текст в поле "chat here" и нажать клавишу "Enter". На рисунке 4 представлен скриншот видеочата пользователя с номером телефона 164.

Скриншот видеочата на основе PubNub WebRTC
Рис. 4.PubNub с WebRTC

На рисунке 5 представлен скриншот видеочата пользователя с номером телефона 128.

Скриншот видеочата на основе PubNub WebRTC
Рис. 5.PubNub с WebRTC

Предназначенный для пользователя интерфейс Web коммуникационного приложения разработан с помощью гипертекстовой разметки HTML5 и CSS3. Код клиентской части коммуникационного приложения разработан на JS. К Web коммуникационному приложению были подключены библиотеки: JQuery, PubNub JavaScript SDK и PubNub WebRTC SDK.