Technologia

Prostym językiem

Dueli działa w przeglądarce w globalnej sieci Cloudflare. Dwóch uczestników spotyka się podczas wideo rozmowy na żywo między swoimi urządzeniami (WebRTC peer-to-peer); gdy sieć blokuje bezpośrednią ścieżkę, przekaźnik TURN pomaga połączeniu się przebić.

Podczas konkursu przeglądarka łączy oba obrazy z kamer w jeden obraz i nagrywa go krótkimi fragmentami po 5 sekund. Fragmenty są wysyłane na bieżąco, można je odtwarzać w kolejności, a po zakończeniu pojedynku składają się w pełne powtórki.

Nagrane konkursy można pobrać jako plik MP4. Gdy nagranie wymaga konwersji, odbywa się ona w przeglądarce odwiedzającego z użyciem FFmpeg.wasm, więc plik nie jest wysyłany do zewnętrznej usługi konwersji.

Dane platformy przechowuje baza D1, strony i interfejsy API zbudowano w technologii Hono i TypeScript w chmurze Cloudflare, a interfejs korzysta z Tailwind CSS. Aktualizacje na żywo docierają przez SSE i polling.

Dla inżynierów

Środowisko uruchomieniowe: Cloudflare Pages/Workers z Hono 4 w oparciu o TypeScript. Bazą danych jest D1 (SQLite). Vite buduje pakiet workera, Tailwind CSS 4 stylizuje interfejs, a esbuild pakuje punkty wejścia przeglądarki.

Multimedia na żywo: połączenie RTCPeerConnection w przeglądarce przenosi WebRTC między prowadzącym a przeciwnikiem. Serwery ICE są przydzielane na każdą sesję z GET /api/signaling/ice-servers; przekazywaniem może zająć się Cloudflare Calls TURN (TURN_TOKEN_ID i TURN_API_TOKEN) albo samodzielnie hostowany coturn (TURN_URL i TURN_SECRET), a gdy żadne nie jest skonfigurowane, stosowany jest awaryjny tryb wyłącznie STUN.

Nagrywanie: kompozytor canvas rysuje oba obrazy, a MediaRecorder emituje fragment co 5 sekund. Prowadzący rejestruje każdy fragment przez POST /api/chunks/register (krótkotrwały jednorazowy klucz powiązany z konkursem, kolejnością i limitem bajtów), wysyła go, weryfikuje przez GET /verify i raportuje przez POST /receipt. Odtwarzanie czyta GET /api/chunks/playlist/:id, a istniejący krok finalizacji tworzy nagranie VOD.

Pobieranie: @ffmpeg/core 0.12.10 działa w samodzielnie hostowanym worku przeglądarkowym na potrzeby konwersji do MP4, ze strukturalną ścieżką remuxowania dla nagrań już zgodnych z MP4. Postęp i limity pamięci obsługuje usługa po stronie klienta.

Czas rzeczywisty: SSE przez GET /api/sse przenosi aktualizacje na żywo, a sygnalizacja korzysta z pollingu HTTP; ścieżka produkcyjna nie używa WebSocket.

Jakość: Vitest pokrywa testy jednostkowe i kontrakty interfejsu, a Playwright pokrywa przepływy przeglądarkowe end-to-end. Dokumenty Markdown są renderowane za pomocą marked, a PostCSS z Autoprefixer domyka potok CSS.