Технологии

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

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, а существующий шаг финализации produces VOD.

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

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

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