التقنيات

ببساطة

يعمل ديولي في المتصفح على شبكة Cloudflare العالمية. يلتقي المتنافسان في مكالمة فيديو مباشرة بين جهازيهما (WebRTC نقطة لنقطة)؛ وعندما تمنع الشبكة المسار المباشر يساعد مرحّل TURN على إتمام الاتصال.

أثناء المنافسة يجمع المتصفح كاميرتي الطرفين في صورة واحدة ويسجلها على شكل مقاطع قصيرة مدتها 5 ثوانٍ. تُرفع المقاطع أولاً بأول، ويمكن تشغيلها بالترتيب، ثم تُجمع في تسجيل كامل بعد انتهاء المنافسة.

يمكن تنزيل المنافسات المسجلة كملف MP4. وعندما يحتاج التسجيل إلى تحويل، يجري التحويل داخل متصفح الزائر باستخدام FFmpeg.wasm، فلا يُرسل الملف إلى خدمة تحويل خارجية.

تعيش بيانات المنصة في D1، وتُبنى الصفحات والواجهات البرمجية بـ 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 فقط عند غياب أي منهما.

التسجيل: مركّب 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. وتُدار حدود التقدم والذاكرة في خدمة العميل.

الزمن الحقيقي: يحمل SSE عبر GET /api/sse التحديثات الحية، ويستخدم signaling الاستقصاء عبر HTTP؛ ومسار الإنتاج لا يستخدم WebSocket.

الجودة: يغطي Vitest عقود الوحدات والواجهات، ويغطي Playwright مسارات المتصفح من طرف إلى طرف. وتُعرض وثائق Markdown عبر marked، ويكتمل مسار CSS بـ PostCSS وAutoprefixer.