প্রযুক্তি

সহজ ভাষায়

Dueli চলে ব্রাউজারে, Cloudflare-এর বৈশ্বিক নেটওয়ার্কের ওপর। দুই প্রতিযোগী দেখা করে নিজেদের ডিভাইসের মধ্যে লাইভ ভিডিও কলে (WebRTC peer-to-peer); নেটওয়ার্ক সরাসরি পথ আটকে দিলে TURN রিলে সংযোগটিকে পথ দেখায়।

প্রতিযোগিতার সময় ব্রাউজার দুই ক্যামেরার ছবিকে এক চিত্রে মেশায় আর সেটি রেকর্ড করে ছোট ৫ সেকেন্ডের খণ্ডে। খণ্ডগুলো তৈরি হওয়ার সঙ্গে সঙ্গে আপলোড হয়, ক্রমে চালানো যায়, আর খেলা শেষে জোড়া লেগে পূর্ণ পুনরাবৃত্তি হয়।

রেকর্ড করা প্রতিযোগিতা 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-ভিত্তিক ফলব্যাক।

রেকর্ডিং: ক্যানভাস কম্পোজিটর দুই ফিড আঁকে, আর MediaRecorder প্রতি ৫ সেকেন্ডে একটি খণ্ড দেয়। হোস্ট প্রতিটি খণ্ড নিবন্ধন করে POST /api/chunks/register-এ (প্রতিযোগিতা, ক্রম ও বাইট সীমার সঙ্গে বাঁধা সংক্ষিপ্ত একবারের কী), আপলোড করে, GET /verify দিয়ে যাচাই করে আর POST /receipt জানায়। প্লেব্যাক পড়ে GET /api/chunks/playlist/:id, আর বিদ্যমান চূড়ান্তকরণের ধাপই VOD বানায়।

ডাউনলোড: @ffmpeg/core 0.12.10 চলে নিজে হোস্ট করা ব্রাউজার ওয়ার্কারে MP4 রূপান্তরের জন্য, আর যে রেকর্ডিং ইতিমধ্যে MP4-উপযোগী তার জন্য আছে গঠনগত রিমাক্স পথ। অগ্রগতি ও মেমরির সীমা সামলায় ক্লায়েন্ট সার্ভিস।

রিয়েলটাইম: GET /api/sse দিয়ে SSE লাইভ হালনাগাদ বহন করে, আর সিগন্যালিং ব্যবহার করে HTTP পোলিং; উৎপাদনের পথে WebSocket ব্যবহার হয় না।

মান: Vitest সামলায় ইউনিট ও UI চুক্তি, আর Playwright সামলায় প্রান্ত-থেকে-প্রান্ত ব্রাউজার প্রবাহ। Markdown ডকুমেন্ট রেন্ডার হয় marked দিয়ে, আর PostCSS-এর Autoprefixer সম্পন্ন করে CSS পাইপলাইন।