Teknologi

Dalam bahasa mudah

Dueli berjalan dalam pelayar pada rangkaian global Cloudflare. Dua peserta bertemu dalam panggilan video langsung antara peranti mereka (WebRTC rakan-ke-rakan); apabila rangkaian menyekat laluan terus, geganti TURN membantu sambungan melaluinya.

Semasa pertandingan, pelayar menggabungkan kedua-dua suapan kamera menjadi satu gambar dan merakamnya sebagai bahagian pendek 5 saat. Bahagian dimuat naik semasa dihasilkan, boleh dimainkan semula mengikut urutan, dan disusun menjadi main semula penuh selepas perlawanan tamat.

Pertandingan yang dirakam boleh dimuat turun sebagai fail MP4. Apabila rakaman perlu ditukar, penukaran berjalan dalam pelayar pelawat dengan FFmpeg.wasm, jadi fail tidak dihantar ke perkhidmatan penukaran luaran.

Data pelantar berada dalam D1, halaman dan API dibina dengan Hono dan TypeScript di atas Cloudflare, dan antara muka menggunakan Tailwind CSS. Kemas kini langsung tiba melalui SSE dan tinjauan.

Untuk jurutera

Runtime: Cloudflare Pages/Workers dengan Hono 4 pada TypeScript. D1 (SQLite) ialah pangkalan data. Vite membina bungkusan Worker, Tailwind CSS 4 menggayakan antara muka, dan esbuild membungkus titik masuk pelayar.

Media langsung: RTCPeerConnection pelayar membawa WebRTC antara tuan rumah dan lawan. Pelayan ICE dikeluarkan setiap sesi daripada GET /api/signaling/ice-servers; Cloudflare Calls TURN (TURN_TOKEN_ID dan TURN_API_TOKEN) atau coturn yang dihos sendiri (TURN_URL dan TURN_SECRET) boleh menjadi geganti, dengan sandaran STUN sahaja apabila kedua-duanya tidak dikonfigurasi.

Rakaman: penggubah kanvas melukis kedua-dua suapan, dan MediaRecorder mengeluarkan satu bahagian setiap 5 saat. Tuan rumah mendaftar setiap bahagian di POST /api/chunks/register (kunci sekali guna berjangka pendek terikat pada pertandingan, urutan dan siling bait), memuat naiknya, mengesahkannya dengan GET /verify dan melaporkan POST /receipt. Main semula membaca GET /api/chunks/playlist/:id, dan langkah muktamad sedia ada menghasilkan VOD.

Muat turun: @ffmpeg/core 0.12.10 berjalan dalam pekerja pelayar yang dihos sendiri untuk penukaran MP4, dengan laluan remux berstruktur untuk rakaman yang sudah serasi MP4. Kemajuan dan had memori dikendalikan dalam perkhidmatan klien.

Masa nyata: SSE melalui GET /api/sse membawa kemas kini langsung, dan isyarat menggunakan tinjauan HTTP; laluan pengeluaran tidak menggunakan WebSocket.

Kualiti: Vitest meliputi kontrak unit dan UI, dan Playwright meliputi aliran pelayar hujung-ke-hujung. Dokumen Markdown dipaparkan dengan marked, dan PostCSS dengan Autoprefixer melengkapkan saluran paip CSS.