Teknologi

I klartekst

Dueli kjører i nettleseren på Cloudflares globale nettverk. To deltakere møtes i en direktevideosamtale mellom enhetene sine (WebRTC peer-to-peer); når et nettverk blokkerer den direkte veien, hjelper et TURN-relé tilkoblingen gjennom.

Under en konkurranse kombinerer nettleseren begge kamerastrømmene til ett bilde og tar det opp som korte 5-sekundersdeler. Delene lastes opp etter hvert som de produseres, kan spilles av i rekkefølge, og settes sammen til en full reprise etter at konkurransen er over.

Innspilte konkurranser kan lastes ned som en MP4-fil. Når et opptak trenger konvertering, kjører konverteringen i nettleseren til den besøkende med FFmpeg.wasm, slik at filen ikke sendes til en ekstern konverteringstjeneste.

Plattformdataene ligger i D1, sider og API-er er bygget med Hono og TypeScript på Cloudflare, og grensesnittet bruker Tailwind CSS. Live-oppdateringer kommer gjennom SSE og polling.

For ingeniører

Kjøretid: Cloudflare Pages/Workers med Hono 4 på TypeScript. D1 (SQLite) er databasen. Vite bygger Worker-bunten, Tailwind CSS 4 styler grensesnittet, og esbuild bunter nettleserinngangspunktene.

Live medier: en RTCPeerConnection i nettleseren bærer WebRTC mellom vert og motstander. ICE-servere utstedes per økt 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 reserve som kun bruker STUN når ingen av dem er konfigurert.

Opptak: en canvas-kompositor tegner begge strømmene, og MediaRecorder avgir en del hvert 5. sekund. Verten registrerer hver del på POST /api/chunks/register (en kortlivet engangsnøkkel bundet til konkurransen, rekkefølgen og taket i byte), laster den opp, verifiserer den med GET /verify og rapporterer POST /receipt. Avspilling leser GET /api/chunks/playlist/:id, og det eksisterende ferdigstillingstrinnet produserer VOD-en.

Nedlastinger: @ffmpeg/core 0.12.10 kjører i en selvhostet nettleserarbeider for MP4-konvertering, med en strukturell remux-rute for opptak som allerede er MP4-kompatible. Fremdrift og minnegrenser håndteres i klienttjenesten.

Sanntid: SSE gjennom GET /api/sse bærer live-oppdateringer, og signalisering bruker HTTP-polling; produksjonsruten bruker ikke WebSocket.

Kvalitet: Vitest dekker enhets- og UI-kontrakter, og Playwright dekker ende-til-ende-nettleserflyter. Markdown-dokumenter rendres med marked, og PostCSS med Autoprefixer fullfører CSS-rørledningen.