טכנולוגיה

במונחים פשוטים

Dueli פועל בדפדפן על רשת הקצה הגלובלית של Cloudflare. שני מתמודדים נפגשים בשיחת וידאו חיה בין המכשירים שלהם (WebRTC עמית-לעמית); כשרשת חוסמת את הנתיב הישיר, ממסר TURN מסייע לחיבור לעבור.

במהלך תחרות הדפדפן משלב את שני ערוצי המצלמה לתמונה אחת ומקליט אותה במקטעים קצרים של 5 שניות. המקטעים מועלים ככל שהם נוצרים, אפשר לנגן אותם לפי הסדר, והם מורכבים להשמעה חוזרת מלאה לאחר סיום הקרב.

תחרויות מוקלטות אפשר להוריד כקובץ MP4. כשהקלטה זקוקה להמרה, ההמרה מתבצעת בתוך הדפדפן של המבקר עם FFmpeg.wasm, כך שהקובץ אינו נשלח לשירות המרה חיצוני.

נתוני הפלטפורמה חיים ב-D1, העמודים וה-APIs נבנים עם Hono ו-TypeScript על Cloudflare, והממשק משתמש ב-Tailwind CSS. עדכונים חיים מגיעים דרך SSE ו-polling.

למהנדסים

זמן ריצה: 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, ושלב ה-finalize הקיים מפיק את ה-VOD.

הורדות: @ffmpeg/core 0.12.10 רץ ב-worker דפדפן באחסון עצמאי להמרת MP4, עם נתיב remux מבני להקלטות שכבר תואמות MP4. התקדמות ומגבלות זיכרון מטופלות בשירות הלקוח.

זמן אמת: SSE דרך GET /api/sse מעביר עדכונים חיים, והסיגנלינג משתמש ב-polling של HTTP; נתיב הייצור אינו משתמש ב-WebSocket.

איכות: Vitest מכסה חוזי יחידה ו-UI, ו-Playwright מכסה זרימות דפדפן מקצה לקצה. מסמכי Markdown מוצגים עם marked, ו-PostCSS עם Autoprefixer משלימים את צינור ה-CSS.