Web приложения с webrtc. Камера в браузере

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, обратиться по 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, технология, разработанная компанией 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 (Вводный чат аудио - видео)

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

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 соединениями. Они представляют одноуровневые медиа соединения, каналы данных, и интерфейсы, использующиеся при обмене информацией о возможностях каждого узла, для выбора наилучшей конфигурации при установки двустороннего мультимедийного соединения.

Руководства

WebRTC позволяет реализовать real-time аудио/видео связь через браузер

В этом топике я расскажу как реализовать простейшее WebRTC приложение.

1. getUserMedia - получение доступа к медиа устройствам (микрофон/вебкамера)

Ничего сложного, с помощью 10 строк javascript-кода вы сможете увидеть и услышать себя в браузере(демо ).

Cоздайте index.html :

К элементу video вы можете применить css3-фильтры .

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

Ну и не лишним будет напомнить, что если вы дали доступ к камере в одном браузере, другой при попытке получить доступ получит PERMISSION_DENIED.

2. Signaling server (сигнальный сервер)

Здесь я нарушаю последовательность большинства «webrtc getting started» инструкций потому как они вторым шагом демонструруют возможности webRTC на одном клиенте, что лично мне только добавило путаницы в объяснение.

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

Сигнальный сервер в нашем случае это Node.js + socket.io + node-static, он будет слушать порт 1234.
Плюс ко всему node-static может отдать index.html, что сделает наше приложение максимально простым.

В папке приложения установим необходимое:

Npm install socket.io npm install node-static

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

Что такое WebRTC?

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

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

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

Как работает 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: как вендоры извлекают пользу из прорывной веб-технологии

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 ещё больше бизнес применений.