Technológia

Közérthetően

A Dueli a böngészőben fut a Cloudflare globális hálózatán. Két versenyző élő videóhívásban találkozik eszközeik között (WebRTC peer-to-peer); ha egy hálózat blokkolja a közvetlen utat, egy TURN-közvetítő segíti át a kapcsolatot.

Verseny közben a böngésző mindkét kamerajelet egyetlen képpé fésüli össze, és rövid, 5 másodperces szegmensekként rögzíti. A szegmensek előállításukkor feltöltődnek, sorrendben visszajátszhatók, és a meccs végeztével teljes visszajátszássá állnak össze.

A rögzített versenyek MP4 fájlként letölthetők. Ha egy felvétel konvertálást igényel, a konvertálás a látogató böngészőjében fut FFmpeg.wasm-mal, így a fájl nem kerül külső konvertáló szolgáltatáshoz.

A platform adatai a D1-ben élnek, az oldalak és API-k Hono és TypeScript használatával készülnek a Cloudflare-en, a felület pedig Tailwind CSS-t használ. Az élő frissítések SSE-n és lekérdezésen keresztül érkeznek.

Mérnököknek

Futtatókörnyezet: Cloudflare Pages/Workers Hono 4-gyel TypeScripten. A D1 (SQLite) az adatbázis. A Vite építi a Worker csomagot, a Tailwind CSS 4 stílusozza a felületet, az esbuild pedig csomagolja a böngésző belépési pontjait.

Élő média: egy böngésző RTCPeerConnection viszi a WebRTC-t a házigazda és az ellenfél között. Az ICE szerverek munkamenetenként a GET /api/signaling/ice-servers útról adódnak ki; a Cloudflare Calls TURN (TURN_TOKEN_ID és TURN_API_TOKEN) vagy az önállóan üzemeltetett coturn (TURN_URL és TURN_SECRET) közvetíthet, egyik sem beállítása esetén csak STUN tartalékkal.

Felvétel: egy canvas kompozitor rajzolja mindkét jelet, a MediaRecorder pedig 5 másodpercenként ad ki egy szegmenst. A házigazda minden szegmenst regisztrál a POST /api/chunks/register úton (a versenyhez, a sorrendhez és a bájthatárhoz kötött rövid életű egyszeri kulcs), feltölti, a GET /verify-vel ellenőrzi, és a POST /receipt-tel jelent. A lejátszás a GET /api/chunks/playlist/:id útját olvassa, a meglévő lezáró lépés állítja elő a VOD-ot.

Letöltések: az @ffmpeg/core 0.12.10 önállóan üzemeltetett böngésző workerben fut az MP4 konvertáláshoz, strukturális remux útvonallal a már MP4-kompatibilis felvételekhez. A folyamat és a memóriakorlátok kezelése a kliens szolgáltatásban történik.

Valós idejű: az SSE a GET /api/sse úton viszi az élő frissítéseket, a jelzés HTTP lekérdezést használ; a produkciós út nem használ WebSocketet.

Minőség: a Vitest az egység- és UI-szerződéseket, a Playwright a böngésző végponttól végpontig folyamatokat fedi le. A Markdown dokumentumok markeddel renderelődnek, a PostCSS az Autoprefixerrel fejezi be a CSS folyamatot.