Розробляємо відчути між браузером і мобільним додатком

  • 27.03.17 2:21 •
  • flashphoner •
  • # 324914 •
  • Хабрахабр •
  • 8 •
  • 8100

- такий же як Forbes, тільки краще.


Імперії зла нерідко отримують промені ненависті з боку кінцевих користувачів. Не дивлячись на це, Uber частково оплачує наші поїздки, хоч і тимчасово, а Google надав значне прискорення технології WebRTC. яка б так і залишалася проприетарной і сильно платній софтиной для вузьких цілей b2b, якби не ІЗ.

WebRTC, Websockets і SIP


Досить часто плутаються поняття щодо WebRTC і Websocket. Іноді до цієї плутанини додається ще і SIP.


Точно можна сказати, що WebRTC не має прямого відношення ні до Websockets ні до SIP.


SIP - це текстовий протокол обміну повідомленнями. WebRTC іноді незаслужено називають SIP-му в браузері, швидше за все за те, що в SIP повідомленнях також використовується SDP для конфігурації кодеків і установки з'єднання.

Розробляємо відчути між браузером і мобільним додатком

  • Захоплення, кодування і відправка
  • Прийом декодування і відтворення
  • Подолання NAT і Firewall

І багато допоміжних функцій, таких як боротьба з джиттером, адаптивний бітрейт, контроль перевантажень мережі, і т.д.

Припустимо, ми захотіли додати до чату третього активного учасника або просто глядача. Хороший приклад в даному випадку - дебати. Два учасники розмовляють - інші дивляться. Ще один приклад - чат на трьох і більше учасників.

Розробляємо відчути між браузером і мобільним додатком


Подібні завдання, такі як

Розробляємо відчути між браузером і мобільним додатком

Розробляємо відчути між браузером і мобільним додатком

Розробляємо відчути між браузером і мобільним додатком

Розробляємо відчути між браузером і мобільним додатком


В даному прикладі відбувається наступне:

Розробляємо відчути між браузером і мобільним додатком

Можна дати цим елементам будь-які довільні ідентифікатори, наприклад id = "captureVideo» або id = "playbackVideo», але важливо, щоб ці елементи були присутні на сторінці.

Робоча HTML-сторінка з блоками localVideo і remoteVideo виглядає так:

Відправка потоку з вебкамери


При відтворенні ми вказуємо назву потоку, який будемо відтворювати і HTML div-елемент remoteVideo. в якому буде йти відтворення потоку, отриманого з сервера. Використовується метод API session.createStream (). Play ().

Повний вихідний код прикладу Two Way Streaming доступний для скачування тут.

Розробляємо відчути між браузером і мобільним додатком

Щоб розібратися як це працює, найпростіше зібрати і запустити приклад Streaming Min на базі Android SDK. Всі приклади доступні в репозиторії github.

1. Завантажуємо всі приклади


2. Завантажуємо SDK


3. підчіплюють SDK у вигляді aar-файлу до прикладів.


Зверніть увагу, що ми вказали скрипту export.sh шлях до завантажити файлу wcs-android-sdk-1.0.1.25.aar - Android SDK

В результаті в папці export / output буде повністю сконфігурованих проект, який можна відкрити в Android Studio

Залишилося тільки зібрати приклади з допомогою gradle.

1 - Створюємо конфігурацію запуску

Розробляємо відчути між браузером і мобільним додатком


2 - Вибираємо Gradle скрипт

Розробляємо відчути між браузером і мобільним додатком


3 - Запускаємо збірку

Розробляємо відчути між браузером і мобільним додатком


В результаті збірки ми повинні отримати apk-файли. які вже можна встановлювати на Android пристрій.

Розробляємо відчути між браузером і мобільним додатком

Розробляємо відчути між браузером і мобільним додатком

1. Створюємо з'єднуватись з сервером і вказуємо, що будуть використовуватися рендерер ...


2. Створюємо потік з довільним ім'ям і публікуємо потік на сервер.


3. Вказуємо ім'я потоку при відтворенні і забираємо потік з сервера.


Повний код класу StreamingMinActivity.java доступний тут. А код за все прикладу Streaming Min для Android доступний в репозиторії за цим посиланням.

Web Call Server

Розробляємо відчути між браузером і мобільним додатком

Технології та протоколи


WebRTC - технологія WebRTC
SDP - Session description protocol, RFC
Websocket - Websocket протокол, RFC

робочі приклади

Вихідний код прикладів

Схожі статті