فناوری

به زبان ساده

Dueli در مرورگر روی شبکه جهانی Cloudflare اجرا می‌شود. دو رقیب در یک تماس ویدیویی زنده بین دستگاه‌های خود ملاقات می‌کنند (WebRTC peer-to-peer);当一个网络阻止直接路径时，TURN relay帮助连接通过.

در طول یک رقابت، مرورگر هر دو خروجی دوربین را در یک تصویر ترکیب کرده و آن را به صورت قطعات ۵ ثانیه‌ای ضبط می‌کند. این قطعات هنگام تولید آپلود می‌شوند، می‌توانند به ترتیب پخش شوند و پس از پایان مسابقه در یک بازپخش کامل جمع‌آوری می‌شوند.

رقابت‌های ضبط‌شده را می‌توان به عنوان فایل 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-only زمانی که هیچ‌کدام پیکربندی نشده‌اند.

ضبط: یک کانواس کامپوزیتر هر دو خروجی را رسم می‌کند و MediaRecorder هر ۵ ثانیه یک قطعه را تولید می‌کند. میزبان هر قطعه را در POST /api/chunks/register ثبت می‌کند (یک کلید یک‌باره با عمر کوتاه که به رقابت، ترتیب و سقف بایت متصل است)، آن را آپلود می‌کند، با GET /verify تأیید می‌کند و در POST /receipt گزارش می‌دهد. پخش خواندن GET /api/chunks/playlist/:id را می‌خواند، و مرحله نهایی موجود VOD را تولید می‌کند.

دانلودها: @ffmpeg/core 0.12.10 در یک کارگر مرورگر خود میزبان برای تبدیل MP4 اجرا می‌شود، با یک مسیر remux ساختاری برای ضبط‌هایی که قبلاً با MP4 سازگار هستند. پیشرفت و محدودیت‌های حافظه در سرویس سمت مشتری مدیریت می‌شوند.

زمان واقعی: SSE از طریق GET /api/sse به‌روزرسانی‌های زنده را حمل می‌کند و signaling از پولینگ HTTP استفاده می‌کند؛ مسیر تولید از WebSocket استفاده نمی‌کند.

کیفیت: Vitest پوشش واحد و قراردادهای UI را پوشش می‌دهد و Playwright جریان‌های مرورگر انتها به انتها را پوشش می‌دهد. اسناد Markdown با marked رندر می‌شوند و PostCSS با Autoprefixer خط لوله CSS را کامل می‌کند.