Видеозвонки и шаринг экрана в мобильном приложении

Видеозвонки в мобильном приложении и шаринг экрана

Александр СербулРуководитель направления

Карл… Карл, я закодил

звонки по 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 (шероховатости)

http://www.w3.org/TR/webrtc/

http://www.webrtc.org/

Кодеки

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

http://www.w3.org/TR/mediacapture-streams/

Использование 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 больше

• Низкая стоимость

• «Кроссплатформенность»

• Легко обновлять

• Легко разработать


* Исследование comScore

Больше уникальных юзеров Больше уникальных действий

Android Instant Apps

iOS Spotlight

Индексация контента поисковиками Интеграция с операционной системой

Поиск


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


• Поиск





• User Experience







VSАдаптив Приложение на BitrixMobile

• Поиск





• User Experience







• Поддержка Android 6/iOS 10

• Новые плагины Cordova

• Возможность подключения фреймворков для

аналитики

• Поддержка авторизации через соц.сервисы.

• Real-time обновление оффлайн файлов

Планы по платформе BitrixMobile

Спасибо за

внимание!

Вопросы?

Александр Сербул@AlexSerbul

[email protected]

Technology

Видеозвонки и шаринг экрана в мобильном приложении