Додати відеодзвінки на сайт — критичне завдання для телемедицини, EdTech та SaaS. Ручне збирання WebRTC з ICE-кандидатами та STUN-серверами потребує десятків годин розробки та призводить до N+1 запитів, витоків пам'яті та несумісності браузерів. Whereby Embedded вирішує це за годину: один <whereby-embed> — і готова відеозв'язок з демонстрацією екрану, чатом та записом. За 5 років ми інтегрували Whereby у 50+ проектів — від лікарських консультацій до онлайн-шкіл. Наші інженери сертифіковані за Whereby API та гарантують роботу на всіх пристроях. В одному проекті ми скоротили час постачання відеозв'язку з 3 тижнів до 1 дня, а витрати на інфраструктуру — у 6 разів (економія склала понад $30 000 на рік). Нижче розберемо технічні деталі, які заощадять вам час та бюджет.
Проблеми, які вирішуємо
Складність WebRTC. Самописний відеозв'язок потребує налаштування ICE-серверів, обробки NAT та кодеків. Помилка на будь-якому етапі — і дзвінок не встановиться. Whereby бере це на себе: медіасервери, релей-сервери (TURN), трансляція відео в різних роздільних здатностях. У результаті ви отримуєте стабільний зв'язок без головного болю. Економія на серверній інфраструктурі — до 90%.
Масштабування. При зростанні навантаження самописне рішення потребує збільшення серверної інфраструктури. Whereby обробляє тисячі одночасних кімнат без вашої участі — ми тільки тримаємо API-ключ. Це знижує витрати на інфраструктуру в 5-10 разів, а при 1000 годин дзвінків на місяць економія може сягати $5000.
Підтримка пристроїв. Готовий веб-компонент коректно працює у всіх сучасних браузерах (Chrome, Firefox, Safari, Edge) на десктопі та мобільних. Самописний WebRTC потребує окремого тестування кожного браузера та пристрою.
Чому Whereby Embedded, а не самописний WebRTC?
Порівняння наочно показує виграш:
| Характеристика |
Самописний WebRTC |
Whereby Embedded |
| Час розробки |
2–4 тижні |
0,5–1 день |
| Серверна інфраструктура |
Свої TURN/STUN |
Готова (Whereby) |
| Тестування браузерів |
Кожен браузер |
Автоматично |
| Масштабування |
Ручне |
Автоматичне |
| Вартість обслуговування |
Висока |
Фіксована підписка від $99/міс |
Зазначимо: як вказано в WebRTC API, реалізація потребує глибоких знань мережевих протоколів. Готовий компонент дає виграш у 10–20 разів за часом розробки та позбавляє головного болю з трансляцією. Крім того, Whereby підтримує запис дзвінків та аналітику — це потребує додаткових інтеграцій у самописному рішенні.
Поширені проблеми
Нижче — часті помилки при самостійній інтеграції та способи їх уникнути.
| Помилка |
Симптом |
Рішення |
| Пропущений скрипт CDN |
Веб-компонент не відображається |
Додати <script> перед закриваючим </body> |
| Некоректний endDate |
Кімнати не відкриваються після закінчення часу |
Встановити запас 1–2 години від запланованого завершення |
| Відсутність обробки подій |
UI не оновлюється після дзвінка |
Підписатися на ready та leave |
| Ігнорування hostRoomUrl |
Організатор не може модерирувати |
Використовувати hostRoomUrl для входу модератора |
Як відбувається інтеграція?
Процес вкладається в 3 етапи:
-
Створення кімнати через API — ми формуємо POST-запит до https://api.whereby.dev/v1/meetings з вашим API-ключем. Кімната може бути тимчасовою (до 2 годин) або постійною (з продовженням). Ми автоматизуємо створення кімнат під ваш сценарій.
-
Вбудовування веб-компонента — додаємо скрипт у <head> та розміщуємо <whereby-embed> у потрібному місці сторінки. Для React/Next.js декларуємо тип і підписуємося на події ready та leave. Налаштування займає хвилини.
-
Кастомізація — налаштовуємо відображення (мінімальний режим, прибираємо премітинг-скрин, вмикаємо чат або демонстрацію). При необхідності зв'язуємо з вашою CRM для логування дзвінків. Усі параметри документуємо.
Приклад створення кімнати через API
curl -X POST https://api.whereby.dev/v1/meetings \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{"endDate": "2025-12-31T23:59:59Z", "roomMode": "normal"}'
Які налаштування безпеки доступні?
Whereby Embedded надає гнучкі атрибути для контролю функціональності:
-
skip-media-permission-prompt — вимикає екран запиту дозволів камери.
-
chat="off" — приховує чат.
-
background="off" — вимикає розмиття фону.
-
screenshare="off" — забороняє демонстрацію екрану.
Для корпоративних проектів доступний аудит логів та інтеграція з JWT-аутентифікацією. Це дозволяє дотримуватися вимог безпеки та конфіденційності.
Що входить у роботу
- Інтеграція Whereby API — створення та керування кімнатами.
- Вбудовування веб-компонента — коректна робота у вашому фреймворку.
- Документація — опис усіх атрибутів та подій.
- Доступи — налаштування API-ключа та середовища.
- Навчання — як керувати кімнатами через адмінку.
- Підтримка — 2 тижні після здачі (виправлення можливих багів).
Терміни
Базова інтеграція (створення кімнати + веб-компонент) — 0,5–1 день. Якщо потрібна кастомна логіка (автоматичне створення кімнат при записі на консультацію, інтеграція з JWT-аутентифікацією) — до 3 днів. Терміни фіксуємо в договорі.
Зв'яжіться з нами для безкоштовної оцінки вашого проекту — ми запропонуємо оптимальне рішення та точні терміни. Замовте інтеграцію Whereby Embedded та отримайте стабільний відеозв'язок вже наступного дня.
Розробка систем реального часу: WebRTC, SSE, WebSocket
Ми знаємо, як боляче, коли полінг вбиває сервер. Один наш проєкт — платформа для онлайн-аукціонів — використовував полінг кожні 2 секунди. Під навантаженням у 400 учасників сервер отримував 12 000 HTTP-запитів на хвилину заради однієї ставки. 90% відповідей — пусті. Після переходу на WebSocket навантаження впало в 15 разів, економія серверних ресурсів — значна сума. Замовте розробку real-time функцій під ключ — отримайте готове рішення з гарантією стабільності.
Реалізація real-time на продакшні — не просто бібліотека. Ми проектуємо архітектуру під навантаження, сценарії та бюджет. Нижче — розбір ключових рішень з прикладами.
Три транспорти реального часу: коли що вибирати
Server-Sent Events працюють поверх звичайного HTTP/1.1 або HTTP/2. Браузер відкриває з'єднання, сервер тримає його відкритим і пушить події у форматі text/event-stream. Автоматичне перепідключення вбудоване — reconnect-логіка не потрібна. Обмеження: тільки сервер → клієнт. Ідеально для нотифікацій, прогресу довгих завдань, live-фідів.
WebSocket — повнодуплексний канал після HTTP Upgrade-рукопотискання. Браузер і сервер обмінюються фреймами в обидві сторони. Підходить для чатів, спільного редагування, ігор, торгових терміналів. Вимагає окремої обробки reconnect-логіки та heartbeat (ping/pong кожні 30 секунд, інакше NAT-таблиці закривають з'єднання).
WebRTC — peer-to-peer аудіо/відео та дані між браузерами напряму, минаючи сервер. Сервер потрібен лише для сигналізації (STUN/TURN для обходу NAT). TURN-сервер потрібен у 20–30% випадків (корпоративні мережі, симетричний NAT). Для сервісу телемедицини ми впровадили WebRTC: затримка звуку впала з 800 мс (через релей) до 50 мс (P2P). TURN-сервер знадобився лише 15% сесій, що зекономило значні кошти на трафіку.
WebSocket (Wikipedia)
WebRTC (Wikipedia)
Як правильно вибрати транспорт: покрокова інструкція
- Визначте сценарій обміну даними: однонаправлений (сервер → клієнт) — SSE; двонаправлений з низькою затримкою — WebSocket; аудіо/відео — WebRTC.
- Оцініть вимоги до затримки. Якщо прийнятно <500 мс — підійде SSE; для <100 мс і двонаправленості — WebSocket; для <50 мс і P2P — WebRTC.
- Перевірте бюджет на інфраструктуру. SSE використовує звичайні HTTP-сервери, WebSocket вимагає тримати з'єднання в пам'яті, WebRTC може потребувати TURN-сервер (додаткові витрати).
- Врахуйте масштабування: для 100k+ з'єднань розгляньте WebSocket-gateway (Centrifugo, Pushpin).
| Транспорт |
Напрямок |
Затримка |
Складність реалізації |
Типові сценарії |
| WebSocket |
Повний дуплекс |
< 100 мс |
Середня |
Чати, ігри, торгівля |
| SSE |
Тільки сервер → клієнт |
< 500 мс |
Низька |
Нотифікації, стрічки прогресу |
| WebRTC |
P2P аудіо/відео/дані |
< 50 мс |
Висока |
Відеодзвінки, передача файлів |
Що таке CRDT і чим він кращий за Operational Transformation?
Спільне редагування — не просто «хто останній записав, той і правий». Без алгоритму злиття колізій два користувачі вставляють текст у позицію 45, перший зберігає — позиція зсувається, другий зберігає поверх — операція застосовується до застарілого стану. Текст дублюється або втрачається.
OT (Operational Transformation) потребує сервера для вирішення конфліктів, CRDT (Conflict-free Replicated Data Types) працює без централізованого координатора. Yjs — найбільш зріла CRDT-бібліотека для браузера. Інтегрується з ProseMirror, TipTap, CodeMirror, Monaco Editor.
Порівняння бібліотек для спільного редагування
| Бібліотека |
Алгоритм |
Підтримка редакторів |
Складність |
Продуктивність |
| Yjs |
CRDT |
ProseMirror, TipTap, CodeMirror, Monaco |
Середня |
Висока (<10 мс при 100 операціях) |
| ShareDB |
OT |
ProseMirror, Quill |
Середня |
Середня (потрібен сервер для злиття) |
| Automerge |
CRDT |
Будь-який (RichText) |
Висока |
Хороша (але пам'ять зростає швидше за Yjs) |
Проблема: розмір Yjs-документа зростає через історію операцій. Потрібне періодичне збирання сміття — snapshot документа + очищення старих операцій. Без цього документ, над яким працювали рік, може важити 50 МБ.
Приклад heartbeat на WebSocket (Node.js)
const ws = new WebSocket('wss://example.com');
let pingInterval;
ws.on('open', () => {
pingInterval = setInterval(() => {
ws.ping();
setTimeout(() => {
if (ws.readyState === WebSocket.OPEN) ws.terminate();
}, 5000);
}, 25000);
});
ws.on('close', () => clearInterval(pingInterval));
Типові помилки при впровадженні real-time
Memory leak на сервері — забули видалити обробник події при закритті з'єднання. На Node.js heap зростає ~1 МБ/год. EventEmitter попереджає про 10+ слухачів, але не завжди це помічають.
Thundering herd при реконнекті. Сервер упав на 30 секунд, піднявся — 10 000 клієнтів намагаються перепідключитися одночасно. Exponential backoff з jitter обов'язковий: delay = Math.min(baseDelay * 2^attempt + random(0, 1000), maxDelay).
Відсутність індикації втрати з'єднання. WebSocket не завжди сповіщає про розрив (наприклад, телефон пішов у тунель). Heartbeat вирішує проблему.
Процес роботи
Починаємо з вибору транспорту під сценарії — іноді в одному проєкті потрібні всі три: SSE для системних нотифікацій, WebSocket для чату, WebRTC для відеодзвінків. Проектуємо протокол повідомлень (JSON з type і payload, рідше бінарний через MessagePack). Розробляємо з тестуванням race conditions — це не покривається юніт-тестами.
Навантажувальне тестування з k6 + k6/experimental/websockets: моделюємо 5 000 одночасних з'єднань з реальним патерном. Інженери мають сертифікати з WebSocket і WebRTC, гарантуємо стабільність 99.9%.
Що входить
- Архітектура real-time шару (вибір транспорту, протокол повідомлень)
- Реалізація з навантажувальним тестуванням (k6, сценарії race conditions)
- Інтеграція з бекендом через Redis Pub/Sub або аналогічну шину
- Документація з протоколу та схем даних
- Навчання вашої команди
- Технічна підтримка 2 тижні після запуску
Чому Centrifugo може бути вигіднішим за Socket.io?
Socket.io простіше в налаштуванні (1–2 дні), але центрифуга на Go тримає 1M+ з'єднань на одній ноді. Для 100k+ одночасних клієнтів Centrifugo економить до 40% витрат на інфраструктуру. Отримайте консультацію — ми допоможемо вибрати стек під ваше навантаження.
Строки
- Базовий WebSocket-чат або нотифікації поверх існуючого API: 1–3 тижні.
- Коллаборативний редактор з Yjs і persistence: 4–8 тижнів.
- WebRTC відеодзвінки з записом: 6–12 тижнів (значна частина — інтеграція з медіасервером mediasoup або Janus).
Зв'яжіться з нами для оцінки вашого проєкту. Обговоріть завдання з інженером — оцінимо складність і строки індивідуально.
