Tehnologie

Pe înțelesul tuturor

Dueli rulează în browser, pe rețeaua globală Cloudflare. Doi competitori se întâlnesc într-un apel video live între dispozitivele lor (WebRTC peer-to-peer); când o rețea blochează calea directă, un releu TURN ajută conexiunea să treacă.

În timpul concursului, browserul combină ambele surse video într-o singură imagine și o înregistrează ca segmente scurte de 5 secunde. Segmentele sunt încărcate pe măsură ce sunt produse, pot fi redate în ordine și sunt asamblate într-o redare completă după încheierea meciului.

Concursurile înregistrate pot fi descărcate ca fișier MP4. Când o înregistrare necesită conversie, aceasta rulează în browserul vizitatorului, cu FFmpeg.wasm, astfel încât fișierul nu este trimis către un serviciu extern de conversie.

Datele platformei trăiesc în D1, paginile și API-urile sunt construite cu Hono și TypeScript pe Cloudflare, iar interfața folosește Tailwind CSS. Actualizările live sosesc prin SSE și polling.

Pentru ingineri

Runtime: Cloudflare Pages/Workers cu Hono 4 pe TypeScript. D1 (SQLite) este baza de date. Vite construiește bundle-ul Worker, Tailwind CSS 4 stilizează interfața, iar esbuild împachetează punctele de intrare ale browserului.

Media live: un RTCPeerConnection din browser transportă WebRTC între gazdă și adversar. Serverele ICE sunt emise per sesiune de la GET /api/signaling/ice-servers; Cloudflare Calls TURN (TURN_TOKEN_ID și TURN_API_TOKEN) sau coturn auto-găzduit (TURN_URL și TURN_SECRET) pot face retransmisia, cu o alternativă doar-STUN când niciunul nu este configurat.

Înregistrare: un compozitor canvas desenează ambele surse, iar MediaRecorder emite un segment la fiecare 5 secunde. Gazda înregistrează fiecare segment la POST /api/chunks/register (o cheie unică, de scurtă durată, legată de concurs, de secvență și de plafonul de octeți), îl încarcă, îl verifică cu GET /verify și raportează POST /receipt. Redarea citește GET /api/chunks/playlist/:id, iar pasul existent de finalizare produce VOD-ul.

Descărcări: @ffmpeg/core 0.12.10 rulează într-un worker de browser auto-găzduit pentru conversia MP4, cu o cale structurală de remux pentru înregistrările deja compatibile MP4. Progresul și limitele de memorie sunt gestionate în serviciul client.

Timp real: SSE prin GET /api/sse transportă actualizările live, iar semnalizarea folosește polling HTTP; calea de producție nu folosește WebSocket.

Calitate: Vitest acoperă contractele unitare și de UI, iar Playwright acoperă fluxurile browser end-to-end. Documentele Markdown sunt randate cu marked, iar PostCSS cu Autoprefixer completează linia CSS.