Документ обсуждает создание видеозвонков в мобильном приложении с использованием технологии WebRTC, охватывая теоретические и практические аспекты, такие как работа с кодеками и преодоление NAT. В нем также сравниваются адаптивные приложения и мобильные сайты, подчеркивая плюсы и минусы каждого подхода, а также обсуждаются вопросы разработки на платформе Bitrix Mobile. Основное внимание уделяется реальному времени взаимодействия и пользовательскому опыту.

1. Видеозвонки в мобильном приложении и шаринг экрана
Александр Сербул
Руководитель направления

2. Карл…
Карл, я закодил
звонки по WebRTC
на 10 строках
JavaScript!
Это очень круто,
пап!

3. Карл… Карл, я специалист по
BigData….
Это очень круто,
пап!
Но я не понимаю, как ОНО
работает и кто такие чертовые
STUN, TURN и SCTP.
СОВСЕМ!!!

4. О чем поговорим...
• Как работают видеозвонки по WebRTC — в
теории и на практике
• Подводные камни, грабли WebRTC, наш
опыт создания видео-кластера
• Подходы к созданию мобильного
приложения
• Как устроены видеозвонки в платформе
BitrixMobile

5. Как мы общаемся?
Распределенная команда…
Skype
Google Hangouts
Обмен документами, изображениями,
паролями…

6. Риски
Нас могут слушать и … слушают.
Зависимость от инфраструктуры
вендора
Проприетарные протоколы
Развитие продукта в своих целях

7. WebRTC или не WebRTC?
Skype, Google Hangouts – не WebRTC!
Плагины, закрытые протоколы, кластеры
вендора
WebRTC – peer-to-peer
Открытая технология, HTML5
HD
Эффективные кодеки
Не нужен SIP

8. Стандарты
http://www.w3.org/TR/webrtc/ - “стандарт”
W3C Working Draft 13 September 2016
http://www.webrtc.org/ - реализация
(компании Google, Mozilla, Opera)
Chrome - stable
Firefox – stable
Opera - stable
Android (шероховатости)

9. Кодеки
HTML5 конкуренты формату H.264
WebM: VP8/Vorbis/Matroska
WebRTC: VP8/(Opus, iSAC, iLBC)
VP9 – c 01/2014 официальная поддержка
на YouTube

10. http://www.w3.org/TR/mediacapture-streams/
W3C Candidate Recommendation 19 May 2016
Media Capture and Streams – структура
браузерного API

11. Использование Media Capture and Streams
Работа с тегами Video,
объектами Canvas,
MediaStream,
MediaStreamTrack

12. «Real-time Communication Between Browsers»
RTCPeerConnection – видео-аудио связь между
браузерами
RTCDataChannel – передача данных в обе стороны
RTCStatsReport - статистика
WebRTC – структура API

13. На этом «мультики» заканчиваются

14. (C) Ilya Grigorik
И начинается технологический хардкор ;-)

15. Стек WebRTC

16. Сделали глубокий вдох…
(C) Ilya Grigorik

17. ICE – «как найти друг друга»
(C) Ilya Grigorik
«Interactive Connectivity Establishment (ICE)» (RFC 5245,
2010)
Браузеры «находят» друг друга, используя технологии
STUN/TURN.
Видео-аудио передается по протоколу SRTP (/UDP).
«Secure Real-time Transport Protocol» (RFC 3711, 2004)

18. STUN, TURN
«Session Traversal Utilities for NAT (STUN)»
(RFC 5245, 2008)
«Traversal Using Relays around NAT (TURN)»
(RFC 5766, 2010)
Сначала NAT изобрели, потом начали «обходить» 

19. Signaling
Браузеры передают описание сессии друг другу - SDP
«An Offer/Answer Model with the Session Description Protocol (SDP)»
(RFC 3264, 2002 год)
Сигналинг реализуете Вы в своем приложении

20. Signaling

21. Signaling
(C) Ilya Grigorik

22. Cтатусы peer
Браузеры обмениваются описанием
локальных потоков (streams) и портов
через SDP
v=0
o=jdoe 2890844526 2890842807 IN IP4 10.47.16.5
s=SDP Seminar
i=A Seminar on the session description protocol
u=http://www.example.com/seminars/sdp.pdf
e=j.doe@example.com (Jane Doe)
c=IN IP4 224.2.17.12/127
t=2873397496 2873404696
a=recvonly
m=audio 49170 RTP/AVP 0
m=video 51372 RTP/AVP 99
a=rtpmap:99 h263-1998/90000

23. Cтатусы ICE
Соединение установлено, когда
«состыкованы» все медиа-потоки.

24. Преодоление NAT

25. Преодоление NAT

26. Настройка файерволов
Вариант 1. Открыть все исходящие/входящие
UDP.
Вариант 2.
Открыть вх./исх. на TURN/STUN-сервер:
порт 3478 (UDP/TCP)
порт 5349 (TLS)
Открыть исходящие UDP на TURN/STUN сервер,
порты каналов (или все).

27. Софт для TURN/STUN
restund (BSD license)
TurnServer (GNU GPL)
rfc5766-turn-server (New BSD)
Licode – пример открытого MCU для видео-конференций по WebRTC

28. Собственный видео-кластер
turn.calls.bitrix24.com – поддержка любых видов NAT (STUN, TURN)
Кластер из 2 серверов. DNS-failover.
~10% соединений потребуют TURN/relay
1 relay stream => ~ 1Mbps

29. Групповые звонки по WebRTC
4 человека – (mesh network) часто
оптимально
Не нужен доп. софт.
Трафик!
MCU:
Medoose+Asterisk
Licode

30. Какое решение выбрать?
Мобильный сайт
Адаптив
Приложение

31. VSАдаптив Приложение
• Персонализация
• Скорость
• Контакт с брендом
• User Experience
• Push-уведомления
• Взаимодействие с другими
приложениями
• Поиск
• Трафик в 2x больше
• Низкая стоимость
• «Кроссплатформенность»
• Легко обновлять
• Легко разработать

32. VSАдаптив Приложение
* Исследование comScore
Больше уникальных юзеров Больше уникальных действий

33. Android Instant Apps
iOS Spotlight
Индексация контента поисковиками Интеграция с операционной системой
Поиск
VSАдаптив Приложение

34. Android Instant Apps iOS Spotlight
Google сможет индексировать контент приложений и
запускать приложение без установки прямо из поисковой
выдачи
Интеграция с локальным поиском. Средствами системы
можно найти контент в установленных приложениях

35. • Вы хотите дать клиенту богатый User Experience
• Необходимо часто взаимодействовать с пользователем
• Сайт/сервис подходит под определенную категорию
• Ваш сервис подразумевает частые повторные заказы
• Вы – онлайн сервис
• Сообщества, управляющие компании (ЖКХ)
• Необходимы функции, которые недоступны в браузере
А когда нужно делать приложение?

36. BitrixMobile
Приложение – это сайт

37. • Разработка на HTML+JS+CSS+PHP
• Кроссплатформенность
• Низкая стоимость разработки
• Масштабируемость
• Интеграция с нативными интерфейсами
• Возможность создавать оффлайн-приложения
• Конфигурирование через конструктор
• Тестирование на приложении для разработчиков
• Нет необходимости выпускать приложение после
внесения изменений на сервере
Продукт «1С-Битрикс: Мобильное приложение»

38. Apache Cordova

39. Как это работает
Разработка на PHP/JS/HTML
Мгновенный результат

40. Платформа BitrixMobile
Cordova
trixMobile Native
Mobile Application
Java, Objective-C
BitrixMobile JS
Контент
Javascript, HTML,
CSS
Сервер
Вызов JS-функции AВызов нативной функции A

41. Бесплатные инструменты разработки
JS API
+
NATIVE
Конструктор
HTML, CSS, Javascript
BitrixMobile JS API
Нативные элементы
Приложение
для разработчиков
2 31

42. bitrix_mobile_core.js
офлайн ресурсы
настройки
Публикация нашими специалистами
/index.html
/menu.html
/detail.html
/script.js
/style.css
/bitrix_mobile_core.js
РАЗРАБОТКА И НАСТРОЙКА
СБОРКА ПРИЛОЖЕНИЯ
С ВАШИМИ ФАЙЛАМИ И НАСТРОЙКАМИ
ПУБЛИКАЦИЯ
2 31

43. VSАдаптив Приложение
• Поиск
• Трафик в 2x больше
• Персонализация
• Скорость
• Контакт с брендом
• User Experience
• Push-уведомления
• Взаимодействие с другими
приложениями
• Низкая стоимость
• «Кроссплатформенность»
• Легко обновлять
• Легко разработать

44. VSАдаптив Приложение на BitrixMobile
• Поиск
• Трафик в 2x больше
• Персонализация
• Скорость
• Контакт с брендом
• User Experience
• Push-уведомления
• Взаимодействие с другими
приложениями
• Низкая стоимость
• «Кроссплатформенность»
• Легко обновлять
• Легко разработать

45. • Поддержка Android 6/iOS 10
• Новые плагины Cordova
• Возможность подключения фреймворков для
аналитики
• Поддержка авторизации через соц.сервисы.
• Real-time обновление оффлайн файлов
Планы по платформе BitrixMobile

46. Спасибо за
внимание!
Вопросы?
Александр Сербул
@AlexSerbul
serbul@1c-bitrix.ru