Актуальність.

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

Постановка задачі.

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

Мета роботи.

Мета — спроєктувати та реалізувати інтегровану систему, у якій WebRTC забезпечує безпосередню передачу медіа між учасниками, Node.js з Express і Socket.IO — сигналінг і координацію кімнат, а Supabase — автентифікацію, збереження профілів, заявок у друзі та стану присутності з політиками доступу на рівні рядків (RLS). Для демонстрації та тестування ззовні локальної мережі передбачено публічний HTTPS-тунель ngrok.

Архітектурне рішення.

Архітектура трирівнева з точки зору каналів зв’язку. Браузер — власний сервер: HTTP для видачі сторінок (лендінг, кабінет, кімната за числовим кодом) та WebSocket-транспорт Socket.IO для подій кімнати. Браузер — браузер: після обміну SDP та ICE-кандидатами встановлюються P2P-з’єднання; медіа шифрується на рівні протоколу WebRTC. Браузер — Supabase: REST/Auth для облікових даних і таблиць, Realtime для оновлення присутності друзів, Storage для аватарів. Таке розділення знижує навантаження на вузол сигналінгу порівняно з ретрансляцією відео через сервер і зменшує затримку для невеликої групи учасників.

Ключові елементи реалізації.

На сервері реалізовано кімнати Socket.IO з ідентифікатором у вигляді числового коду; події join-room, offer, answer, ice-candidate забезпечують сигналінг WebRTC без розбору вмісту SDP на сервері. Додаткові події підтримують стан треків, індикацію мовлення та чат з обмеженнями з боку сервера (наприклад, довжина повідомлення). У клієнті використовується послідовність: getUserMedia, RTCPeerConnection з STUN для обходу NAT, обмін сигналами через Socket.IO, відображення віддалених потоків у елементах video. Ліміт учасників у кімнаті (у документації проєкту — до шести) відповідає типовій моделі mesh-топології P2P, де кожен учасник підтримує кілька незалежних з’єднань.

Підсистема облікових записів і соціальних даних винесена в Supabase: таблиці профілів, заявок у друзі та присутності; політики RLS обмежують читання та запис так, щоб анонімний ключ клієнта не відкривав чужі дані. Конфігурація Supabase для браузера передається безпечним підмножином через окремий HTTP-endpoint (без service role на клієнті). Для аватарів використовується бакет сховища з політиками завантаження в «свою» область користувача.

Результати та властивості системи.

У результаті отримано працездатний веб-додаток з реєстрацією/входом або гостьовим режимом, кабінетом користувача, створенням і входом у кімнату за кодом, одночасною відео- та аудіоконференцією, чатом, копіюванням посилання для запрошення та доступом через ngrok з HTTPS. Інтерфейс адаптований під різні розміри екрана; конфіденційні параметри винесені в змінні оточення.

Обмеження і напрями вдосконалення.

У складних корпоративних мережах лише STUN може бути недостатнім; для промислової надійності доцільно додати TURN. Модель повного mesh погано масштабується на великі групи — для аудиторії понад кілька десятків учасників потрібні SFU/MCU. Чат і сигнали проходять через власний сервер: для продакшену критичні жорсткі політики TLS, обмеження частоти подій, аудит і, за потреби, модерація контенту. Окремим напрямом є покриття автоматичними тестами критичних сценаріїв (сигналінг, ліміти кімнати, RLS).

Висновки.

Розроблена система поєднує сучасний стек веб-реального часу (WebRTC + WebSocket-сигналінг) з BaaS-підходом (Supabase) для швидкого й безпечного зберігання користувацьких і соціальних даних. Показано практичну схему розгортання для демонстрації через зашифрований тунель. Робота може служити основою для курсів з мережевих технологій, безпеки веб-додатків і розподілених систем.

СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ

1. MDN. WebRTC API [Електронний ресурс] / MDN Web Docs (Mozilla). – Режим доступу до ресурсу: https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API
2. W3C. WebRTC 1.0: Real-Time Communication Between Browsers [Електронний ресурс] / World Wide Web Consortium. – Режим доступу до ресурсу: https://www.w3.org/TR/webrtc/
3. Socket.IO. Documentation [Електронний ресурс] / Socket.IO project. – Режим доступу до ресурсу: https://socket.io/docs/v4/
4. OpenJS Foundation. Express — web framework for Node.js [Електронний ресурс] / Express.js. – Режим доступу до ресурсу: https://expressjs.com/
5. OpenJS Foundation. Node.js Documentation [Електронний ресурс] / Node.js. – Режим доступу до ресурсу: https://nodejs.org/docs/latest/api/