Tecnologia

En termes senzills

Dueli funciona al navegador a la xarxa global de Cloudflare. Dos competidors es troben en una trucada de vídeo en directe entre els seus dispositius (WebRTC punt a punt); quan una xarxa bloqueja el camí directe, un relé TURN ajuda a la connexió.

Durant una competició, el navegador combina les dues transmissions de càmera en una sola imatge i la enregistra en fragments curts de 5 segons. Els fragments s'pujen a mesura que es produeixen, es poden reproduir en ordre i s'assembleixen en una repetició completa després que la batalla acabi.

Les competicions enregistrades es poden descarregar com a fitxer MP4. Quan un enregistrement necessita conversió, la conversió s'executa dins del navegador del visitant amb FFmpeg.wasm, de manera que el fitxer no s'envia a un servei de conversió extern.

Les dades de la plataforma resideixen a D1, les pàgines i les API es construeixen amb Hono i TypeScript a Cloudflare, i la interfície utilitza Tailwind CSS. Les actualitzacions en directe arriben a través de SSE i sondeig.

Per a enginyers

Temps d'execució: Cloudflare Pages/Workers amb Hono 4 a TypeScript. D1 (SQLite) és la base de dades. Vite construeix el paquet del Worker, Tailwind CSS 4 estilitza la interfície i esbuild empaqueta els punts d'entrada del navegador.

Mitjans en directe: una connexió RTCPeerConnection del navegador porta WebRTC entre l'amfitrió i l'oponent. Els servidors ICE s'emeten per sessió des de GET /api/signaling/ice-servers; Cloudflare Calls TURN (TURN_TOKEN_ID i TURN_API_TOKEN) o coturn autoallotjat (TURN_URL i TURN_SECRET) poden retransmetre, amb una alternativa només STUN quan cap dels dos està configurat.

Enregistrament: un compositor de llenç dibuixa ambdues transmissions, i MediaRecorder emet un fragment cada 5 segons. L'amfitrió registra cada fragment a POST /api/chunks/register (una clau d'ús únic i de curta vida lligada a la competició, seqüència i sostre de bytes), la puja, la verifica amb GET /verify i informa a POST /receipt. La reproducció llegeix GET /api/chunks/playlist/:id, i el pas de finalització existent produeix el VOD.

Descàrregues: @ffmpeg/core 0.12.10 s'executa en un treballador del navegador autoallotjat per a la conversió MP4, amb una ruta de remultiplexació estructural per a enregistraments que ja són compatibles amb MP4. El progrés i els límits de memòria es gestionen al servei del client.

Temps real: SSE a través de GET /api/sse porta actualitzacions en directe, i la senyalització utilitza sondeig HTTP; el camí de producció no utilitza WebSocket.

Qualitat: Vitest cobreix les proves unitàries i els contractes d'interfície, i Playwright cobreix els fluxos de navegador punt a punt. Els documents Markdown es renderitzen amb marked, i PostCSS amb Autoprefixer completa la pipeline CSS.