Teknologia

Selkokielellä

Dueli toimii selaimessa Cloudflaren maailmanlaajuisessa verkossa. Kaksi kilpailijaa tapaa toisensa live-videopuhelussa laitteidensa välillä (WebRTC vertaisverkossa); kun verkko estää suoran reitin, TURN-välitys auttaa yhteyden läpi.

Kilpailun aikana selain yhdistää molemmat kamerasyötteet yhdeksi kuvaksi ja tallentaa sen lyhyinä 5 sekunnin osina. Osat ladataan sitä mukaa, kun niitä syntyy, ne voidaan toistaa järjestyksessä, ja ne kootaan kokonaiseksi uusintatoistoksi kilpailun päätyttyä.

Tallennetut kilpailut voi ladata MP4-tiedostona. Kun tallenne tarvitsee muunnoksen, muunnos tapahtuu vierailijan selaimessa FFmpeg.wasmilla, joten tiedostoa ei lähetetä ulkoiselle muunnospalvelulle.

Alustan data sijaitsee D1:ssä, sivut ja API:t on rakennettu Honolla ja TypeScriptilla Cloudflarella, ja käyttöliittymä käyttää Tailwind CSS:iä. Live-päivitykset saapuvat SSE:n ja pollauksen kautta.

Insinööreille

Ajoympäristö: Cloudflare Pages/Workers Hono 4:llä TypeScriptilla. D1 (SQLite) on tietokanta. Vite rakentaa Worker-nipun, Tailwind CSS 4 tyylittää käyttöliittymän ja esbuild niputtaa selaimen aloituspisteet.

Live-media: selaimen RTCPeerConnection välittää WebRTC:n isännän ja vastustajan välillä. ICE-palvelimet myönnetään istuntokohtaisesti osoitteesta GET /api/signaling/ice-servers; Cloudflare Calls TURN (TURN_TOKEN_ID ja TURN_API_TOKEN) tai itse isännöity coturn (TURN_URL ja TURN_SECRET) voi välittää liikenteen, ja varalla on pelkkä STUN, kun kumpaakaan ei ole määritetty.

Tallennus: canvas-yhdistäjä piirtää molemmat syötteet, ja MediaRecorder tuottaa osan 5 sekunnin välein. Isäntä rekisteröi jokaisen osan osoitteeseen POST /api/chunks/register (lyhytikäinen kertakäyttöavain, joka sidotaan kilpailuun, järjestykseen ja tavurajaan), lataa sen, vahvistaa sen osoitteella GET /verify ja raportoi osoitteeseen POST /receipt. Toisto lukee osoitteen GET /api/chunks/playlist/:id, ja olemassa oleva viimeistelyvaihe tuottaa VOD:n.

Lataukset: @ffmpeg/core 0.12.10 toimii itse isännöidyssä selaintyöntekijässä MP4-muunnoksia varten, ja jo MP4-yhteensopiville tallenteille on rakenteellinen remux-reitti. Edistymistä ja muistirajoja hallitaan asiakaspuolen palvelussa.

Reaaliaikaisuus: SSE osoitteen GET /api/sse kautta välittää live-päivitykset, ja signaalointi käyttää HTTP-pollausta; tuotantoreitti ei käytä WebSocketia.

Laatu: Vitest kattaa yksikkö- ja käyttöliittymätestit, ja Playwright kattaa selaimen päästä päähän -virrat. Markdown-dokumentit renderöidään markedilla, ja PostCSS Autoprefixerineen täydentää CSS-putken.