Технология

Жөнөкөй тилде

Dueli Cloudflare'дын глобалдык тармагында браузерде иштейт. Эки жарышмачан адамдын түзмөктөрүнүн ортосунда түз видео чалуу болот (WebRTC peer-to-peer); тармак түздөн-түз жолду тоссо, TURN реле байланышты өткөрөт.

Жарышмачан учурда браузер эки камера агымын бириктирип бир сүрөткө айлантып, аны 5 секунддык кыска кесиндилер менен жазат. Кесиндилер пайда болгондо дароо жүктөлөт, аларды ордунда ойнотууга болот, жарыш аяктагандан кийин толук кайрылууну түзөт.

Жазылган жарыштар MP4 файлы түрүндө жүктөлүшү мүмкүн. Жазуу конвертациялоону талап кылганда, конвертация келүүчүнин браузеринде FFmpeg.wasm менен жүргүзүлөт, ошондуктан файл сырткы конвертация кызматына жөнөтүлбөйт.

Платформанын маалыматтары D1де жайгашкан, беттер жана APIлер Hono жана TypeScript менен Cloudflare'да түзүлгөн, интерфейс Tailwind CSS колдонот. Жаңылар келүүчү SSE жана сурамдоо аркылуу келет.

Инженерлер үчүн

Runtime: Cloudflare Pages/Workers with Hono 4 on TypeScript. D1 (SQLite) is the database. Vite builds the Worker bundle, Tailwind CSS 4 styles the interface, and esbuild bundles the browser entry points.

Live media: a browser RTCPeerConnection carries WebRTC between host and opponent. ICE servers are issued per session from GET /api/signaling/ice-servers; Cloudflare Calls TURN (TURN_TOKEN_ID and TURN_API_TOKEN) or self-hosted coturn (TURN_URL and TURN_SECRET) can relay, with a STUN-only fallback when neither is configured.

Recording: a canvas compositor draws both feeds, and MediaRecorder emits a chunk every 5 seconds. The host registers each chunk at POST /api/chunks/register (a short-lived one-time key bound to the competition, sequence and byte ceiling), uploads it, verifies it with GET /verify and reports POST /receipt. Playback reads GET /api/chunks/playlist/:id, and the existing finalize step produces the VOD.

Downloads: @ffmpeg/core 0.12.10 runs in a self-hosted browser worker for MP4 conversion, with a structural remux path for recordings that are already MP4-compatible. Progress and memory limits are handled in the client service.

Realtime: SSE through GET /api/sse carries live updates, and signaling uses HTTP polling; the production path does not use WebSocket.

Quality: Vitest covers unit and UI contracts, and Playwright covers end-to-end browser flows. Markdown documents are rendered with marked, and PostCSS with Autoprefixer completes the CSS pipeline.