Tecnologia

Em termos simples

O Dueli funciona no navegador na rede global da Cloudflare. Dois concorrentes encontram-se numa chamada de vídeo ao vivo entre os seus dispositivos (WebRTC peer-to-peer); quando uma rede bloqueia o caminho direto, um relay TURN ajuda a conexão a passar.

Durante uma competição, o navegador combina as duas feeds de câmara numa única imagem e grava-a em segmentos de 5 segundos. Os segmentos são enviados assim que são produzidos, podem ser reproduzidos em ordem e são montados numa reprodução completa após o término do duelo.

As competições gravadas podem ser descarregadas como um ficheiro MP4. Quando uma gravação precisa de conversão, a conversão é executada dentro do navegador do visitante com FFmpeg.wasm, para que o ficheiro não seja enviado para um serviço de conversão externo.

Os dados da plataforma residem na D1, as páginas e APIs são construídas com Hono e TypeScript na Cloudflare, e a interface utiliza Tailwind CSS. As atualizações ao vivo chegam através de SSE e polling.

Para engenheiros

Runtime: Cloudflare Pages/Workers com Hono 4 em TypeScript. D1 (SQLite) é a base de dados. O Vite constrói o bundle do Worker, o Tailwind CSS 4 estiliza a interface e o esbuild.bundle constrói os pontos de entrada do navegador.

Média ao vivo: uma RTCPeerConnection do navegador transporta WebRTC entre o anfitrião e o oponente. Servidores ICE são emitidos por sessão a partir de GET /api/signaling/ice-servers; o Cloudflare Calls TURN (TURN_TOKEN_ID e TURN_API_TOKEN) ou coturn auto-hospedado (TURN_URL e TURN_SECRET) pode retransmitir, com uma fallback apenas STUN quando nenhum está configurado.

Gravação: um compositor de canvas desenha as duas feeds, e o MediaRecorder emite um segmento a cada 5 segundos. O anfitrião regista cada segmento em POST /api/chunks/register (uma chave de uso único de curta duração vinculada à competição, sequência e limite de bytes), carrega-o, verifica-o com GET /verify e reporta em POST /receipt. A reprodução lê GET /api/chunks/playlist/:id, e o passo de finalização existente produz o VOD.

Descargas: @ffmpeg/core 0.12.10 executa-se num worker do navegador auto-hospedado para conversão MP4, com um caminho de rem estrutural para gravações já compatíveis com MP4. O progresso e os limites de memória são geridos no serviço do cliente.

Tempo real: SSE através de GET /api/sse transporta atualizações ao vivo, e o sinalização utiliza polling HTTP; o caminho de produção não utiliza WebSocket.

Qualidade: Vitest cobre testes unitários e contratos de UI, e o Playwright cobre fluxos de navegador de ponta a ponta. Documentos Markdown são renderizados com marked, e o PostCSS com Autoprefixer completa o pipeline CSS.