Технологии

С прости думи

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 конвертиране, със структурен remux път за записи, които вече са съвместими с MP4. Напредъкът и лимитите на паметта се обработват в клиентската услуга.

Реално време: SSE чрез GET /api/sse пренася обновления на живо, а сигнализацията използва HTTP периодично проверяване; производственият път не използва WebSocket.

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