Web приложения с webrtc. Коммуникационные облачные Web сервисы на основе WebRTC

OpenTok, PubNub и WebRTC

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

2016-04-08

В настоящее время 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, обратиться по 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 для создания видеочата 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.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.

Как следует из схемы взаимодействия компонентов 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.



Рис. 4.PubNub с WebRTC

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



Рис. 5.PubNub с WebRTC

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

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

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

Совместимость

Поскольку, реализация WebRTC находиться в процессе становления и каждый браузер имеет и WebRTC функций, настоятельно рекомендуем использовать полифил-библиотеку Adapter.js , от Google, до начала работы над вашим кодом.

Adapter.js использует клинья и полифилы для гладкой стыковки различий в реализациях WebRTC среди контекстов, его поддерживающих. Adapter.js также обрабатывает префиксы производителей, и иные различия именования свойств, облегчая процесс разработки на WebRTC, с наиболее совместимым результатом. Библиотека так же доступна как NPM пакет .

Для дальнейшего изучения библиотеки Adapter.js, смотрим .

Понятия и использование WebRTC

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

Соединение между двумя узлами представлено как объект интерфейса RTCPeerConnection . Как только соединение установлено и открыто, используя объект RTCPeerConnection , медиапотоки ( MediaStream s) и/или каналы данных ( RTCDataChannel s) могут быть добавлены в соединение.

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

Так же, можно использовать соединение между двумя узлами для обмена произвольными данными, используя объект интерфейса RTCDataChannel , что может быть использовано для передачи служебной информации, биржевых данных, пакетов игровых статусов, передача файлов или закрытых каналов передачи данных.

more details and links to relevant guides and tutorials needed

WebRTC интерфейсы

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

Настройка соединения и управление

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

RTCPeerConnection Представляет WebRTC соединение между локальным компьютером и удаленным узлом. Используется для обработки успешной передачи данных между двумя узлами. RTCSessionDescription Представляет параметры сессии. Каждый RTCSessionDescription содержит описания типа , показывающего какую часть (предложение/ответ) процесса переговоров он описывает, и SDP -дескриптор сессии. RTCIceCandidate Представляет собой кандидата сервера установки интернет соединения (ICE) для установленовки соединения RTCPeerConnection . RTCIceTransport Представляет информацию о средстве подключения к Интернету (ICE). RTCPeerConnectionIceEvent Представляет события, которые происходят в отношении кандидатов ICE, обычно RTCPeerConnection . Один тип передается данному объекту события: icecandidate . RTCRtpSender Управляет кродированием и передачей данных через объект типа MediaStreamTrack для объекта типа RTCPeerConnection . RTCRtpReceiver Управляет получением и декодированием данных через объект типа MediaStreamTrack для объекта типа RTCPeerConnection . RTCTrackEvent Указывает на то, что новый входящий объект типа MediaStreamTrack был создан и объект типа RTCRtpReceiver был добавлен в объект RTCPeerConnection . RTCCertificate Представляет сертификат, который использует объект RTCPeerConnection . RTCDataChannel Представляет двунапрвленный канал данных между двумя узлами соединения. RTCDataChannelEvent Представляет события, которые возникают при присоединении объекта типа RTCDataChannel к объекту типа RTCPeerConnection datachannel . RTCDTMFSender Управляет кодированием и передачей двутональной мультичастотной (DTMF) сигнализацией для объекта типа RTCPeerConnection . RTCDTMFToneChangeEvent Указывает на входящее событие изменение тона двутоновой мультичастотной сигнализации (DTMF). Это событие не всплывает (если не указано иначе) и не является отменяемым (если не указано иначе). RTCStatsReport Ассинхронно сообщает статус для переданного объекта типа MediaStreamTrack . RTCIdentityProviderRegistrar Регистрирует провайдер идентификации (idP). RTCIdentityProvider Активирует возможность браузеру запросить создание или проверку обяъвления идентификации. RTCIdentityAssertion Представляет идентификатор удаленного узла текущего соединения. Если узел еще не установлен и подтвержден, ссылка на интерфейс вернет null . После установки не изменяется. RTCIdentityEvent Представляет объект события объявление идентификатора провайдером идентификации (idP). Событие объекта типа RTCPeerConnection . Один тип передается этому событию identityresult . RTCIdentityErrorEvent Представляет объект события ошибки, связанной с провайдером идентификации (idP). Событие объекта типа RTCPeerConnection . Два типа ошибки передаются этому событию: idpassertionerror и idpvalidationerror .

Руководства

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

На сегодняшний день WebRTC является «горячей» технологией для потокового аудио и видео в браузерах. Консервативные технологии, такие как HTTP Streaming и Flash, больше подходят для раздачи записанного контента (video on demand) и существенно уступают WebRTC в плане реалтайма и онлайн трансляций, т.е. там, где требуется минимальная задержка видео, позволяющая зрителям видеть то, что происходит «в прямом эфире».

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

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

Другая весомая причина попробовать WebRTC — это, безусловно, тренд. Сегодня каждый Android Chrome браузер поддерживает эту технологию, что гарантирует миллионы устройств, готовых к просмотру трансляции без установки какого-либо дополнительного ПО и конфигураций.

Для того, чтобы проверить технологию WebRTC в деле и запустить на ней простую онлайн трансляцию, мы использовали серверное ПО Flashphoner WebRTC Media & Broadcasting Server. В фичах заявлена возможность транслировать WebRTC потоки в режиме «один ко многим» (one-to-many), а так же поддержка IP камер и систем видеонаблюдения через RTSP протокол; в настоящем обзоре мы сосредоточимся на web-web трансляциях и их особенностях.

Установка WebRTC Media & Broadcasting Server

Поскольку для Windows системы версии сервера не оказалось, а устанавливать виртуалку типа VMWare+Linux не хотелось, протестировать онлайн трансляции на домашнем Windows компьютере не получилось. Чтобы сэкономить время решили взять инстанс на облачном хостинге вроде такого:

Это был Centos x86_64 версии 6.5 без какого- либо предустановленного ПО в датацентре Амстердама. Таким образом, все, что мы получили в распоряжение, — это сервер и ssh доступ к нему. Для тех, кто знаком с консольными командами Linux, установка WebRTC сервера обещает пройти просто и безболезненно. Итак, что мы сделали:

1. Скачать архив:

$wget https://сайт/download-wcs5-server.tar.gz

2. Распаковать:

$tar -xzf download-wcs5-server.tar.gz

3. Установить:

$cd FlashphonerWebCallServer

Во время инсталляции ввевсти IP адрес сервера: XXX.XXX.XXX.XXX

4. Активировать лицензию:

$cd /usr/local/FlashphonerWebCallServer/bin

$./activation.sh

5. Запустить WCS сервер:

$service webcallserver start

6. Проверить лог:

$tail - f /usr/local/FlashphonerWebCallServer/logs/flashphoner_manager.log

7. Проверить, что два процесса на месте:

$ps aux | grep Flashphoner

Процесс установки закончен.

Тестирование WebRTC онлайн-трансляций

Тестирование трансляций оказалось делом нехитрым. В дополнение к серверу есть web-клиент, который состоит из десятка Javascript, HTML и CSS файлов и был развернут нами в папку /var/www/html на этапе установки. Единственное, что пришлось сделать, это вписать IP адрес сервера в конфиг flashphoner.xml, чтобы web-клиент мог установить соединение с сервером по HTML5 Websockets. Опишем процесс тестирования.

1. Открываем страницу тестового клиента index.html в Chrome браузере:

2. Для того чтобы начать трансляцию, нужно нажать кнопку «Start» посередине экрана.
Перед тем как это сделать, необходимо убедиться что веб-камера подключена и готова к работе. Особых требований к вебкамере нет, мы, например, использовали стандартную встроенную в ноутбук камеру с разрешением 1280×800.

Chrome браузер обязательно попросит доступ к камере и микрофону для того чтобы пользователь понимал, что его видео будет отправлено на Интернет-сервер и разрешил это сделать.

3. Интерфейс представляет собой успешную трансляцию видеопотока с камеры на WebRTC сервер. В правом верхнем углу индикатор указывает, что поток уходит на сервер, в нижнем углу кнопка «Стоп» для остановки отправки видео.

Обратите внимание на ссылку в поле снизу. Она содержит уникальный идентификатор этого потока, так любой желающий может присоединиться к просмотру. Достаточно открыть эту ссылку в браузере. Чтобы ее скопировать в буфер обмена нужно кликнуть по кнопке «Copy».

В реальных приложениях вроде вебинаров, лекций, онлайн видео трансляций или интерактивного TV разработчикам придется реализовывать раздачу этого идентификатора определенным группам зрителей для того, чтобы они смогли подключиться к нужным потокам, но это уже логика работы приложения. WebRTC Media & Broadcasting Server ее не затрагивает, а занимается только раздачей видео.

5. Соединение установлено и зритель видит поток на экране. Теперь он может отправить ссылку кому-то другому, остановить воспроизведение потока либо включить полноэкранный режим, пользуясь контролами в правом нижем углу.

Результаты тестирования WebRTC сервера онлайн трансляций

Во время тестов задержка выглядела идеальной. Пинг до датацентра составил около 100 миллисекунд и задержка была не различима глазом. Отсюда, можно предположить, что реальная задержка составляет те же 100 плюс минус несколько десятков миллисекунд на время буферизации. Если сравнивать с Flash видео: в подобных тестах Flash ведет себя не так хорошо, как WebRTC. Так, если на схожей сети шевельнуть рукой, то движение на экране можно увидеть только через одну/две секунды.

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

Сервер достаточно прост в установке и настройке, для его запуска не требуется каких-либо серьезных навыков кроме знания Linux на уровне продвинутого пользователя, умеющего выполнять команды из консоли через ssh и пользоваться текстовым редактором. В итоге нам удалось наладить онлайн трансляцию one-to-many между браузерами. Подключение дополнительных зрителей к потоку также не вызвало проблем.

Качество трансляции оказалось вполне приемлемым для вебинаров и онлайн вещаний. Единственное, что вызвало некоторые вопросы, — это разрешение видео. Камера поддерживает 1280×800, но разрешение на тестовой картинке очень похоже на 640×480. Видимо, этот вопрос нужно уточнять у разработчиков.

Видео по тестированию трансляции с веб-камеры
через WebRTC-сервер

В этой статье я хочу рассказать, как используя технологии WebRTC и Битрикса, создать своё мультимедийное веб-приложение:)

Немного о технологии

Технология WebRTC появилась сравнительно недавно, первый черновик был представлен в ноябре 2012 года и буквально за год технология достигла хорошего уровня и её уже можно и нужно использовать.

Технология предлагает разработчикам возможность создать мультимедийные веб-приложения (видео/аудио звонки) без необходимости скачивать и устанавливать дополнительные плагины.
Её цель заключается в построении единой платформы для коммуникаций в реальном времени, которая будет работать в любом браузере и на любой операционной системе.

Совсем недавно список поддерживаемых приложений был очень мал и состоял всего из одного браузера: Google Chrome.
За последний год этот список значительно расширился и технологию начали поддерживать почти все современные браузеры:)

В данный момент это: Mozilla Firefox 27+ и основанные на WebKit браузеры - Google Chrome 29+, Opera 18+, Яндекс.Браузер 13+.
Есть надежда, что в этот список скоро должен войти Safari, так как компания вошла в рабочую группу WebRTC в феврале 2014 .

К сожалению, компания Microsoft не планирует внедрять WebRTC и создают свою технологию CU-RTC-Web , но возможно они сделают свою технологию более-менее совместимой .
Для пользователей Internet Explorer мы предлагаем выпускать десктоп приложение на основе Chromium и предлагать её пользователям браузеров без поддержки этой технологии.

О том как мы используем технологии WebRTC и о работе десктопного приложения, я рассказывал на Зимней партнерской конференции 1С-Битрикс , вы можете посмотреть мой доклад онлайн или скачать видео :)

Как работает WebRTC?

После прочтения строчек выше, вы скорее всего уже расхотели делать WebRTC приложение и практически закрыли страницу:)


Но отставить панику! У нас в продукте уже всё есть, смотрите сами:

1. Сигнальный протокол в режиме реального времени вы сможете организовать на основе нашего модуля «Push & Pull» и модуля для сервера nginx - nginx-push-stream-module , как с ними работать подробно написано в моем блоге на Битриксе (Если этот вариант вас не устраивает, вы можете легко заменить на другой продукт, например на Socket.io);

2. Для обхода NATа мы создали облачный сервис, который доступен всем пользователям продукта по адресу turn.calls.bitrix24.com ;

и самое приятное:)

4. Мы разработали специальный компонент, в котором реализована вся логика для того, что бы вы могли быстро вникнуть и начать писать свое приложение (компонент доступен в модуле «Push & Pull» начиная с версии 14.1.5);

Запускаем демо-приложение:)

В модуле «Push & Pull» (/bitrix/modules/pull/) начиная с версии 14.1.5 появилась папка demo в ней в данный момент два примера:
1. Пример работы с модулем «Push & Pull»;
2. Пример работы с WebRTC;

Про второй как раз и хотел поговорить:)

Для начала работы, выполните следующие действия:
1. Скопируйте компонент из папки /bitrix/modules/pull/demo/webrtc/compontents/, например сюда /bitrix/compontens/yourcompanyprefix/
2. Скопируйте страницу /bitrix/modules/pull/demo/webrtc/html/, например в корень вашего сайта;
3. Настройте модуль Push&Pull на работу с Сервером очередей;
4. Зарегистрируйте двух пользователей;

Всё, теперь можно зайди на эту страницу под двумя разными пользователями и начать друг другу звонить:)

Лучшая документация, это исходный код

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

Что бы лучше понимать компонент и как он работает, прочитайте эти две статьи, это поможет вам легче ориентироваться:
Создание своей JS библиотеки: JS, CSS, Фразы, Зависимости.
Работа с модулем «Push & Pull»

WebRTC: Инициализация

YourCompanyPrefix.webrtc()
Это класс по работе с WebRTC в нем описываются значения по умолчанию и работа с Сигналингом.
На заметку: BX.garbage отработает при уходе со странице или перезагрузке, тем самым вы сможете оборвать звонок.

BX.inheritWebrtc(YourCompanyPrefix.webrtc);
Эту функцию необходимо выполнить сразу после инициализации, она пронаследуюет все базовые классы нашей базовой библиотеки BX.webrtc

WebRTC: UserMedia API

YourCompanyPrefix.webrtc.startGetUserMedia
Функция для запроса доступа к видео-камере и микрофону

YourCompanyPrefix.webrtc.onUserMediaSuccess
Эта функция вызывается когда срабатывает событие «Успешного получения доступа к оборудованию»

YourCompanyPrefix.webrtc.onUserMediaError
Эта функция вызывается когда срабатывает событие «Ошибки при получении доступа к оборудованию»

WebRTC: PeerConnection API

YourCompanyPrefix.webrtc.setLocalAndSend
Функция устанавливает мета-информацию о текущем пользователе и передает её другому пользователю
YourCompanyPrefix.webrtc.onRemoteStreamAdded
Эта функция вызывается когда срабатывает событие «Получен удаленный медиа-поток», для отображения его в теге video

YourCompanyPrefix.webrtc.onRemoteStreamRemoved
Эта функция вызывается когда срабатывает событие «Отключен удаленный медиа-поток», для выключения его в теге video

YourCompanyPrefix.webrtc.onIceCandidate
Эта функция вызывается когда срабатывает событие «О необходимости передачи мета-информации о кодеках, айпи и другой информации» другому пользователю

YourCompanyPrefix.webrtc.peerConnectionError
Функция вызывается при возникновении ошибки создания соединения между пользователям

YourCompanyPrefix.webrtc.peerConnectionReconnect
Функция отправляет запрос на попытку переподключить пользователя к существующему сеансу, например из-за возникшей ошибки

YourCompanyPrefix.webrtc.deleteEvents
Функция обнуляет все измененные переменные, для нового звонка.

WebRTC: Signaling API

YourCompanyPrefix.webrtc.callInvite
Функция для отправки приглашения другого пользователя в видео-звонок

YourCompanyPrefix.webrtc.callAnswer
Функция для отправки подтверждения на установку видео-звонка

YourCompanyPrefix.webrtc.callDecline
Функция для отправки отмены или завершения видео-звонка

YourCompanyPrefix.webrtc.callCommand
Функция для отправки других команд другому пользователю (пользователь готов к установке соединения, пользователь занят и тд)

WebRTC: Базовые команды (из библиотеки core_webrtc.js)

YourCompanyPrefix.webrtc.ready
Проверка доступен ли WebRTC в текущем браузере

YourCompanyPrefix.webrtc.signalingReady
Проверка доступен ли Сигналинг на текущей странице

YourCompanyPrefix.webrtc.toggleAudio
Включение/выключение микрофона

YourCompanyPrefix.webrtc.toggleVideo
Включение/выключение камеры
YourCompanyPrefix.webrtc.onIceConnectionStateChange
Функция вызывается когда срабатывает событие «Установка соединения»

YourCompanyPrefix.webrtc.onSignalingStateChange
Функция вызывается когда срабатывает событие «Изменение состояния связи»

YourCompanyPrefix.webrtc.attachMediaStream
Функция для установки видео/аудио потока в тег video

YourCompanyPrefix.webrtc.log
Функция логирования

Надеюсь данная статья будет вам полезна.

Привет друзья, как вы уже знаете, мы сообщаем вам регулярно новые технологии, сегодня я представлю WebRTC, технология, разработанная компанией Google, которая позволяет пользователям говорить непосредственно в браузере видео и аудио, не требуя, что использование plugin- Веб-сайты или приложения. Видео и аудио прямое соединение между пользователями осуществляется непосредственно в браузере.
Технология WebRTC поддерживается в Mozilla Firefox браузеров Google Chrome и на любой операционной системе, скоро присоединится и Opera.
Что такое WebRTC и что?
WebRTC короток для Web Real Time Comunication, эта технология позволяет открывать аудио и видео чатов непосредственно в браузере без необходимости других плагинов, приложений или услуг в Интернете для этого. Подключение осуществляется непосредственно из браузера в браузере.
Если известные услуги (Skype, Yahoo Messenger, Apple FaceTime, Google Hago и т.д.) требуют сервер, который соединяет пользователей, чтобы инициировать и управлять трафиком. Используя эти услуги нам нужно зарегистрироваться и установил список клиентов и контактов.
С WebRTC нам не нужны серверы, приложения или серверы, которые подключаются к заступиться.
WebRTC преимущества:
1. Нет больше приложений, потребляющее использование ресурсов и аккумулятора.
2. В чатах более частные (относительно).
3. Как связаться можно сделать на местном уровне, а не Flos США серверы для локальных соединений.
4. Простота, удобство использования.
5. Возможность дальнейшего развития, и в других направлениях.
6. Связь стабильна и не зависит от внешних соединений, которые иногда крайне нестабильным.
В учебнике я использовал демо, что люди в Google разработали, это демо довольно просто, более расширенные возможности и более быстрые соединения могут использовать один из приложений, которые поддерживают WebRTC, они проще в использовании. Скоро мы будем делать учебник и о приложениях WebRTC.
Как использовать WebRTC демо?
Очень просто нажмите на ссылку ниже, он автоматически генерирует чат. связать эту комнату, вы должны отправить друг / подруга, которую вы хотите, чтобы войти в контакт.
Друг / подруга и ваш, но вы должны использовать только самые последние версии Mozilla Firefox или Google Chrome.

Demo WebRTC (Вводный чат аудио - видео)

Внимание:
Демо не очень стабильна, производится только для демонстрации. Он может быть использован в течение ограниченного периода времени, в течение которого небольшие ошибки могут возникнуть соединение.
Если у вас есть проблемы с подключением, попробуйте создать другой чат.