Teknologi

Dalam istilah sederhana

Dueli berjalan di browser di jaringan global Cloudflare. Dua pesaing bertemu dalam panggilan video langsung antara perangkat mereka (WebRTC peer-to-peer); ketika jaringan memblokir jalur langsung, relay TURN membantu koneksi melewatinya.

Selama sebuah kompetisi, browser menggabungkan kedua feed kamera menjadi satu gambar dan merekamnya sebagai potongan-potongan 5 detik. Potongan-potongan ini diunggah segera setelah dihasilkan, dapat diputar ulang secara berurutan, dan disusun menjadi pemutaran lengkap setelah pertandingan berakhir.

Kompetisi yang direkam dapat diunduh sebagai file MP4. Saat sebuah rekaman memerlukan konversi, konversi berjalan di dalam browser pengguna dengan FFmpeg.wasm, sehingga file tidak dikirim ke layanan konversi eksternal.

Data platform berada di D1, halaman dan API dibangun dengan Hono dan TypeScript di Cloudflare, dan antarmuka menggunakan Tailwind CSS. Pembaruan langsung tiba melalui SSE dan polling.

Untuk para insinyur

Runtime: Cloudflare Pages/Workers dengan Hono 4 pada TypeScript. D1 (SQLite) adalah basis data. Vite membangun bundle Worker, Tailwind CSS 4 menghias antarmuka, dan esbuild membundle titik masuk browser.

Media langsung: RTCPeerConnection di browser membawa WebRTC antara host dan lawan. Server ICE dikeluarkan per sesi dari GET /api/signaling/ice-servers; Cloudflare Calls TURN (TURN_TOKEN_ID dan TURN_API_TOKEN) atau coturn yang dihosting sendiri (TURN_URL dan TURN_SECRET) dapat merelay, dengan fallback STUN-only saat keduanya tidak dikonfigurasi.

Perekaman: kompositor canvas menggambar kedua feed, dan MediaRecorder mengeluarkan potongan setiap 5 detik. Host mendaftarkan setiap potongan di POST /api/chunks/register (kunci sekali pakai yang berumur pendek terikat pada kompetisi, urutan, dan batas byte), mengunggahnya, memverifikasinya dengan GET /verify melaporkan POST /receipt. Pemutaran membaca GET /api/chunks/playlist/:id, dan langkah finalize yang ada menghasilkan VOD.

Unduhan: @ffmpeg/core 0.12.10 berjalan di pekerjaan browser yang dihosting sendiri untuk konversi MP4, dengan jalur remuks struktural untuk rekaman yang sudah kompatibel MP4. Kemajuan dan batas memori ditangani dalam layanan klien.

Real-time: SSE melalui GET /api/sse membawa pembaruan langsung, dan sinyal menggunakan HTTP polling; path produksi tidak menggunakan WebSocket.

Kualitas: Vitest mencakup unit dan kontrak UI, dan Playwright mencakup alur browser end-to-end. Dokumen Markdown dirender dengan marked, dan PostCSS dengan Autoprefixer melengkapi pipeline CSS.