Technologie

En termes simples

Dueli fonctionne dans le navigateur sur le réseau mondial de Cloudflare. deux concurrents se rencontrent dans un appel vidéo en direct entre leurs appareils (WebRTC pair-à-pair) ; lorsqu'un réseau bloque le chemin direct, un relais TURN aide la connexion à passer.

Pendant une compétition, le navigateur combine les deux flux vidéo en une seule image et l'enregistre en morceaux de 5 secondes. Les morceaux sont téléchargés dès leur production, peuvent être lus dans l'ordre et sont assemblés en un replay complet après la fin du match.

Les compétitions enregistrées peuvent être téléchargées en tant que fichier MP4. Lorsqu'un enregistrement nécessite une conversion, la conversion s'exécute dans le navigateur du visiteur avec FFmpeg.wasm, afin que le fichier ne soit pas envoyé à un service de conversion externe.

Les données de la plateforme résident dans D1, les pages et les API sont construites avec Hono et TypeScript sur Cloudflare, et l'interface utilise Tailwind CSS. Les mises à jour en direct arrivent via SSE et polling.

Pour les ingénieurs

Runtime : Cloudflare Pages/Workers avec Hono 4 sur TypeScript. D1 (SQLite) est la base de données. Vite construit le bundle Worker, Tailwind CSS 4 stylise l'interface, et esbuild bundle les points d'entrée du navigateur.

Média en direct : une connexion RTCPeerConnection dans le navigateur transporte WebRTC entre l'hôte et l'adversaire. Les serveurs ICE sont émis par session via GET /api/signaling/ice-servers ; Cloudflare Calls TURN (TURN_TOKEN_ID et TURN_API_TOKEN) ou coturn auto-hébergé (TURN_URL et TURN_SECRET) peuvent relayer, avec un fallback STUN-only lorsque aucun n'est configuré.

Enregistrement : un compositeur canvas dessine les deux flux, et MediaRecorder émet un morceau toutes les 5 secondes. L'hôte enregistre chaque morceau à POST /api/chunks/register (une clé à usage unique de courte durée liée à la compétition, à la séquence et au plafond d'octets), le télécharge, le vérifie avec GET /verify et signale POST /receipt. La lecture lit GET /api/chunks/playlist/:id, et l'étape de finalisation existante produit la VOD.

Téléchargements : @ffmpeg/core 0.12.10 s'exécute dans un worker de navigateur auto-hébergé pour la conversion MP4, avec un chemin de remux structurel pour les enregistrements déjà compatibles MP4. La progression et les limites de mémoire sont gérées dans le service client.

Temps réel : SSE via GET /api/sse transporte les mises à jour en direct, et le signalisation utilise le polling HTTP ; le chemin de production n'utilise pas WebSocket.

Qualité : Vitest couvre les contrats unitaires et UI, et Playwright couvre les flux de navigateur de bout en bout. Les documents Markdown sont rendus avec marked, et PostCSS avec Autoprefixer complète le pipeline CSS.