WebRTC: магія прямих з'єднань між браузерами

Що таке WebRTC

WebRTC (Web Real-Time Communication) — це набір технологій, який в режимі реального часу дозволяє здійснювати обмін аудіо, відео та даними безпосередньо між браузерами та іншими пристроями, без необхідності використання традиційних серверів для проксування медіафайлів. Це стало можливим завдяки використанню протоколів Peer-to-Peer (P2P), що дає можливість встановлювати прямі з'єднання між користувачами.

Вперше продукт WebRTC був представлений Google у 2011 році. Але з часом до його розвитку долучилися провідні гравці ринку — як телекомунікаційні компанії, так і розробники браузерів. У 2017 році Apple також оголосила про повну підтримку WebRTC у Safari та на пристроях з iOS, що закріпило статус цієї технології як загальноприйнятого стандарту.

Особливість WebRTC полягає в тому, що вона дозволяє створити відеочат між користувачами без використання стороннього сервера — для цього потрібен лише браузер. Також WebRTC не потребує інсталяції додаткових плагінів: щоб відеопотоки в браузері працювали плавно, достатньо написати код на HTML або JavaScript. Плюс WebRTC підходить не тільки для відеочатів: за допомогою цієї технології можна передавати файли будь-якого формату і текстові повідомлення.

Як працює WebRTC?

WebRTC може працювати на двох «шляхах передачі» — TCP і UDP:

• TCP можна уявити як поштову службу, яка доставляє кожен лист у правильному порядку й без помилок. Завдяки цьому відео передається стабільно, без втрат. Але є мінус: така доставка займає більше часу й має обмеження по обсягу — наприклад, Full HD відео на кількох учасників одночасно передати складно.
• UDP працює швидше — це як миттєве повідомлення без перевірки, чи кожен символ дійшов. Тут можна легко передавати якісне відео великій кількості людей, але іноді окремі «шматки» зображення можуть загубитися. Через це картинка може смикатися або ставати менш чіткою.

Схематично принцип передачі даних через протоколи TCP і UDP виглядає так:

У дзвінках між невеликою кількістю людей все працює напряму між браузерами. Але якщо учасників багато (сотні людей у великій конференції), потрібні додаткові сервери. Вони допомагають розподілити навантаження і зробити відео стабільним для всіх.

API WebRTC

У своїй роботі трансформаційна технологія WebRTC використовує три основні інструменти — API (Application Program Interface) Javascript:

1. getUserMedia — потокове медіа, яке отримує аудіо та відео.

   Цей інструмент дозволяє браузеру працювати з вашою камерою та мікрофоном. Ви можете обрати, яку камеру використати, який мікрофон підключити і навіть налаштувати якість відео. Наприклад, щоб зв’язок не гальмував на слабкому Інтернеті, можна знизити якість до 360р. А вбудований алгоритм прибирає фоновий шум і робить голос більш чистим.

2. RTCPeerConnection — однорангове підключення, яке передає аудіо та відео.

   Це «серце» WebRTC, яке забезпечує пряме з’єднання між двома браузерами. Завдяки цьому відео та звук передаються безпосередньо від однієї людини до іншої, без проміжних серверів.

   Але є одна проблема: інтернет-провайдери часто використовують NAT (технологію, яка може блокувати пряме з’єднання). Щоб обійти це обмеження, WebRTC має вбудовану підтримку спеціальних серверів (STUN/TURN). Вони допомагають «знайти шлях» між двома користувачами і уникнути збоїв у підключенні.

3. RTCDataChannel — канал даних, який передає довільні дані.

   Цей інструмент дозволяє надсилати будь-які дані разом із відео та звуком. Це може бути текст (як у чаті) чи файли (документи, картинки тощо). Це відбувається напряму між користувачами, без потреби у проміжному сервері. За розміром файлів і швидкістю взаємодія самого браузера — зазвичай можна передавати кілька гігабайт.

Простіше кажучи, WebRTC дає змогу не тільки бачити й чути одне одного напряму через браузер, а й ще ділитися файлами чи листуватися у вбудованому чаті без зайвих програм.

Переваги використання WebRTC

WebRTC відкриває новий рівень онлайн-комунікацій завдяки низці своїх переваг:

1. Безпечність.

   Технологія WebRTC працює через перевірені мережеві протоколи, що гарантує безпеку передачі даних. Система не використовує ніяких додаткових серверів або застосунків-посередників, а всі корпоративні метадані залишаються на сервері компанії або безпосередньо на пристроях учасників (завдяки Р2Р протоколам).

   Також в WebRTC застосовується постійне шифрування («always-on encryption») голосу та відео. Це відбувається за допомогою протоколу Secure RTP (SRTP), який не лише шифрує дані, але й гарантує їхню автентичність. Це особливо корисно в умовах, коли користувачі з'єднуються через незахищені мережі Wi-Fi, оскільки запобігає можливості прослуховування або записи вашого дзвінка.

2. Надійність.

   Надійність сесії має особливе значення в ситуаціях, коли мережа має обмеження, наприклад, через використання трансляторів мережевих адрес (NAT). NAT — це технологія, яка дозволяє кільком пристроям у домашній або корпоративній мережі мати одну публічну IP-адресу, але іноді вона може заважати правильній роботі інтернет-з'єднань або навіть блокувати деякі протоколи.

   WebRTC здатна обходитись без необхідності передачі даних через медіасервери, що дозволяє безпосередньо з'єднувати користувачів один з одним. Це допомагає зменшити затримки та покращити якість відео і звуку. Наприклад, коли ви здійснюєте відеодзвінок, дані передаються безпосередьно між вами і вашим співрозмовником без зайвих посередників, що значно знижує можливі затримки та покращує чіткість зв'язку.

   Крім того, таке з'єднання зменшує навантаження на сервери. Оскільки більшість даних не потрібно передавати через сторонні сервери, це дозволяє оптимізувати використання ресурсів і забезпечити більш стабільну та ефективну роботу системи в цілому.

3. Універсальність.

   WebRTC працює практично на будь-якому пристрої і в будь-якому браузері, незалежно від операційної системи. Ви можете використовувати технологію для відеозв'язку чи голосових дзвінків, навіть якщо у вас різні пристрої — один може працювати на Windows, а інший на macOS чи Android, і все одно зв'язок буде налаштований без проблем.

   WebRTC дозволяє створювати зв'язки в режимі реального часу, навіть якщо ви користуєтеся різними браузерами (Google Chrome, Mozilla Firefox, Safari або Microsoft Edge). Це стало можливим завдяки використанню стандартних API від W3C (World Wide Web Consortium) та протоколів від IETF (Internet Engineering Task Force), які визначають, як повинні працювати ці технології, щоб забезпечити сумісність між різними системами.

   Завдяки такій універсальності, користувачі можуть здійснювати відеодзвінки та передавати дані без необхідності в спеціалізованих програмах або додаткових налаштуваннях — достатньо просто мати стандартний браузер, який підтримує WebRTC. Це робить технологію доступною та зручною для широкого кола користувачів, незалежно від того, який пристрій чи операційну систему ви використовуєте.

4. Якість аудіо та відео.
   Технологія WebRTC використовує спеціальні «розумні» кодеки:
   • Opus для звуку, який робить голоси природними, без металевого відлуння чи спотворень, а ще вміє підлаштовуватися під якість Інтернету, щоб навіть у складних умовах мовлення залишалося розбірливим.
   • VP8 для відео, який стискає зображення так, щоб воно було чітким і не займало забагато трафіку, тому відео виглядає плавним, без постійних зависань.

   Завдяки цьому користувач отримує якісне звучання і чітке відео без необхідності щось встановлювати чи налаштовувати.

5. Можливість використання декількох медіапотоків.

   Коли ви розмовляєте по відеозв’язку і раптом Інтернет починає «гальмувати», то у звичайних сервісах це може призвести до зависань, спотвореного голосу або чорного екрану. WebRTC працює інакше: він сам підлаштовується під якість Інтернету. Якщо з’єднання слабшає, система зменшує якість відео чи трохи стискає звук, щоб розмова залишалась зрозумілою і без розривів. Коли Інтернет знову стає стабільним — якість автоматично підвищується.

   Це можливо завдяки використанню спеціального набору протоколів — RTCP (для керування передачею) та SAVPF (для безпечної передачі аудіо й відео зі зворотним зв’язком). З їх допомогою браузер, який отримує медіа, постійно повідомляє браузеру-відправнику, як почувається мережа: чи є затримки, втрати пакетів тощо. Відправник аналізує ці дані й одразу підлаштовує якість зв’язку, щоб розмова залишалася стабільною навіть тоді, коли мережа нестабільна.

6. Адаптивність.

   Уявімо, що один учасник дзвінка сидить за ноутбуком із швидким Інтернетом, а інший підключився зі смартфона через повільне мобільне з'єднання. WebRTC вміє домовлятися для кожного пристрою окремо, щоб підібрати оптимальну якість звуку й відео. Тобто ноутбук може отримувати картинку у високій роздільності, а смартфон — у спрощеній, щоб не перевантажувати мережу. Завдяки цьому обидва користувача залишаються на зв’язку без зривів, і кожен отримує найкращу якість, доступну для його умов.

   Процес, який дозволяє двом пристроям «познайомитися» між собою, називається «signaling». Спочатку обидва пристроя підключаються до спеціального сервера-посередника, через який обмінюються технічною інформацією: який формат відео вони підтримують, який розмір зображення краще передавати, як краще стискати звук тощо. Коли все узгоджено, пристрої вже можуть напряму встановити з’єднання і почати спілкування.

   

7. Сумісність із VoIP та відео.

   Як правило, в компаніях вже є телефони для інтернет-дзвінків чи відеоконференцій, які працюють за старішими стандартами. Зазвичай нові технології «не дружать» зі старими пристроями, і це створює проблему сумісності.

   Найбільша перевага WebRTC полягає в тому, що ця технологія легко інтегрується з тим, що вже є, і не вимагає повної заміни обладнання чи програм. WebRTC вміє спілкуватися з багатьма існуючими системами — наприклад, із корпоративними телефонами (SIP), месенджерами (XMPP, Jingle) чи навіть звичайними телефонними мережами (PSTN). Якщо пристрої дотримуються стандартних правил, вони майже напевно зможуть працювати з WebRTC. А там, де потрібне додаткове перетворення форматів, можна використати спеціальні шлюзи, які вже доступні на ринку.

Кому й чим корисна WebRTC?

А тепер давайте розглянемо користь від WebRTC для різних категорій:

• здійснювати відео- та аудіодзвінки безпосередньо в браузері без встановлення додаткового ПЗ;
• отримувати високу якість звуку й відео навіть при нестабільному Інтернеті;
• користуватися відкритим API легко і просто: достатньо відкрити сторінку чи посилання — і зв’язок уже працює.

• зменшити поріг входу та спростити процес розробки, оскільки є частиною специфікації HTML5, підтримується міжнародними стандартами (IETF, W3C) і доступна безпосередньо в браузері через JavaScript;
• швидко й недорого запустити проєкт завдяки простоті архітектури: для базового прототипу достатньо лише двох браузерів та механізму обміну SDP;
• відкрити доступ до великої аудиторії без переписування під кожен клієнт, адже WebRTC підтримується в Chrome, Firefox, Opera і більшості сучасних мобільних браузерів;
• спростити інтеграцію відео- та аудіозв’язку у вебзастосунки завдяки стандартизованому API.

Загалом WebRTC ідеально підходить для створення браузерних застосунків для відеоконференцій, фактично дозволяючи реалізувати Skype всередині браузера.

• підключати спеціалістів безпосередньо під час відвідування користувачами сайту;
• пропонувати додаткові зручності, такі як спільний перегляд сторінки чи обмін файлами;
• максимально спростити процес підключення клієнтів до операторів (без встановлення програм і плагінів), тим самим забезпечуючи кращий клієнтський досвід;
• скоротити витрати на обладнання та обслуговування завдяки використанню стандартних вебтехнологій.

Для клієнта це виглядає так: один клік — і ви вже на зв’язку з компанією через відео чи голос, без зайвих кроків.

Вже сьогодні можна впевнено казати, що відкрита технологія WebRTC має перспективне майбутнє, оскільки відкриває нові можливості для інноваційного спілкування в режимі реального часу. Зі зростанням попиту на VoIP-дзвінки та програми OTT (Over-the-Top), WebRTC має всі шанси поступово замінити традиційні телефонні номери, забезпечуючи інтеграцію дзвінків безпосередньо через вебсайти та застосунки.