Видеозвонки и шаринг экрана в мобильном приложении
-
Upload
voximplant -
Category
Technology
-
view
80 -
download
2
Transcript of Видеозвонки и шаринг экрана в мобильном приложении
![Page 1: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/1.jpg)
Видеозвонки в мобильном приложении и шаринг экрана
Александр СербулРуководитель направления
![Page 2: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/2.jpg)
Карл… Карл, я закодил
звонки по WebRTC
на 10 строках
JavaScript!
Это очень круто,
пап!
![Page 3: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/3.jpg)
Карл… Карл, я специалист по
BigData….
Это очень круто, пап!
Но я не понимаю, как ОНО
работает и кто такие чертовые
STUN, TURN и SCTP.
СОВСЕМ!!!
![Page 4: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/4.jpg)
О чем поговорим...
• Как работают видеозвонки по WebRTC — в
теории и на практике
• Подводные камни, грабли WebRTC, наш
опыт создания видео-кластера
• Подходы к созданию мобильного
приложения
• Как устроены видеозвонки в платформе
BitrixMobile
![Page 5: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/5.jpg)
Как мы общаемся?
Распределенная команда…
Skype
Google Hangouts
Обмен документами, изображениями,паролями…
![Page 6: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/6.jpg)
Риски
Нас могут слушать и … слушают.
Зависимость от инфраструктурывендора
Проприетарные протоколы
Развитие продукта в своих целях
![Page 7: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/7.jpg)
WebRTC или не WebRTC?
Skype, Google Hangouts – не WebRTC!Плагины, закрытые протоколы, кластеры вендора
WebRTC – peer-to-peerОткрытая технология, HTML5HDЭффективные кодекиНе нужен SIP
![Page 8: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/8.jpg)
Стандарты
http://www.w3.org/TR/webrtc/ - “стандарт”W3C Working Draft 13 September 2016
http://www.webrtc.org/ - реализация(компании Google, Mozilla, Opera)
Chrome - stableFirefox – stableOpera - stable
Android (шероховатости)
![Page 9: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/9.jpg)
Кодеки
HTML5 конкуренты формату H.264
WebM: VP8/Vorbis/Matroska
WebRTC: VP8/(Opus, iSAC, iLBC)
VP9 – c 01/2014 официальная поддержка на YouTube
![Page 10: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/10.jpg)
http://www.w3.org/TR/mediacapture-streams/W3C Candidate Recommendation 19 May 2016
Media Capture and Streams – структура браузерного API
![Page 11: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/11.jpg)
Использование Media Capture and Streams
Работа с тегами Video, объектами Canvas, MediaStream, MediaStreamTrack
![Page 12: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/12.jpg)
«Real-time Communication Between Browsers»
RTCPeerConnection – видео-аудио связь между браузерами
RTCDataChannel – передача данных в обе стороны
RTCStatsReport - статистика
WebRTC – структура API
![Page 13: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/13.jpg)
На этом «мультики» заканчиваются
![Page 14: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/14.jpg)
(C) Ilya Grigorik
И начинается технологический хардкор ;-)
![Page 15: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/15.jpg)
Стек WebRTC
![Page 16: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/16.jpg)
Сделали глубокий вдох…
(C) Ilya Grigorik
![Page 17: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/17.jpg)
ICE – «как найти друг друга»
(C) Ilya Grigorik
«Interactive Connectivity Establishment (ICE)» (RFC 5245, 2010)
Браузеры «находят» друг друга, используя технологии STUN/TURN.
Видео-аудио передается по протоколу SRTP (/UDP).«Secure Real-time Transport Protocol» (RFC 3711, 2004)
![Page 18: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/18.jpg)
STUN, TURN
«Session Traversal Utilities for NAT (STUN)»(RFC 5245, 2008)
«Traversal Using Relays around NAT (TURN)»(RFC 5766, 2010)
Сначала NAT изобрели, потом начали «обходить»
![Page 19: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/19.jpg)
Signaling
Браузеры передают описание сессии друг другу - SDP
«An Offer/Answer Model with the Session Description Protocol (SDP)» (RFC 3264, 2002 год)
Сигналинг реализуете Вы в своем приложении
![Page 20: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/20.jpg)
Signaling
![Page 21: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/21.jpg)
Signaling
(C) Ilya Grigorik
![Page 22: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/22.jpg)
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
![Page 23: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/23.jpg)
Cтатусы ICE
Соединение установлено, когда «состыкованы» все медиа-потоки.
![Page 24: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/24.jpg)
Преодоление NAT
![Page 25: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/25.jpg)
Преодоление NAT
![Page 26: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/26.jpg)
Настройка файерволов
Вариант 1. Открыть все исходящие/входящие UDP.
Вариант 2. Открыть вх./исх. на TURN/STUN-сервер:порт 3478 (UDP/TCP)
порт 5349 (TLS)
Открыть исходящие UDP на TURN/STUN сервер,
порты каналов (или все).
![Page 27: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/27.jpg)
Софт для TURN/STUN
restund (BSD license)TurnServer (GNU GPL)rfc5766-turn-server (New BSD)
Licode – пример открытого MCU для видео-конференций по WebRTC
![Page 28: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/28.jpg)
Собственный видео-кластер
turn.calls.bitrix24.com – поддержка любых видов NAT (STUN, TURN)
Кластер из 2 серверов. DNS-failover.
~10% соединений потребуют TURN/relay
1 relay stream => ~ 1Mbps
![Page 29: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/29.jpg)
Групповые звонки по WebRTC
4 человека – (mesh network) часто оптимально
Не нужен доп. софт.
Трафик!
MCU:Medoose+AsteriskLicode
![Page 30: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/30.jpg)
Какое решение выбрать?
Мобильный сайтАдаптив
Приложение
![Page 31: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/31.jpg)
VSАдаптив Приложение
• Персонализация
• Скорость
• Контакт с брендом
• User Experience
• Push-уведомления
• Взаимодействие с другими приложениями
• Поиск
• Трафик в 2x больше
• Низкая стоимость
• «Кроссплатформенность»
• Легко обновлять
• Легко разработать
![Page 32: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/32.jpg)
VSАдаптив Приложение
* Исследование comScore
Больше уникальных юзеров Больше уникальных действий
![Page 33: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/33.jpg)
Android Instant Apps
iOS Spotlight
Индексация контента поисковиками Интеграция с операционной системой
Поиск
VSАдаптив Приложение
![Page 34: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/34.jpg)
Android Instant Apps iOS Spotlight
Google сможет индексировать контент приложений и запускать приложение без установки прямо из поисковой выдачи
Интеграция с локальным поиском. Средствами системы можно найти контент в установленных приложениях
![Page 35: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/35.jpg)
• Вы хотите дать клиенту богатый User Experience
• Необходимо часто взаимодействовать с пользователем
• Сайт/сервис подходит под определенную категорию
• Ваш сервис подразумевает частые повторные заказы
• Вы – онлайн сервис
• Сообщества, управляющие компании (ЖКХ)
• Необходимы функции, которые недоступны в браузере
А когда нужно делать приложение?
![Page 36: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/36.jpg)
BitrixMobile
Приложение – это сайт
![Page 37: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/37.jpg)
• Разработка на HTML+JS+CSS+PHP• Кроссплатформенность• Низкая стоимость разработки• Масштабируемость• Интеграция с нативными интерфейсами• Возможность создавать оффлайн-приложения• Конфигурирование через конструктор• Тестирование на приложении для разработчиков• Нет необходимости выпускать приложение после
внесения изменений на сервере
Продукт «1С-Битрикс: Мобильное приложение»
![Page 38: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/38.jpg)
Apache Cordova
![Page 39: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/39.jpg)
Как это работает
Разработка на PHP/JS/HTML
Мгновенный результат
![Page 40: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/40.jpg)
Платформа BitrixMobile
Cordova
BitrixMobile Native
Mobile Application
Java, Objective-C
BitrixMobile JS
Контент
Javascript, HTML,
CSS
Сервер
Вызов JS-функции AВызов нативной функции A
![Page 41: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/41.jpg)
Бесплатные инструменты разработки
JS API+
NATIVE
КонструкторHTML, CSS, Javascript
BitrixMobile JS APIНативные элементы
Приложениедля разработчиков
2 31
![Page 42: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/42.jpg)
bitrix_mobile_core.js
офлайн ресурсы
настройки
Публикация нашими специалистами
/index.html/menu.html/detail.html/script.js/style.css/bitrix_mobile_core.js
РАЗРАБОТКА И НАСТРОЙКАСБОРКА ПРИЛОЖЕНИЯ
С ВАШИМИ ФАЙЛАМИ И НАСТРОЙКАМИПУБЛИКАЦИЯ
2 31
![Page 43: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/43.jpg)
VSАдаптив Приложение
• Поиск
• Трафик в 2x больше
• Персонализация
• Скорость
• Контакт с брендом
• User Experience
• Push-уведомления
• Взаимодействие с другими приложениями
• Низкая стоимость
• «Кроссплатформенность»
• Легко обновлять
• Легко разработать
![Page 44: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/44.jpg)
VSАдаптив Приложение на BitrixMobile
• Поиск
• Трафик в 2x больше
• Персонализация
• Скорость
• Контакт с брендом
• User Experience
• Push-уведомления
• Взаимодействие с другими приложениями
• Низкая стоимость
• «Кроссплатформенность»
• Легко обновлять
• Легко разработать
![Page 45: Видеозвонки и шаринг экрана в мобильном приложении](https://reader036.fdocuments.net/reader036/viewer/2022081422/587414ae1a28abcb5b8b5099/html5/thumbnails/45.jpg)
• Поддержка Android 6/iOS 10
• Новые плагины Cordova
• Возможность подключения фреймворков для
аналитики
• Поддержка авторизации через соц.сервисы.
• Real-time обновление оффлайн файлов
Планы по платформе BitrixMobile