Teknoloji

Basit bir dille

Dueli, Cloudflare'ın küresel ağındaki tarayıcıda çalışır. İki rakip, cihazları arasında canlı bir video görüşmesinde buluşur (WebRTC eşler arası); bir ağ doğrudan yolu engellediğinde, bir TURN rölesi bağlantıyı sağlar.

Bir yarışma sırasında tarayıcı, her iki kamera akışını tek bir resme birleştirir ve bunu 5 saniyelik kısa parçalar olarak kaydeder. Parçalar üretildikçe yüklenir, sıraya göre oynatılabilir ve maç bittikten sonra tam bir yeniden oynatma haline getirilir.

Kaydedilen yarışmalar bir MP4 dosyası olarak indirilebilir. Bir kayıt dönüştürme gerektirdiğinde, dönüştürme ziyaretçinin tarayıcısında FFmpeg.wasm ile çalışır, bu nedenle dosya harici bir dönüştürme hizmetine gönderilmez.

Platform verileri D1'de yaşar, sayfalar ve API'ler Hono ve TypeScript ile Cloudflare üzerinde oluşturulur ve arayüz Tailwind CSS kullanır. Canlı güncellemeler SSE ve yoklama üzerinden gelir.

Mühendisler için

Çalışma zamanı: Cloudflare Pages/Workers ile TypeScript üzerinde Hono 4. D1 (SQLite) veritabanıdır. Vite Worker paketini oluşturur, Tailwind CSS 4 arayüzü stillendirir ve esbuild tarayıcı giriş noktalarını paketler.

Canlı medya: bir tarayıcı RTCPeerConnection, ana ve rakip arasında WebRTC taşır. ICE sunucuları oturum başına GET /api/signaling/ice-servers üzerinden verilir; Cloudflare Calls TURN (TURN_TOKEN_ID ve TURN_API_TOKEN) veya kendi barındırılan coturn (TURN_URL ve TURN_SECRET) röleyebilir, hiçbiri yapılandırılmadığında STUN-only geri dönüşü kullanılır.

Kayıt: bir canvas birleştirici her iki akışı çizer ve MediaRecorder her 5 saniyede bir bir parça üretir. Ana her parçayı POST /api/chunks/register'da kaydeder (yarışmaya, sıraya ve bayt sınırına bağlı kısa ömürlü tek kullanımlık bir anahtar), yükler, GET /verify ile doğrular ve POST /receipt bildirir. Oynatma GET /api/chunks/playlist/:id'yi okur ve mevcut sonlandırma adımı VOD'u üretir.

İndirmeler: @ffmpeg/core 0.12.10, MP4 dönüştürmesi için kendi barındırılan bir tarayıcı işçisinde çalışır, zaten MP4 uyumlu olan kayıtlar için yapısal bir yeniden paketleme yolu vardır. İlerleme ve bellek sınırları istemci hizmetinde işlenir.

Gerçek zamanlı: GET /api/sse üzerinden SSE canlı güncellemeleri taşır ve sinyal verme HTTP yoklaması kullanır; üretim yolu WebSocket kullanmaz.

Kalite: Vitest birim ve UI sözleşmelerini, Playwright uçtan uca tarayıcı akışlarını kapsar. Markdown belgeleri işaretlenmiş ile işlenir ve PostCSS ile Autoprefixer CSS boru hattını tamamlar.