Tecnologia

In parole semplici

Dueli funziona nel browser sulla rete globale di Cloudflare. Due competitori si incontrano in una videochiamata dal vivo tra i loro dispositivi (peer-to-peer WebRTC); quando una rete blocca il percorso diretto, un relay TURN aiuta la connessione a passare.

Durante una competizione il browser unisce le due telecamere in un'unica immagine e la registra in brevi blocchi di 5 secondi. I blocchi vengono caricati man mano che vengono prodotti, possono essere riprodotti in ordine e vengono assemblati in un replay completo a incontro finito.

Le competizioni registrate possono essere scaricate come file MP4. Quando una registrazione richiede una conversione, la conversione avviene nel browser del visitatore con FFmpeg.wasm, così il file non viene inviato a un servizio di conversione esterno.

I dati della piattaforma vivono in D1, le pagine e le API sono costruite con Hono e TypeScript su Cloudflare, e l'interfaccia usa Tailwind CSS. Gli aggiornamenti in diretta arrivano tramite SSE e polling.

Per gli ingegneri

Runtime: Cloudflare Pages/Workers con Hono 4 su TypeScript. D1 (SQLite) è il database. Vite genera il bundle del Worker, Tailwind CSS 4 definisce lo stile dell'interfaccia, ed esbuild raggruppa i punti d'ingresso del browser.

Media in diretta: una RTCPeerConnection del browser trasporta WebRTC tra host e avversario. I server ICE vengono rilasciati per sessione da GET /api/signaling/ice-servers; Cloudflare Calls TURN (TURN_TOKEN_ID e TURN_API_TOKEN) o un coturn auto-ospitato (TURN_URL e TURN_SECRET) possono fare da relay, con fallback solo STUN quando nessuno dei due è configurato.

Registrazione: un compositor canvas disegna entrambi i flussi e MediaRecorder emette un blocco ogni 5 secondi. L'host registra ogni blocco presso POST /api/chunks/register (una chiave monouso di breve durata vincolata alla competizione, alla sequenza e al tetto di byte), lo carica, lo verifica con GET /verify e segnala POST /receipt. La riproduzione legge GET /api/chunks/playlist/:id, e il passo di finalize esistente produce la VOD.

Download: @ffmpeg/core 0.12.10 gira in un worker del browser auto-ospitato per la conversione in MP4, con un percorso di remux strutturale per le registrazioni già compatibili con MP4. Avanzamento e limiti di memoria sono gestiti nel servizio client.

Tempo reale: SSE tramite GET /api/sse trasporta gli aggiornamenti in diretta, e la segnalazione usa polling HTTP; il percorso di produzione non usa WebSocket.

Qualità: Vitest copre i test unitari e i contratti UI, e Playwright copre i flussi browser end-to-end. I documenti Markdown sono resi con marked, e PostCSS con Autoprefixer completa la pipeline CSS.