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



    На просторах Хабра все чаще и чаще публикуются статьи про технологию WebRTC, уже написано несколько хороших статей о том, как начать работать с технологией 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?


    На самом деле все работает очень просто, буквально три пункта.

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



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

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


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


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

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

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

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


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


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

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



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

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

    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, Фразы, Зависимости.
    Работа с модулем «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
    Функция логирования



    Надеюсь данная статья будет вам полезна.
    Если у вас возникли вопросы, пишите в комментариях.
    1С-Битрикс
    Компания

    Комментарии 14

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


      Только для чего? не понятно.
        0
        Для того чтобы не потерять рынок.
        Видимо будет что-то похожее на то как развивалась позиция Microsoft в отношении JScript
          0
          Ну когда то, они и silverlight пилили.
          Почему нельзя взять и разрабатывать на основе открытых проектов?!
            +1
            Потому что в открытых проектах Microsoft всегда обнаруживает фатальный недостаток
              0
              Вот в этом их ошибка)
                0
                Кажется, у MS есть уверенный план, как окончательно сгубить свой браузер.
            +1
            Microsoft часто идет своим путем :) Кроме CU-RTC-Web, у них еще есть планы и на веб-версию Skype.
            +1
            Как-то был опыт реализации видео-звонков на сайте с использованием Cumulus и очень сильно помешала проблема hole punching`а для симметричного ната. Как справляется с этим Ваш turn.calls.bitrix24.com и в целом решается этот вопрос в WebRTC?
              0
              Для симметричного NATа в WebRTC используются relay-соединения протокола TURN. В этом случае обе стороны соединяются друг с другом через релей-порт, доступный для обеих сторон соединения и находящийся снаружи подсетей.
              0
              Насколько я понимаю, модуль для nginx используется только для обмена метаданными?
              И, после «рукопожатия», клиенты обмениваются видео-данными уже напрямую или через TURN/STUN сервер?
              Есть ли при этом возможность записывать видео/звук?
                0
                И, после «рукопожатия», клиенты обмениваются видео-данными уже напрямую или через TURN/STUN сервер?

                Все верно

                Есть ли при этом возможность записывать видео/звук?

                Пока нет, но производители браузеров уже пробуют внедрять запись аудио и видео в браузеры.

                В данный момент, если требуется записывать на сервер, то тут уже базовая схема клиент-напрямую-к-клиенту не подойдет, нужно будет сделать между ними посредника.
                  0
                  Пока нет, но производители браузеров уже пробуют внедрять запись аудио и видео в браузеры

                  Пока нашел только MediaRecorder от Mozilla.
                  Этим API можно «стримить» только в виде нарезок, как HLS/DASH, отправляя Blob постом на сервер, например.
                  Ну и хром, ослик и другие пауканы похоже будут делать свои велосипеды.

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

                  Это понятно. Весь вопрос в том, кто же этот посредник.
                0
                del
                  0
                  Справедливости ради Microsoft поддержали ORTC, и его поддержка уже есть в девелоперских билдах Edge. Видео звонков пока не будет ORTC<>WebRTC, так как разные кодеки, а аудио уже вполне есть

                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                  Самое читаемое