प्रौद्योगिकी

सरल शब्दों में

Dueli ब्राउज़र में Cloudflare के वैश्विक नेटवर्क पर चलता है। दो प्रतियोगी अपने उपकरणों के बीच लाइव वीडियो कॉल में मिलते हैं (WebRTC peer-to-peer); जब नेटवर्क सीधा मार्ग रोकता है, तब TURN रिले कनेक्शन को रास्ता देता है।

प्रतिस्पर्धा के दौरान ब्राउज़र दोनों कैमरा फ़ीड को एक चित्र में जोड़ता है और उसे 5 सेकंड के छोटे चंक में रिकॉर्ड करता है। चंक बनते ही अपलोड होते हैं, क्रम में चलाए जा सकते हैं, और मैच के अंत पर पूर्ण रीप्ले में जुड़ते हैं।

रिकॉर्डेड प्रतिस्पर्धाएँ MP4 फ़ाइल के रूप में डाउनलोड हो सकती हैं। जब रिकॉर्डिंग को रूपांतरण चाहिए, रूपांतरण FFmpeg.wasm से आगंतुक के ब्राउज़र में ही चलता है, इसलिए फ़ाइल किसी बाहरी रूपांतरण सेवा को नहीं भेजी जाती।

मंच डेटा D1 में रहता है, पृष्ठ और API Cloudflare पर Hono और TypeScript से बने हैं, और इंटरफ़ेस Tailwind CSS उपयोग करता है। लाइव अद्यतन SSE और पोलिंग से आते हैं।

इंजीनियरों हेतु

रनटाइम: TypeScript पर Hono 4 के साथ Cloudflare Pages/Workers। 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-only फ़ॉलबैक।

रिकॉर्डिंग: canvas कम्पोज़िटर दोनों फ़ीड बनाता है, और MediaRecorder हर 5 सेकंड एक चंक देता है। मेज़बान प्रत्येक चंक POST /api/chunks/register पर पंजीकृत करता है (प्रतिस्पर्धा, क्रम और बाइट सीमा से बद्ध अल्पकालिक एक-बार कुंजी), उसे अपलोड करता है, GET /verify से सत्यापित करता है और POST /receipt रिपोर्ट करता है। प्लेबैक GET /api/chunks/playlist/:id पढ़ता है, और मौजूदा finalize चरण VOD बनाता है।

डाउनलोड: @ffmpeg/core 0.12.10 स्व-होस्टेड ब्राउज़र वर्कर में MP4 रूपांतरण हेतु चलता है, जिन रिकॉर्डिंग के लिए पहले से MP4-संगत हो उन हेतु संरचनात्मक रीमक्स मार्ग। प्रगति और मेमोरी सीमाएँ क्लाइंट सेवा में संभाली जाती हैं।

रीयलटाइम: GET /api/sse के ज़रिए SSE लाइव अद्यतन वहन करता है, और सिग्नलिंग HTTP पोलिंग उपयोग करती है; उत्पादन मार्ग WebSocket उपयोग नहीं करता।

गुणवत्ता: Vitest यूनिट और UI अनुबंध कवर करता है, और Playwright एंड-टू-एंड ब्राउज़र प्रवाह। Markdown दस्तावेज़ marked से रेंडर होते हैं, और PostCSS + Autoprefixer CSS पाइपलाइन पूरी करता है।