videosdk rtc react sdk example
1.0.0
في Video SDK، نقوم ببناء أدوات لمساعدة الشركات على إنشاء منتجات تعاونية ذات مستوى عالمي تتمتع بإمكانيات الصوت/الفيديو المباشر، والتسجيلات السحابية، وتدفق RTMP/HLS، وواجهات برمجة التطبيقات التفاعلية.
غريبة لرؤيتها في العمل؟ تحقق من العرض المباشر لدينا هنا.
اتبع هذه الخطوات لإعداد نموذج التطبيق وتشغيله:
git clone https://github.com/videosdk-live/videosdk-rtc-react-sdk-example.gitافتح محرر التعليمات البرمجية المفضل لديك وانسخ ملف البيئة النموذجي:
cp .env.example .env.env الخاص بك قم بإنشاء رمز مميز مؤقت من حساب Video SDK الخاص بك وقم بتحديث ملف .env :
REACT_APP_VIDEOSDK_TOKEN = " YOUR_TEMPORARY_TOKEN "تثبيت الحزم اللازمة:
npm installبينغو، حان الوقت للضغط على زر الإطلاق.
npm run startأطلق العنان لمجموعة من الميزات القوية لتحسين اجتماعاتك:
| ميزة | التوثيق | وصف |
|---|---|---|
| ؟ الإعداد المسبق | إعداد المكالمة المسبقة | قم بتكوين أجهزة الصوت والفيديو والإعدادات الأخرى قبل الانضمام إلى الاجتماع. |
| ⏳ ردهة الإنتظار | ردهة الإنتظار | مساحة افتراضية للمشاركين للانتظار قبل الانضمام إلى الاجتماع. |
| ؟ الانضمام إلى الاجتماع | الانضمام إلى الاجتماع | يسمح للمشاركين بالانضمام إلى الاجتماع. |
| ؟ مغادرة الاجتماع | مغادرة الاجتماع | يسمح للمشاركين بمغادرة الاجتماع. |
| ؟ تبديل الميكروفون | التحكم في الميكروفون | تبديل الميكروفون أو إيقاف تشغيله أثناء الاجتماع. |
| ؟ تبديل الكاميرا | التحكم بالكاميرا | قم بتشغيل كاميرا الفيديو أو إيقاف تشغيلها أثناء الاجتماع. |
| مشاركة الشاشة | مشاركة الشاشة | شارك شاشتك مع المشاركين الآخرين أثناء المكالمة. |
| ؟ التقاط الصور | ملتقط الصور | التقط صورًا للمشاركين الآخرين من بث الفيديو الخاص بهم، وهو أمر مفيد بشكل خاص لسيناريوهات "اعرف عميلك" (Video KYC) والتحقق من الهوية. |
| ؟ تغيير جهاز الإدخال | تبديل أجهزة الإدخال | التبديل بين أجهزة إدخال الصوت والفيديو المختلفة. |
| ؟ تغيير إخراج الصوت | تبديل إخراج الصوت | حدد جهاز إخراج للصوت أثناء الاجتماع. |
| تحسين المسارات | تحسين المسار | تحسين جودة وأداء مسارات الوسائط. |
| محادثة | الدردشة داخل الاجتماع | تبادل الرسائل مع المشاركين من خلال آلية النشر والاشتراك. |
| السبورة | السبورة | تعاون بصريًا من خلال الرسم والتعليق على لوحة المعلومات المشتركة. |
| ؟ مشاركة الملفات | مشاركة الملفات | مشاركة الملفات مع المشاركين أثناء الاجتماع. |
| ؟ تسجيل | تسجيل | سجل الاجتماع للرجوع إليه في المستقبل. |
| ؟ البث المباشر لبروتوكول RTMP | البث المباشر لبروتوكول RTMP | قم ببث الاجتماع مباشرة على منصات مثل YouTube أو Facebook. |
| النسخ في الوقت الحقيقي | النسخ في الوقت الحقيقي | إنشاء تدوين في الوقت الحقيقي للاجتماع. |
| ؟ تبديل الوسائط البعيدة | التحكم في الوسائط عن بعد | التحكم في الميكروفون أو الكاميرا الخاصة بالمشاركين عن بعد. |
| كتم صوت كافة المشاركين | كتم صوت الكل | كتم صوت جميع المشاركين في وقت واحد أثناء المكالمة. |
| ️ إزالة المشارك | إزالة المشارك | إخراج أحد المشاركين من الاجتماع. |
فهم المكونات الأساسية لـ SDK الخاص بنا:
Meeting - يمثل الاجتماع الاتصال الصوتي والمرئي في الوقت الفعلي.
Note: Don't confuse the terms Room and Meeting; both mean the same thing ?
Sessions - تتم الإشارة إلى المدة المحددة التي تقضيها في اجتماع معين على أنها جلسة، ويمكنك الحصول على جلسات متعددة لمعرف اجتماع محدد.
Participant - يشير المشارك إلى أي شخص يحضر جلسة الاجتماع. يمثل local participant نفسك (أنت)، بينما يعتبر جميع الحاضرين الآخرين remote participants .
Stream - يشير الدفق إلى محتوى الوسائط المرئية أو الصوتية الذي يتم نشره بواسطة local participant أو remote participants .
يتم استخدام الرمز المميز لإنشاء اجتماع والتحقق من صحته باستخدام واجهة برمجة التطبيقات وكذلك تهيئة الاجتماع.
Development Environment :
Production Environment :
المكونات/DropDown.js : مكون منسدل لاختيار أجهزة إدخال الصوت (الميكروفونات)، ومراقبة الصوت عبر Web Audio API، وإدارة إعدادات الميكروفون.
المكونات/DropDownCam.js : مكون القائمة المنسدلة لاختيار أجهزة الكاميرا وإدارة أذونات الكاميرا.
المكونات/DropDownSpeaker.js : يتيح للمستخدمين تحديد مكبرات الصوت واختبارها باستخدام عينات الأصوات وتتبع تقدم التشغيل للتأكيد.
المكونات/NetworkStats.js : يعرض إحصائيات الشبكة في الوقت الفعلي، مثل سرعات التحميل والتنزيل.
components/screens/JoiningScreen.js : يوفر للمستخدمين خيار إنشاء اجتماع أو الانضمام إليه، وإدارة كاميرا الويب وحالة الميكروفون، وتحديد الأجهزة (الميكروفون، والكاميرا، ومكبرات الصوت)، والتحقق من الأذونات، ومعاينة الفيديو، ومراقبة إحصائيات الشبكة لضمان الإعداد المناسب قبل دخول الاجتماع.
api.js : يشمل جميع استدعاءات واجهة برمجة التطبيقات (API) لإنشاء الاجتماعات والتحقق من صحتها.
components/MeetingDetailsScreen.js : يعرض خيارات إنشاء اجتماع أو الانضمام إليه.
components/screens/WaitingToJoin.js : يعرض رسمًا متحركًا لـ Lottie مع الرسائل أثناء انتظار الانضمام إلى الاجتماع. تظهر هذه الشاشة حتى تصبح علامة isMeetingJoined صحيحة، والتي يتم استلامها من meeting الذي تمت تهيئته باستخدام useMeeting() من @videosdk.live/react-sdk . 
components/ParticipantView.js : يعرض مقطع فيديو لمشارك واحد مع شاشة عرض زاوية لاسم المشارك.
components/ParticipantGrid.js : يعرض شبكة من المشاركين تظهر على الشاشة الرئيسية.
meeting/components/ParticipantView.js : إدارة عدد المشاركين الذين سيتم عرضهم في شبكة المشاركين.
meeting/components/BottomBar.jsmore actions . يفتح زر more actions درجًا يحتوي على الخيارات المتبقية. 
components/PresenterView.js : يعرض العرض عندما يشارك أحد المشاركين شاشته. 
sidebar/ChatPanel.js : يحتوي على اللوحة الجانبية للدردشة، مع حقل إدخال الدردشة وقائمة رسائل الدردشة. 
sidebar/ParticipantPanel.js : يعرض قائمة المشاركين الحاضرين في الاجتماع. 
components/screens/LeaveScreen.js : يعرض شاشة المغادرة عند خروج المشارك من الاجتماع. 
اكتشف المزيد وابدأ في البناء باستخدام وثائقنا
