Technologie

Obyčejnou řečí

Dueli běží v prohlížeči na globální síti Cloudflare. Dva soutěžící se potkají v živém videohovoru mezi svými zařízeními (WebRTC peer-to-peer); když síť zablokuje přímou cestu, pomůže spojení TURN relé.

Během soutěže prohlížeč spojí oba obrazy z kamer do jednoho obrazu a nahrává ho v krátkých 5sekundových segmentech. Segmenty se odesílají, jakmile vzniknou, dají se přehrát v pořadí a po skončení zápasu se sestaví do kompletního přehrání.

Soutěže se záznamem si můžeš stáhnout jako soubor MP4. Když záznam potřebuje převod, běží převod přímo v prohlížeči návštěvníka pomocí FFmpeg.wasm, takže soubor se neposílá do žádné externí převodní služby.

Data platformy žijí v D1, stránky a API jsou postavené na Hono a TypeScriptu nad Cloudflare a rozhraní používá Tailwind CSS. Živé aktualizace přicházejí přes SSE a polling.

Pro inženýry

Běhové prostředí: Cloudflare Pages/Workers s Hono 4 na TypeScriptu. Databází je D1 (SQLite). Bundle Workera sestavuje Vite, rozhraní styluje Tailwind CSS 4 a vstupní body prohlížeče balí esbuild.

Živá média: RTCPeerConnection v prohlížeči přenáší WebRTC mezi hostitelem a soupeřem. ICE servery se vystavují na každou relaci z GET /api/signaling/ice-servers; reléovat může Cloudflare Calls TURN (TURN_TOKEN_ID a TURN_API_TOKEN) nebo vlastní coturn (TURN_URL a TURN_SECRET), a když není nakonfigurované ani jedno, zbývá náhrada jen se STUN.

Nahrávání: kompozitor na canvasu kreslí oba obrazy a MediaRecorder vydává segment každých 5 sekund. Hostitel každý segment zaregistruje na POST /api/chunks/register (krátkodobý jednorázový klíč vázaný na soutěž, pořadí a limit bajtů), odešle ho, ověří přes GET /verify a ohlásí POST /receipt. Přehrávání čte GET /api/chunks/playlist/:id a stávající krok finalize vytvoří VOD.

Stahování: @ffmpeg/core 0.12.10 běží ve vlastním workeru v prohlížeči a převádí do MP4, pro záznamy už kompatibilní s MP4 existuje cesta strukturálního remuxu. Průběh a limity paměti řeší služba na straně klienta.

Realtime: SSE přes GET /api/sse přenáší živé aktualizace a signalizace používá HTTP polling; produkční cesta WebSocket nepoužívá.

Kvalita: Vitest pokrývá jednotkové a UI kontrakty a Playwright pokrývá end-to-end toky v prohlížeči. Dokumenty v Markdownu se renderují přes marked a PostCSS s Autoprefixerem dokončuje CSS pipeline.