Web приложения с webrtc. Коммуникационные облачные Web сервисы на основе 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 (Web Real Time Communications) — это стандарт, который описывает передачу потоковых аудиоданных, видеоданных и контента от браузера и к браузеру в режиме реального времени без установки плагинов или иных расширений. Стандарт позволяет превратить браузер в оконечный терминал видеоконференцсвязи, достаточно просто открыть веб-страницу, чтобы начать общение.

Что такое WebRTC?

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

Что нужно знать про WebRTC?

Эволюция стандартов и технологий видеосвязи

Сергей Юцайтис, Cisco, Видео+Конференция 2016

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

На стороне клиента

  • Пользователь открывает страницу, содержащую HTML5 тег
  • Браузер запрашивает доступ к веб-камере и микрофону пользователя.
  • JavaScript код на странице пользователя контролирует параметры соединения (IP-адреса и порты сервера WebRTC или других WebRTC клиентов) для обхода NAT и Firewall.
  • При получении информации о собеседнике или о потоке со смикшированной на сервере конференцией, браузер начинает согласование используемых аудио и видео кодеков.
  • Начинается процесс кодирования и передача потоковых данных между WebRTC клиентами (в нашем случае, между браузером и сервером).

На стороне WebRTC сервера

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



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

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

Преимущества стандарта

  • Не требуется установка ПО.
  • Очень высокое качество связи, благодаря:
    • Использованию современных видео (VP8, H.264) и аудиокодеков (Opus).
    • Автоматическое подстраивание качества потока под условия соединения.
    • Встроенная система эхо- и шумоподавления.
    • Автоматическая регулировка уровня чувствительности микрофонов участников (АРУ).
  • Высокий уровень безопасности: все соединения защищены и зашифрованы согласно протоколам TLS и SRTP.
  • Есть встроенный механизм захвата контента, например, рабочего стола.
  • Возможность реализации любого интерфейса управления на основе HTML5 и JavaScript.
  • Возможность интеграции интерфейса с любыми back-end системами с помощью WebSockets.
  • Проект с открытым исходным кодом — можно внедрить в свой продукт или сервис.
  • Настоящая кросс-платформенность: одно и то же WebRTC приложение будет одинаково хорошо работать на любой операционной системе, десктопной или мобильной, при условии, что браузер поддерживает WebRTC. Это значительно экономит ресурсы на разработку ПО.

Недостатки стандарта

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

Секреты WebRTC: как вендоры извлекают пользу из прорывной веб-технологии


Цахи Левент-Леви, Bloggeek.me, Видео+Конференция 2015

WebRTC для рынка ВКС

Увеличение числа ВКС-терминалов

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

Использование в специализированных решениях

Использование различных JavaScript библиотек и API облачных сервисов с поддержкой WebRTC позволяет легко добавить поддержку видеосвязи в любые веб-проекты. Ранее для передачи данных в реальном времени разработчикам приходилось изучать принципы работы протоколов и использовать наработки других компаний, которые чаще всего требовали дополнительного лицензирования, что увеличивало расходы. Уже сейчас WebRTC активно используется в сервисах вида “Позвонить с сайта”, “Онлайн-чат поддержки”, и т.п.

Ex-пользователям Skype для Linux

В 2014 году Microsoft объявила об прекращении поддержки проекта Skype для Linux, что вызвало большое раздражение у IT-специалистов. Технология WebRTC не привязана к операционной системе, а реализована на уровне браузера, т.е. Linux пользователи смогут увидеть в продуктах и сервисах на основе WebRTC полноценную замену Skype.

Конкуренция с Flash

WebRTC и HTML5 стали смертельным ударом для технологии Flash, которая и так переживала свои далеко не лучшие годы. С 2017 года ведущие браузеры официально перестали поддерживать Flash и технология окончательно исчезла с рынка. Но нужно отдать Flash должное, ведь именно он создал рынок веб-конференций и предложил технические возможности для живого общения в браузерах.

Видеопрезентации WebRTC

Дмитрий Одинцов, TrueConf, Видео+Конференция октябрь 2017

Кодеки в WebRTC

Аудиокодеки

Для сжатия аудио-трафика в WebRTC используются кодеки Opus и G.711.

G.711 — самый старый голосовой кодек с высоким битрейтом (64 kbps), который чаще всего применяется в системах традиционной телефонии. Основным достоинством является минимальная вычислительная нагрузка из-за использования легких алгоритмов сжатия. Кодек отличается низким уровнем компрессии голосовых сигналов и не вносит дополнительной задержки звука во время общения между пользователями.

G.711 поддерживается большим количеством устройств. Системы, в которых используется этот кодек, более легкие в применении, чем те, которые основаны на других аудиокодеках (G.723, G.726, G.728 и т.д.). По качеству G.711 получил оценку 4.2 в тестировании MOS (оценка в пределах 4-5 является самой высокой и означает хорошее качество, аналогичное качеству передачи голосового трафика в ISDN и даже выше).

Opus — это кодек с низкой задержкой кодирования (от 2.5 мс до 60 мс), поддержкой переменного битрейта и высоким уровнем сжатия, что идеально подходит для передачи потокового аудиосигнала в сетях с переменной пропускной способностью. Opus - гибридное решение, сочетающее в себе лучшие характеристики кодеков SILK (компрессия голоса, устранение искажений человеческой речи) и CELT (кодирование аудиоданных). Кодек находится в свободном доступе, разработчикам, которые его используют, не нужно платить отчисления правообладателям. По сравнению с другими аудиокодеками, Opus, несомненно, выигрывает по множеству показателей. Он затмил довольно популярные кодеки с низким битрейтом, такие, как MP3, Vorbis, AAC LC. Opus восстанавливает наиболее приближенную к оригиналу “картину” звука, чем AMR-WB и Speex. За этим кодеком - будущее, именно поэтому создатели технологии WebRTC включили его в обязательный ряд поддерживаемых аудиостандартов.

Видеокодеки

Вопросы выбора видеокодека для WebRTC заняли у разработчиков несколько лет, в итоге решили использовать H.264 и VP8. Практически все современные браузеры поддерживают оба кодека. Серверам видеоконференций для работы с WebRTC достаточно поддержать только один.

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

Платный видеокодек H.264 стал известен намного раньше своего собрата. Это кодек с высокой степенью сжатия видеопотока при сохранении высокого качества видео. Высокая распространенность этого кодека среди аппаратных систем видеоконференцсвязи предполагает его использование в стандарте WebRTC.

Компании Google и Mozilla активно продвигают кодек VP8, а Microsoft, Apple и Cisco — H.264 (для обеспечения совместимости с традиционными системами видеоконференцсвязи). И вот тут возникакет очень большая проблема для разработчиков облачных WebRTC решений, ведь если в конференции все участники используют один браузер, то конференцию достаточно микшировать один раз одним кодеком, а если браузеры разные и среди них есть Safari / Edge, то конференцию придётся кодировать два раза разными кодеками, что в два раза повысит системные требования к медиа-серверу и как следствие, стоимость подписок на WebRTC сервисы.

WebRTC API

Технология WebRTC базируется на трех основных API:

  • (отвечает за принятие веб-браузером аудио и видеосигнала от камер или рабочего стола пользователя).
  • RTCPeerConnection (отвечает за соединение между браузерами для “обмена” полученными от камеры, микрофона и рабочего стола, медиаданными. Также в “обязанности” этого API входит обработка сигнала (очистка его от посторонних шумов, регулировка громкости микрофона) и контроль над используемыми аудио и видеокодеками).
  • RTCData Channel (обеспечивает двустороннюю передачу данных через установленное соединение).

Прежде чем получить доступ к микрофону и камере пользователя, браузер запрашивает на это разрешение. В Google Chrome можно заранее настроить доступ в разделе “Настройки”, в Opera и Firefox выбор устройств осуществляется непосредственно в момент получения доступа, из выпадающего списка. Запрос на разрешение будет появляться всегда при использовании протокола HTTP и однократно, если использовать HTTPS:


RTCPeerConnection . Каждый браузер, участвующий в WebRTC конференции, должен иметь доступ к данному объекту. Благодаря использованию RTCPeerConnection медиаданные от одного браузера к другому могут проходить даже через NAT и сетевые экраны. Для успешной передачи медиапотоков участники должны обменяться следующими данными с помощью транспорта, например, веб-сокетов:

  • участник-инициатор направляет второму участнику Offer-SDP (структура данных, с характеристиками медиапотока, которые он будет передавать);
  • второй участник формирует “ответ” — Answer-SDP и пересылает его инициатору;
  • затем между участниками организуется обмен ICE-кандидатами, если таковые обнаружены (если участники находятся за NAT или сетевыми экранами).

После успешного завершения данного обмена между участниками организуется непосредственно передача медиапотоков (аудио и видео).

RTCData Channel . Поддержка протокола Data Channel появилась в браузерах сравнительно недавно, поэтому данный API можно рассматривать исключительно в случаях использования WebRTC в браузерах Mozilla Firefox 22+ и Google Chrome 26+. С его помощью участники могут обмениваться текстовыми сообщениями в браузере.

Подключение по WebRTC

Поддерживаемые десктопные браузеры

  • Google Chrome (17+) и все браузеры на основе движка Chromium;
  • Mozilla FireFox (18+);
  • Opera (12+);
  • Safari (11+);

Поддерживаемые мобильные браузеры для Android

  • Google Chrome (28+);
  • Mozilla Firefox (24+);
  • Opera Mobile (12+);
  • Safari (11+).

WebRTC, Microsoft и Internet Explorer

Очень долго Microsoft хранила молчание по поводу поддержки WebRTC в Internet Explorer и в своём новым браузере Edge. Ребята из Редмонда не очень любят давать в руки пользователей технологии, которые они не контролируют, вот такая вот политика. Но постепенно дело сдвинулось с мёртвой точки, т.к. игнорировать WebRTC далее было уже нельзя, и был анонсирован проект ORTC, производный от стандарта WebRTC.

По словам разработчиков ORTC — это расширение стандарта WebRTC с улучшенным набором API на основе JavaScript и HTML5, что в переводе на обычный язык означает, что всё будет то же самое, только контролировать стандарт и его развитие будет Microsoft, а не Google. Набор кодеков расширен поддержкой H.264 и некоторым аудиокодеками серии G.7ХХ, используемыми в телефонии и аппаратных ВКС системах. Возможно появится встроенная поддержка RDP (для передачи контента) и обмена сообщениями. Кстати, пользователям Internet Explorer не повезло, поддержка ORTC будет только в Edge. Ну и, естественно, такой набор протоколов и кодеков малой кровью стыкуется со Skype for Business, что открывает для WebRTC ещё больше бизнес применений.

Европейские пользователи Сети разделились на две части: согласно опросу Института анализа общественного мнения в Алленбахе (Германия), Skype, чат и системы мгновенного обмена сообщениями стали неотъемлемой частью повседневной жизни для 16,5 млн. взрослых и детей, 9 млн. используют эти службы от случая к случаю, а 28 млн. к ним не прикасаются.

Ситуация может измениться, поскольку теперь в Firefox интегрирована технология коммуникаций в реальном времени (WebRTC ), а также сам клиент. Запустить аудио- и видеочат теперь ничуть не сложнее, чем открыть сайт. Такие сервисы, как Facebook и Skype, напротив, делают ставку на решения с использованием отдельного клиента и созданием учетной записи.

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

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

Вскоре после этого Chrome и Firefox получили собственные WebRTC-движки. В настоящее время их мобильные варианты оснащены как этой технологией, так и устанавливаемым вместе с Android 5.0 движком WebView 3.6, который используется приложениями.

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

Параллельно с интеграцией в браузер рабочая группа Консорциума Всемирной паутины (W3C) форсировала процесс стандартизации WebRTC. Он должен завершиться уже в 2015-го году.

WebRTC довольствуется малым

Для использования службы WebRTC не требуется много ресурсов, поскольку сервер соединяет только собеседников. Установка соединения также не представляет особой сложности. Сначала браузер подает серверу WebRTC сигнал, что он планирует начать вызов. От сервера он получает HTTPS-ссылку - связь осуществляется в зашифрованном виде. Этот линк пользователь отправляет своему собеседнику. После этого браузер запрашивает у пользователя разрешение на доступ к веб-камере и микрофону.

Чтобы установить прямое потоковое соединение с собеседником, браузер получает от службы WebRTC ее IP-адрес и данные конфигурации. Веб-просмотрщик собеседника поступает таким же образом.

Чтобы потоковое соединение функционировало без сбоев и в хорошем качестве, в браузере работают три движка. Два из них оптимизируют и сжимают аудиои видеоданные, третий ответственен за их транспортировку. Он пересылает данные посредством протокола SRTP (Secure Real-time Transport Protocol), который позволяет осуществлять зашифрованную потоковую передачу в реальном времени.

Если прямое соединение установить не удается, WebRTC ищет другой путь. К примеру, это происходит в том случае, когда сетевые настройки препятствуют тому, чтобы STUN-сервер смог сообщить IP-адрес. Стандартом WebRTC предусмотрено, что в этом случае беседа состоится, но с промежуточным включением TURN-сервера (Traversal Using Relays around NAT). Так, на сайте netscan.co можно проверить, реализуется ли WebRTC на вашем компьютере и с вашим доступом к Сети.

Как осуществляется соединение

Сначала необходимо зарегистрировать беседу (1). Служба WebRTC дает ссылку, которую необходимо отправить собеседнику. Браузер с помощью STUNсервера выясняет свой собственный IP-адрес (2), отправляет его сервису и получает IP партнера для установки прямого соединения (3). Если использовать STUN не удается, беседа перенаправляется с помощью TURNсервера (4).

Общение по технологии WebRTC в браузере запускается с помощью кода JavaScript. После этого за коммуникацию отвечают три движка: голосовой и видеодвижки собирают мультимедийные данные с веб-камеры и микрофона, а транспортный движок объединяет информацию и пересылает поток в зашифрованном виде, используя протокол SRTP (Secure Real-time Protocol).

Какие браузеры работают с WebRTC

Chrome и Firefox оснащены движком WebRTC, который использует такие службы, как talky.io. Браузер от Mozilla может работать напрямую со своим собственным клиентом.

Google и Mozilla продолжают развивать идею коммуникации в реальном времени: Chrome может проводить конференцию WebRTC с несколькими участниками, а новый клиент Hello в Firefox разработан при содействии с дочерней компанией телекоммуникационного гиганта Telefonica. Apple пока что остается в стороне, в Safari WebRTC ожидать пока не стоит. Однако существует множество альтернативных приложений для iOS и плагинов для Safari.

Корпорация Microsoft идет несколько иным курсом. В качестве владельца конкурентного сервиса Skype данная компания не собирается так просто капитулировать перед WebRTC. Вместо этого Microsoft разрабатывает технологию под названием ORTC (Object Real-Time Communications) для Internet Explorer.

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

Фото: компании-производители; goodluz/Fotolia.com

В этой статье я хочу рассказать, как используя технологии 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
Функция логирования

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

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.

Похожие публикации