Sekcija
Tehnologija
Stvarni Dueli stack u dva sloja: objašnjenje jednostavnim jezikom i inženjerski prikaz.
Ova stranica objašnjava tehnologije koje Dueli stvarno koristi, u dva sloja: prikaz jednostavnim jezikom za svakoga i inženjerski prikaz za stručnjake. Ne navodi se nijedna tehnologija osim ako je trenutačni kod koristi.
Jednostavno rečeno
Dueli radi u pregledniku na globalnoj mreži Cloudflare. Dva se natjecatelja sastaju u video pozivu uživo između svojih uređaja (WebRTC peer-to-peer); kada mreža blokira izravni put, TURN relej pomaže da veza prođe.
Tijekom natjecanja preglednik spaja oba video signala kamera u jednu sliku i snima je u kratke segmente od 5 sekundi. Segmenti se učitavaju kako nastaju, mogu se reproducirati u redoslijedu i sastavljaju se u potpuni ponovni prikaz nakon završetka meča.
Snimljena natjecanja mogu se preuzeti kao MP4 datoteka. Kada snimka treba pretvorbu, pretvorba se odvija unutar preglednika posjetitelja s FFmpeg.wasm, pa se datoteka ne šalje vanjskoj usluzi pretvorbe.
Podaci platforme žive u D1, stranice i API-ji izgrađeni su s Hono i TypeScript na Cloudflare, a sučelje koristi Tailwind CSS. Ažuriranja uživo stižu putem SSE i pollinga.
Za inženjere
Izvršavanje: Cloudflare Pages/Workers s Hono 4 na TypeScript. D1 (SQLite) je baza podataka. Vite gradi Worker paket, Tailwind CSS 4 oblikuje sučelje, a esbuild pakira pregledničke ulazne točke.
Mediji uživo: preglednički RTCPeerConnection nosi WebRTC između voditelja i protivnika. ICE poslužitelji izdaju se po sesiji iz GET /api/signaling/ice-servers; Cloudflare Calls TURN (TURN_TOKEN_ID i TURN_API_TOKEN) ili samohostirani coturn (TURN_URL i TURN_SECRET) mogu služiti kao relej, uz STUN-only rezervu kada ništa nije konfigurirano.
Snimanje: canvas kompozitor crta oba signala, a MediaRecorder emitira segment svakih 5 sekundi. Voditelj registrira svaki segment na POST /api/chunks/register (kratkotrajni jednokratni ključ vezan uz natjecanje, redoslijed i ograničenje bajtova), učitava ga, provjerava s GET /verify i izvještava POST /receipt. Reprodukcija čita GET /api/chunks/playlist/:id, a postojeći korak zaključivanja proizvodi VOD.
Preuzimanja: @ffmpeg/core 0.12.10 radi u samohostiranom pregledničkom workeru za MP4 pretvorbu, sa strukturnim remux putem za snimke koje su već MP4-kompatibilne. Napredak i ograničenja memorije obrađuju se u klijentskoj usluzi.
Stvarno vrijeme: SSE kroz GET /api/sse nosi ažuriranja uživo, a signalizacija koristi HTTP polling; produkcijski put ne koristi WebSocket.
Kvaliteta: Vitest pokriva jedinične i UI ugovore, a Playwright pokriva pregledničke tokove od početka do kraja. Markdown dokumenti renderiraju se s marked, a PostCSS s Autoprefixerom dovršava CSS cjevovod.
Stack u ovom repozitoriju
- Cloudflare Pages / Workers Hosting i serversko izvršavanje
- Cloudflare D1 (SQLite) Baza podataka aplikacije
- Hono 4 HTTP rute, stranice i API
- TypeScript 5 Tipizirani izvor za poslužitelj i klijenta
- Tailwind CSS 4 + PostCSS + Autoprefixer Oblikovanje sučelja i CSS cjevovod
- Vite 7 + esbuild Worker paket i pregledničke ulazne točke
- WebRTC (RTCPeerConnection) + TURN/STUN Audio i video uživo među sudionicima
- Canvas kompozitor + MediaRecorder Snimljeni segmenti od 5 sekundi u pregledniku
- FFmpeg.wasm (@ffmpeg/core 0.12.10) MP4 pretvorba i preuzimanje u pregledniku
- marked 17 Renderiranje Markdowna za upravljane dokumente
- Vitest 5 Jedinični i UI testni paket
- Playwright Preglednički testovi od početka do kraja
- Wrangler 4 Alati za razvoj i implementaciju Cloudflare
- SSE + HTTP polling Ažuriranja uživo izvan puta medija
Popis je ograničen na ono što package.json i repozitorij stvarno sadrže. To je tehnički opis, a ne tvrdnja o partnerstvu ili preporuci.