प्रविधि

सरल शब्दमा

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 ले वर्कर बन्डल बनाउँछ, Tailwind CSS 4 ले इन्टरफेस स्टाइल गर्छ, र esbuild ले ब्राउजरका प्रवेश बिन्दुहरू बन्डल गर्छ।

प्रत्यक्ष मिडिया: ब्राउजरको RTC पियर-कनेक्सन वस्तुले यजमान र प्रतिस्पर्धीबीच WebRTC बोक्छ। ICE सर्भरहरू प्रति सेसन सिग्नलिङको ice-servers अन्त्यबिन्दुबाट जारी हुन्छन्; Cloudflare Calls TURN (TURN_TOKEN_ID र TURN_API_TOKEN) वा आफ्नै सर्भरमा रहेको coturn (TURN_URL र TURN_SECRET) ले रिले गर्न सक्छ, दुवै कन्फिगर नभएका बेला STUN-मात्र फलब्याक चल्छ।

रेकर्डिङ: क्यान्भास कम्पोजिटरले दुवै फिड खिच्छ, र मिडिया रेकर्डरले हरेक 5 सेकेन्डमा खण्ड दिन्छ। यजमानले हरेक खण्ड दर्ता गर्ने POST अन्त्यबिन्दुमा (प्रतियोगिता, क्रम र बाइट सीमासँग बाँधिएको छोटो एक-पटक प्रयोग हुने कुंजीसहित) दर्ता गर्छ, अपलोड गर्छ, GET /verify बाट रुजू गर्छ र POST /receipt पठाउँछ। प्लेब्याकले खण्ड क्रमसूची अन्त्यबिन्दु पढ्छ, र हालको अन्तिम चरणले VOD तयार पार्छ।

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

वास्तविक समय: GET /api/sse मार्फत SSE ले प्रत्यक्ष अद्यावधिक बोक्छ, र सिग्नलिङले HTTP पोलिङ प्रयोग गर्छ; उत्पादन मार्गले वेबसोकेट प्रयोग गर्दैन।

गुणस्तर: Vitest ले युनिट तथा UI अनुबन्धहरू ढाक्छ, र Playwright ले अन्त्यदेखि-अन्त्यसम्मको ब्राउजर प्रवाह ढाक्छ। मार्कडाउन कागजातहरू marked ले रेन्डर गर्छ, र PostCSS सँग अटोप्रिफिक्सरले CSS पाइपलाइन पूरा गर्छ।