Создание своего WebRTC приложения на платформе 1С-Битрикс

На просторах Хабра все чаще и чаще публикуются ^[1] статьи про технологию WebRTC, уже написано несколько хороших статей о том, как начать работать с технологией WebRTC (например: раз ^[2], два ^[3]).

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

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

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

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

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

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

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

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

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

На самом деле все работает очень просто ^[9], буквально три пункта :)

1. У пользователя запрашивается разрешение на использование видео-камеры и микрофона;
2. Соединяемся с другим пользователем (который тоже дал разрешение на использование оборудования), обмениваясь с ним данными о кодеках и ip адресах для прямого подключения;
3. Показываем видео и воспроизводим звук;

Все так просто? Да… почти :)

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

Что такое «Сигнальный протокол»?

Под Сигнальным протоколом или Сигналингом (Signaling) подразумевается организация коммуникаций между пользователями, для обмена командами и данными.

В самой простой схеме, вам нужно организовать обработку следующих команд:
1. invite — Приглашение на звонок (вам звонит пользователь такой то, ответить или нет);
2. answer — Ответ на звонок;
3. decline — Отмена звонка;
4. busy — Пользователь занят другим звонком;
5. ready — Пользователь готов к обмену данными;
6. signaling — Обмен данными;

Выше указаны только базовые команды, их на самом деле может быть больше:
— join — подключение к существующему разговору;
— wait — пользователь онлайн, ждите ответа;
— waitTimeout — другой пользователь не дождался ответа;
— errorAccess — у пользователя технические проблемы;
— reconnect — пользователь не смог установить соединение, требуется переподключение;

Что будет происходить при получении команды, какие будут показаны сообщения и какой будет интерфейс, решаете вы, под ваши бизнес-задачи.

Я все понял, хочу создать приложение!

Для работы с WebRTC необходимо понимать, что пока это не утвержденный стандарт ^[10], API в разных браузерах немного различается ^[11].
Так же стоит подумать о том, как организовать realtime-транспорт для сигналинга, подумать как обходить NAT ^[12] и прочитать инструкции как же это все заставить работать ^[13].

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

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

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

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

3. В ядро продукта, мы добавили специальную библиотеку core_webrtc которая скроет от вас разночтение в АПИ и большую часть логики работы WebRTC (библиотека доступна в «Главном модуле» начиная с версии 14.0.15);

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

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, Фразы, Зависимости. ^[17]
Работа с модулем «Push & Pull» ^[15]

Автор: ihazz

Источник ^[18]