Видеозвонки в мобильном приложении и шаринг экрана Александр Сербул Руководитель направления
Видеозвонки в мобильном приложении и шаринг экрана
Александр СербулРуководитель направления
Карл… Карл, я закодил
звонки по WebRTC
на 10 строках
JavaScript!
Это очень круто,
пап!
Карл… Карл, я специалист по
BigData….
Это очень круто, пап!
Но я не понимаю, как ОНО
работает и кто такие чертовые
STUN, TURN и SCTP.
СОВСЕМ!!!
О чем поговорим...
• Как работают видеозвонки по WebRTC — в
теории и на практике
• Подводные камни, грабли WebRTC, наш
опыт создания видео-кластера
• Подходы к созданию мобильного
приложения
• Как устроены видеозвонки в платформе
BitrixMobile
Как мы общаемся?
Распределенная команда…
Skype
Google Hangouts
Обмен документами, изображениями,паролями…
Риски
Нас могут слушать и … слушают.
Зависимость от инфраструктурывендора
Проприетарные протоколы
Развитие продукта в своих целях
WebRTC или не WebRTC?
Skype, Google Hangouts – не WebRTC!Плагины, закрытые протоколы, кластеры вендора
WebRTC – peer-to-peerОткрытая технология, HTML5HDЭффективные кодекиНе нужен SIP
Стандарты
http://www.w3.org/TR/webrtc/ - “стандарт”W3C Working Draft 13 September 2016
http://www.webrtc.org/ - реализация(компании Google, Mozilla, Opera)
Chrome - stableFirefox – stableOpera - stable
Android (шероховатости)
Кодеки
HTML5 конкуренты формату H.264
WebM: VP8/Vorbis/Matroska
WebRTC: VP8/(Opus, iSAC, iLBC)
VP9 – c 01/2014 официальная поддержка на YouTube
http://www.w3.org/TR/mediacapture-streams/W3C Candidate Recommendation 19 May 2016
Media Capture and Streams – структура браузерного API
Использование Media Capture and Streams
Работа с тегами Video, объектами Canvas, MediaStream, MediaStreamTrack
«Real-time Communication Between Browsers»
RTCPeerConnection – видео-аудио связь между браузерами
RTCDataChannel – передача данных в обе стороны
RTCStatsReport - статистика
WebRTC – структура API
На этом «мультики» заканчиваются
(C) Ilya Grigorik
И начинается технологический хардкор ;-)
Стек WebRTC
Сделали глубокий вдох…
(C) Ilya Grigorik
ICE – «как найти друг друга»
(C) Ilya Grigorik
«Interactive Connectivity Establishment (ICE)» (RFC 5245, 2010)
Браузеры «находят» друг друга, используя технологии STUN/TURN.
Видео-аудио передается по протоколу SRTP (/UDP).«Secure Real-time Transport Protocol» (RFC 3711, 2004)
STUN, TURN
«Session Traversal Utilities for NAT (STUN)»(RFC 5245, 2008)
«Traversal Using Relays around NAT (TURN)»(RFC 5766, 2010)
Сначала NAT изобрели, потом начали «обходить»
Signaling
Браузеры передают описание сессии друг другу - SDP
«An Offer/Answer Model with the Session Description Protocol (SDP)» (RFC 3264, 2002 год)
Сигналинг реализуете Вы в своем приложении
Signaling
Signaling
(C) Ilya Grigorik
Cтатусы peer
Браузеры обмениваются описанием локальных потоков (streams) и портов через SDP
v=0
o=jdoe 2890844526 2890842807 IN IP4 10.47.16.5s=SDP Seminari=A Seminar on the session description protocolu=http://www.example.com/seminars/[email protected] (Jane Doe)c=IN IP4 224.2.17.12/127t=2873397496 2873404696a=recvonlym=audio 49170 RTP/AVP 0m=video 51372 RTP/AVP 99a=rtpmap:99 h263-1998/90000
Cтатусы ICE
Соединение установлено, когда «состыкованы» все медиа-потоки.
Преодоление NAT
Преодоление NAT
Настройка файерволов
Вариант 1. Открыть все исходящие/входящие UDP.
Вариант 2. Открыть вх./исх. на TURN/STUN-сервер:порт 3478 (UDP/TCP)
порт 5349 (TLS)
Открыть исходящие UDP на TURN/STUN сервер,
порты каналов (или все).
Софт для TURN/STUN
restund (BSD license)TurnServer (GNU GPL)rfc5766-turn-server (New BSD)
Licode – пример открытого MCU для видео-конференций по WebRTC
Собственный видео-кластер
turn.calls.bitrix24.com – поддержка любых видов NAT (STUN, TURN)
Кластер из 2 серверов. DNS-failover.
~10% соединений потребуют TURN/relay
1 relay stream => ~ 1Mbps
Групповые звонки по WebRTC
4 человека – (mesh network) часто оптимально
Не нужен доп. софт.
Трафик!
MCU:Medoose+AsteriskLicode
Какое решение выбрать?
Мобильный сайтАдаптив
Приложение
VSАдаптив Приложение
• Персонализация
• Скорость
• Контакт с брендом
• User Experience
• Push-уведомления
• Взаимодействие с другими приложениями
• Поиск
• Трафик в 2x больше
• Низкая стоимость
• «Кроссплатформенность»
• Легко обновлять
• Легко разработать
VSАдаптив Приложение
* Исследование comScore
Больше уникальных юзеров Больше уникальных действий
Android Instant Apps
iOS Spotlight
Индексация контента поисковиками Интеграция с операционной системой
Поиск
VSАдаптив Приложение
Android Instant Apps iOS Spotlight
Google сможет индексировать контент приложений и запускать приложение без установки прямо из поисковой выдачи
Интеграция с локальным поиском. Средствами системы можно найти контент в установленных приложениях
• Вы хотите дать клиенту богатый User Experience
• Необходимо часто взаимодействовать с пользователем
• Сайт/сервис подходит под определенную категорию
• Ваш сервис подразумевает частые повторные заказы
• Вы – онлайн сервис
• Сообщества, управляющие компании (ЖКХ)
• Необходимы функции, которые недоступны в браузере
А когда нужно делать приложение?
BitrixMobile
Приложение – это сайт
• Разработка на HTML+JS+CSS+PHP• Кроссплатформенность• Низкая стоимость разработки• Масштабируемость• Интеграция с нативными интерфейсами• Возможность создавать оффлайн-приложения• Конфигурирование через конструктор• Тестирование на приложении для разработчиков• Нет необходимости выпускать приложение после
внесения изменений на сервере
Продукт «1С-Битрикс: Мобильное приложение»
Apache Cordova
Как это работает
Разработка на PHP/JS/HTML
Мгновенный результат
Платформа BitrixMobile
Cordova
BitrixMobile Native
Mobile Application
Java, Objective-C
BitrixMobile JS
Контент
Javascript, HTML,
CSS
Сервер
Вызов JS-функции AВызов нативной функции A
Бесплатные инструменты разработки
JS API+
NATIVE
КонструкторHTML, CSS, Javascript
BitrixMobile JS APIНативные элементы
Приложениедля разработчиков
2 31
bitrix_mobile_core.js
офлайн ресурсы
настройки
Публикация нашими специалистами
/index.html/menu.html/detail.html/script.js/style.css/bitrix_mobile_core.js
РАЗРАБОТКА И НАСТРОЙКАСБОРКА ПРИЛОЖЕНИЯ
С ВАШИМИ ФАЙЛАМИ И НАСТРОЙКАМИПУБЛИКАЦИЯ
2 31
VSАдаптив Приложение
• Поиск
• Трафик в 2x больше
• Персонализация
• Скорость
• Контакт с брендом
• User Experience
• Push-уведомления
• Взаимодействие с другими приложениями
• Низкая стоимость
• «Кроссплатформенность»
• Легко обновлять
• Легко разработать
VSАдаптив Приложение на BitrixMobile
• Поиск
• Трафик в 2x больше
• Персонализация
• Скорость
• Контакт с брендом
• User Experience
• Push-уведомления
• Взаимодействие с другими приложениями
• Низкая стоимость
• «Кроссплатформенность»
• Легко обновлять
• Легко разработать
• Поддержка Android 6/iOS 10
• Новые плагины Cordova
• Возможность подключения фреймворков для
аналитики
• Поддержка авторизации через соц.сервисы.
• Real-time обновление оффлайн файлов
Планы по платформе BitrixMobile