Технологија

Једноставно речено

Dueli ради у прегледачу на глобалној мрежи Cloudflare-а. Два такмичара састају се у видеопозиву уживо између својих уређаја (WebRTC peer-to-peer); када мрежа блокира директан пут, TURN релеј помаже да веза прође.

Током такмичења прегледач спаја оба видео извора у једну слику и снима је као кратке сегменте од 5 секунди. Сегменти се отпремају како се стварају, могу се репродуковати редом и састављају у потпуну репризу након краја меча.

Снимљена такмичења могу се преузети као MP4 датотека. Када снимак треба конвертовати, конверзија се одвија у прегледачу посетиоца помоћу FFmpeg.wasm, тако да се датотека не шаље спољној услузи за конверзију.

Подаци платформе живе у D1, странице и API-ји изграђени су с Hono и TypeScript на Cloudflare-у, а сучеље користи Tailwind CSS. Ажурирања уживо стижу преко SSE и полинга.

За инжењере

Извршно окружење: Cloudflare Pages/Workers с Hono 4 на TypeScript-у. D1 (SQLite) је база података. Vite гради Worker пакет, Tailwind CSS 4 стилизује сучеље, а esbuild пакује прегледачке улазне тачке.

Медији уживо: прегледачки RTCPeerConnection носи WebRTC између домаћина и противника. ICE сервери се издају по сесији са GET /api/signaling/ice-servers; Cloudflare Calls TURN (TURN_TOKEN_ID и TURN_API_TOKEN) или властити coturn (TURN_URL и TURN_SECRET) могу служити као релеј, с резервом само на STUN када ништа није подешено.

Снимање: canvas композитор црта оба извора, а MediaRecorder емитује сегмент сваких 5 секунди. Домаћин пријављује сваки сегмент на POST /api/chunks/register (краткотрајни једнократни кључ везан за такмичење, редослед и горњу границу бајтова), отпрема га, проверава са GET /verify и извештава на POST /receipt. Репродукција чита GET /api/chunks/playlist/:id, а постојећи корак финализације производи VOD.

Преузимања: @ffmpeg/core 0.12.10 ради у властитом прегледачком воркеру за MP4 конверзију, са структурним ремукс путем за снимке који су већ компатибилни с MP4. Напредак и границе меморије рукују се у клијентском сервису.

У реалном времену: SSE преко GET /api/sse носи ажурирања уживо, а сигнализација користи HTTP полинг; производни пут не користи WebSocket.

Квалитет: Vitest покрива јединичне и UI уговоре, а Playwright енд-ту-енд прегледачке токове. Markdown документи рендерују се са marked, а PostCSS с Autoprefixer-ом завршава CSS цевовод.