Technologie

Einfach ausgedrückt

Dueli läuft im Browser auf dem globalen Netzwerk von Cloudflare. Zwei Kontrahanten führen ein Live-Video-Gespräch zwischen ihren Geräten (WebRTC peer-to-peer); wenn ein Netzwerk den direkten Pfad blockiert, hilft ein TURN-Relay beim Verbindungsaufbau.

Während eines Wettbewerbs kombiniert der Browser beide Videofeeds in ein Bild und zeichnet sie als kurze 5-Sekunden-Chunks auf. Die Chunks werden bei ihrer Erstellung hochgeladen, können in der richtigen Reihenfolge abgespielt werden und werden nach dem Ende des Duells zu einer vollständigen Zusammenstellung zusammengesetzt.

Aufgenommene Wettbewerbe können als MP4-Datei heruntergeladen werden. Wenn eine Konvertierung erforderlich ist, läuft diese im Browser des Besuchers mit FFmpeg.wasm, sodass die Datei nicht an einen externen Konvertierungsdienst gesendet wird.

Plattformdaten befinden sich in D1, Seiten und APIs sind mit Hono und TypeScript auf Cloudflare aufgebaut, und die Benutzeroberfläche verwendet Tailwind CSS. Live-Updates kommen über SSE und Polling.

Für Ingenieure

Laufzeitumgebung: Cloudflare Pages/Workers mit Hono 4 auf TypeScript. D1 (SQLite) ist die Datenbank. Vite erstellt das Worker-Bundle, Tailwind CSS 4 gestaltet die Benutzeroberfläche, und esbuild bündelt die Browser-Einstiegspunkte.

Live-Medien: eine Browser-RTCPeerConnection transportiert WebRTC zwischen Gast und Gegner. ICE-Server werden pro Sitzung von GET /api/signaling/ice-servers ausgestellt; Cloudflare Calls TURN (TURN_TOKEN_ID und TURN_API_TOKEN) oder selbst gehosteter coturn (TURN_URL und TURN_SECRET) können weiterleiten, mit einem STUN-only-Fallback, wenn keines konfiguriert ist.

Aufnahme: ein Canvas-Compositor zeichnet beide Feeds, und MediaRecorder gibt alle 5 Sekunden einen Chunk aus. Der Gast meldet jeden Chunk bei POST /api/chunks/register (ein kurzlebiges einmaliger Schlüssel, an den Wettbewerb, Sequenz und Byte-Grenze gebunden), lädt ihn hoch, überprüft ihn mit GET /verify und meldet POST /receipt. Wiedergabe liest GET /api/chunks/playlist/:id, und der bestehende Finalisierungsprozess erzeugt die VOD.

Downloads: @ffmpeg/core 0.12.10 läuft in einem selbst gehosteten Browser-Worker für die MP4-Konvertierung, mit einem strukturellen Remux-Pfad für Aufnahmen, die bereits MP4-kompatibel sind. Fortschritt und Speichergrenzen werden im Client-Service gehandhabt.

Echtzeit: SSE über GET /api/sse trägt Live-Updates, und das Signalisierungsprotokoll verwendet HTTP-Polling; der Produktionsweg verwendet kein WebSocket.

Qualität: Vitest deckt Einheiten-UI-Verträge ab, und Playwright deckt End-to-End-Browser-Workflows ab. Markdown-Dokumente werden mit gerendert, und PostCSS mit Autoprefixer vervollständigt die CSS-Pipeline.