حل مشاكل المزامنة اللحظية Real-time Sync لميزة Watch Together في تطبيق React/Next.js
تفاصيل المشروع
السلام عليكم،
نحن نعمل على تطبيق شبكة اجتماعية (Social App) يحتوي على ميزة "المشاهدة المشتركة" (Watch Together) عبر غرف افتراضية، ونبحث عن مطور خبير (Senior Frontend / Full-stack Developer) يمتلك خبرة عميقة في التعامل مع مشغلات الفيديو والمزامنة اللحظية (Real-time Video Synchronization) لحل مشكلات دقيقة في الـ State Management و الـ Race Conditions بالفرونت إند.
البنية التحتية الحالية (Tech Stack):
- الفرونت إند: Next.js / React / TypeScript.
- مشغلات الفيديو المستخدمة: مشغل HTML5 عادي، Shaka Player لـ HLS، ونظام استخراج لمصادر YouTube (YouTube source extraction).
- الباك إند: Elixir / Phoenix Framework.
- بروتوكول المزامنة: Phoenix Channels / WebSockets لنقل الأوامر الفورية، مع وجود Sync State Canonical قادم من السيرفر.
طبيعة المشكلة الحالية:
البنية التحتية ونقل البيانات عبر الـ WebSockets تعمل بشكل سليم، ولكن المشكلة تكمن في طريقة معالجة وتطبيق أوامر التحكم (Play / Pause / Seek) داخل مشغل الفيديو نفسه بالفرونت إند. تحدث مشاكل مثل "تسريب التشغيل بعد التقديم" (Play leak after seek)، أو عدم توازن المزامنة بين الهوست والمشتركين بسبب تفاوت أوقات التحميل (Buffering/Latency)، مما يجعل الفيديو يظهر بـ Framerate منخفض جداً أو يتوقف تماماً عند بعض الأطراف.
المطلوب تنفيذه:
1. مراجعة كود المزامنة الحالي في الفرونت إند وعمل Refactoring لمنطق معالجة الأحداث (Event Handling) الخاصة باللاعبين.
2. بناء نظام قوي لإدارة حالة المشغل (State Machine) تضمن عدم حدوث تضارب بين الأوامر المتتالية (مثل منع الـ Play قبل اكتمال الـ Seek والـ Buffering لكل الأطراف).
3. معالجة الـ Network Latency والفروقات الزمنية البسيطة (Ping) بين المشتركين لضمان تجربة فريمات سلسة ومزامنة متطابقة (تجاوز مشكلة الـ 5 فريمات).
4. ضمان استقرار الحل مع كافة مصادر الفيديو المدعومة (Direct MP4, HLS Streams, YouTube).
الشروط المطلوبة في المستقل:
- خبرة قوية ومثبتة في React/TypeScript والتعامل مع الـ Video APIs (خاصة Shaka Player أو مشغلات الـ HLS).
- فهم ممتاز لكيفية عمل الـ WebSockets وإدارة الـ Real-time States.
- يفضل جداً من لديه دراية بـ Elixir/Phoenix (لفهم طبيعة الـ Channels المعمول بها في الباك إند إذا لزم الأمر).
برجاء عند التقديم توضيح خبرتك السابقة في التعامل مع مشغلات الفيديو أو أنظمة الـ Real-time Sync، والمدة المتوقعة لإنهاء العمل.
React, Next.js, TypeScript, Elixir, WebSockets, Shaka Player, Video Streaming
كود الفرونت إند الحالي (React/Next.js) والتوثيق الخاص بـ API الباك إند (Phoenix Channels).
ابلكيشن يُسمى RAVE
كود فرونت إند (React/TypeScript) نظيف وخالٍ من الـ Race Conditions ومشاكل الـ State التضاربية.ملف توثيق (Documentation) يوضح آلية المزامنة الجديدة وإدارة الحالات (State Machine) التي تم تطبيقها.إجراء اختبارات حية (Live Testing) ناجحة لغرف مشاهدة جماعية بمصادر فيديو مختلفة (YouTube, HLS, MP4) والتأكد من ثبات الفريمات والمزامنة لكل الأطراف.
صاحب المشروع
Aseel E.
| تاريخ التسجيل | |
| معدل التوظيف | |
| المشاريع المفتوحة | 1 |
| مشاريع قيد التنفيذ | 0 |
| التواصلات الجارية | 0 |
العروض المقدمة
Mohamed M.
السلام عليكم، من وصف المشكلة واضح أن التحدي الحقيقي ليس في WebSockets أو Phoenix Channels نفسها، بل في إدارة حالة مشغل الفيديو والتعامل مع Race Conditions النات...
Adel M.
و عليكم السلام ورحمة الله ، لقد قرأت تفاصيل المشكلة التقنية التي تواجهونها في نظام الـ Watch Together بعناية. بصفتي مهندس برمجيات متخصص في بناء أنظمة البث المبا...
Abdelrahman H.
عميلنا العزيز، نشكركم على إتاحة الفرصة لنا للعمل على مشروعكم. بعد مراجعة متطلبات المشروع، أعددت عرضا أوليا يوضح آلية تنفيذ المشروع لضمان منتج نهائي سلس وسهل الا...
عبدالرحمن ق.
السلام عليكم المشكلة اللي وصفتها واضحة جدا، خصوصا مشاكل الـ Race Conditions والتعامل مع أوامر Play / Pause / Seek أثناء الـ Buffering والمزامنة اللحظية عندي خبر...
وفاء ا.
السلام عليكم، قرأت وصف المشكلة بالكامل، وبصراحة ما لفت انتباهي ليس الـ WebSockets أو Phoenix Channels، بل الوصف الدقيق لمشاكل Play Leak After Seek و Race Condit...
عبدالرحمن ه.
الـ Race Conditions و Play leak after seek في مشغلات الفيديو غالبا بتحصل لأن الـ Frontend بيتعامل مع أوامر الـ WebSockets (المشتركة) وأحداث المشغل الداخلية (الم...
Abdallah T.
وعليكم السلام ورحمة الله وبركاته، أهلا بك يا فندم. لقد قرأت تفاصيل المشكلة بعناية شديدة، وهي مشكلة هندسية ممتعة ومعقدة في آن واحد. مشكلات الـ Race Conditions وP...
Mohamed A.
أكيد، الأفضل في مستقل أو خمسات إن البروبوزال يكون طبيعي ومش متكلف، ويبين إنك فاهم المشكلة فعلا مش مجرد ناسخ تقنيات. السلام عليكم، اطلعت على تفاصيل المشروع، وبصر...
اسلام ا.
السلام عليكم ورحمة الله وبركاته، قرأت تفاصيل المشروع بعناية، والمشكلة التي تواجهونها واضحة تماما بالنسبة لي، ولدي تصور تقني دقيق لحلها. تحليل المشكلة: مشكلة الـ...