Teknologi

I almindelige ord

Dueli kører i browseren på Cloudflares globale netværk. To konkurrenter mødes i et live-videoopkald mellem deres enheder (WebRTC peer-to-peer); når et netværk blokerer den direkte vej, hjælper et TURN-relæ forbindelsen igennem.

Under en konkurrence kombinerer browseren begge kamerafeeds til ét billede og optager det som korte bidder på 5 sekunder. Bidderne uploades, efterhånden som de fremstilles, kan afspilles i rækkefølge og samles til en fuld genudsendelse, efter at kampen er slut.

Optagede konkurrencer kan downloades som en MP4-fil. Når en optagelse skal konverteres, foregår konverteringen i besøgendes browser med FFmpeg.wasm, så filen ikke sendes til en ekstern konverteringstjeneste.

Platformens data ligger i D1, sider og API'er er bygget med Hono og TypeScript på Cloudflare, og brugerfladen bruger Tailwind CSS. Live-opdateringer kommer via SSE og polling.

For ingeniører

Runtime: Cloudflare Pages/Workers med Hono 4 på TypeScript. D1 (SQLite) er databasen. Vite bygger Worker-bundtet, Tailwind CSS 4 styler brugerfladen, og esbuild samler browserens indgangspunkter.

Live-medier: en RTCPeerConnection i browseren bærer WebRTC mellem vært og modstander. ICE-servere udstedes pr. session fra GET /api/signaling/ice-servers; Cloudflare Calls TURN (TURN_TOKEN_ID og TURN_API_TOKEN) eller selvhostet coturn (TURN_URL og TURN_SECRET) kan fungere som relæ, med en STUN-only-fallback, når ingen af delene er konfigureret.

Optagelse: en canvas-kompositor tegner begge feeds, og MediaRecorder udsender en bid hvert 5. sekund. Værten registrerer hver bid ved POST /api/chunks/register (en kortlevet engangsnøgle bundet til konkurrencen, rækkefølgen og byte-grænsen), uploader den, verificerer den med GET /verify og rapporterer POST /receipt. Afspilning læser GET /api/chunks/playlist/:id, og det eksisterende færdiggørelsestrin producerer VOD'en.

Downloads: @ffmpeg/core 0.12.10 kører i en selvhostet browser-worker til MP4-konvertering, med en strukturel remux-vej for optagelser, der allerede er MP4-kompatible. Fremskridt og hukommelsesgrænser håndteres i klientservicen.

Realtid: SSE via GET /api/sse bærer live-opdateringer, og signaling bruger HTTP-polling; produktionsvejen bruger ikke WebSocket.

Kvalitet: Vitest dækker enheds- og UI-kontrakter, og Playwright dækker end-to-end-browserflows. Markdown-dokumenter renderes med marked, og PostCSS med Autoprefixer fuldender CSS-pipelinen.