Технології

Простими словами

Dueli працює в браузері на глобальній мережі Cloudflare. Двоє учасників зустрічаються в живому відеозв'язку між своїми пристроями (WebRTC peer-to-peer); коли мережа блокує прямий шлях, ретранслятор TURN допомагає з'єднанню пройти.

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

Записані змагання можна завантажити як файл MP4. Коли запис потребує конвертації, вона відбувається в браузері відвідувача за допомогою FFmpeg.wasm, тож файл не надсилається до зовнішнього сервісу конвертації.

Дані платформи зберігаються в D1, сторінки та API побудовані з Hono і TypeScript на Cloudflare, а інтерфейс використовує Tailwind CSS. Живі оновлення надходять через SSE та опитування.

Для інженерів

Середовище виконання: Cloudflare Pages/Workers з Hono 4 на TypeScript. Базою даних є D1 (SQLite). Vite збирає бандл Worker, Tailwind CSS 4 стилізує інтерфейс, а esbuild пакує точки входу браузера.

Живі медіа: RTCPeerConnection у браузері несе WebRTC між ведучим і суперником. ICE-сервери видаються на кожен сеанс через GET /api/signaling/ice-servers; ретрансляцію може забезпечувати Cloudflare Calls TURN (TURN_TOKEN_ID і TURN_API_TOKEN) або самостійно розгорнутий coturn (TURN_URL і TURN_SECRET), а якщо не налаштовано жодного — резерв на одному STUN.

Запис: композиційний canvas малює обидва потоки, а MediaRecorder випускає фрагмент кожні 5 секунд. Ведучий реєструє кожен фрагмент на POST /api/chunks/register (короткочасний одноразовий ключ, прив'язаний до змагання, послідовності та стелі байтів), завантажує його, перевіряє через GET /verify і повідомляє POST /receipt. Відтворення читає GET /api/chunks/playlist/:id, а наявний крок фіналізації створює VOD.

Завантаження: @ffmpeg/core 0.12.10 працює в самостійно розгорнутому браузерному воркері для конвертації в MP4, із шляхом структурного ремуксу для записів, уже сумісних із MP4. Прогрес і ліміти пам'яті опрацьовуються в клієнтському сервісі.

Реальний час: SSE через GET /api/sse несе живі оновлення, а сигналізація використовує HTTP-опитування; робочий шлях не використовує WebSocket.

Якість: Vitest покриває юніт-тести та контракти UI, а Playwright — наскрізні браузерні сценарії. Документи Markdown рендеряться за допомогою marked, а PostCSS з Autoprefixer завершує CSS-конвеєр.