Тэхналогіі

Простымі словамі

Dueli працуе ў браўзеры на глабальнай сетцы Cloudflare. Два канкурэнты сустракаюцца ў жывым відэазванку паміж іх прыладамі (WebRTC peer-to-peer); калі сетка блакуе прамы шлях, TURN-рэлей дапамагае злучэнню.

Падчас спаборніцтва браўзер аб'ядноўвае абод відэапатокі ў адно відэа і запісвае яго кароткімі ўчасткамі па 5 секунд. Гэтыя ўчасткі загружаюць па меры іх стварэння, іх можна прайграць па парадку, а пасля заканчэння матча я збіраюць у поўны запіс.

Запісаныя спаборніцтвы можна спампаваць як файл MP4. Калі запатрабавана пераўтварэнне, яно выконваецца ў браўзеры наведвальніка з FFmpeg.wasm, таму файл не адпраўляецца на знешнюю службу пераўтварэння.

Дадзеныя платформы захоўваюцца ў D1, старонкі і API пабудаваны з Hono і TypeScript на Cloudflare, а інтэрфейс выкарыстоўвае Tailwind CSS. Жывыя абнаўленні паступаюць праз SSE і polling.

Для інжынераў

Час выканання: Cloudflare Pages/Workers з Hono 4 на TypeScript. D1 (SQLite) — база дадзеных. Vite збірае Worker bundle, Tailwind CSS 4 стылюе інтэрфейс, а esbuild збірае браўзерныя entry points.

Жывыя медыя: браўзерны RTCPeerConnection перадае WebRTC паміж гаспадаром і супернікам. Серверы ICE выдаюцца на сеанс з GET /api/signaling/ice-servers; Cloudflare Calls TURN (TURN_TOKEN_ID і TURN_API_TOKEN) або самастойна хаставаны coturn (TURN_URL і TURN_SECRET) могуць рэлягаваць, са STUN-only fallback, калі ніводны не наладжаны.

Запіс: canvas-кампазітар малюе абод патокі, а MediaRecorder выпускае ўчастак кожныя 5 секунд. Гаспадар рэгіструе кожны ўчастак на POST /api/chunks/register (кароткачасны ключ аднаго выкарыстання, звязаны са спаборніцтвам, паслядоўнасцю і мяжой байтаў), загружае яго, правярае з GET /verify і паведамляе на POST /receipt. Прайграванне чытае GET /api/chunks/playlist/:id, і існуючы этап фіналізацыі стварае VOD.

Спампоўванні: @ffmpeg/core 0.12.10 працуе ў самастойна хаставаным браўзерным worker для пераўтварэння ў MP4, са структурным шляхам remux для запісаў, якія ўжо сумяшчальныя з MP4. Прагрэс і абмежаванні памяці апрацоўваюцца ў кліенцкім сэрвісе.

Рэальны час: SSE праз GET /api/sse перадае жывыя абнаўленні, а сігналізацыя выкарыстоўвае HTTP polling; вытворчы шлях не выкарыстоўвае WebSocket.

Якасць: Vitest пакрывае unit і UI кантракты, а Playwright пакрывае end-to-end browser патокі. Markdown дакументы рэндэрацца з marked, а PostCSS з Autoprefixer завяршае CSS pipeline.