k'/.

تشغيل BigBlueButton داخل إطار iframe - Reactjs، Vue.js، Angular.js

يدعم Big Blue Meeting Cloud Hosting والخادم المخصص والسحابة الخاصة المخصصة تضمين BigBlueButton في إطار iframe.

كيفية تضمين BigBlueButton 3.0 في إطار iframe

إذا كنت تستخدم خدمة الاستضافة السحابية الخاصة بنا، فيمكنك ببساطة استخدام مفتاح API الخاص بك - لا يلزم أي تكوين إضافي.

إذا كنت تستخدم أي خيار استضافة آخر، يُرجى التواصل مع فريق الدعم لدينا. سنحتاج إلى إجراء تعديل بسيط على إعدادات خادمك لتفعيل تضمين الإطارات المضمنة (iframe).

يمكنك أيضًا التسجيل للحصول على حساب تجريبي مجاني لاختبار التكامل أثناء تطوير تطبيقك.

شهادة SSL مطلوبة

إن <iframe> يجب استضافة الموقع على منصة ويب تدعم بروتوكول HTTPS (SSL/TLS). تتطلب ميزات WebRTC، مثل كاميرات الويب والميكروفونات ومشاركة الشاشة، بيئة آمنة. إذا لم يكن موقعك مُستضافًا باستخدام SSL، فلن يتمكن المستخدمون من منح الأذونات اللازمة.

فعّل خاصية السماح بالطلبات بدون جلسة

عند إنشاء اجتماع، يجب عليك تحديد allowRequestsWithoutSession المعلمة ل true.

تتيح هذه المعلمة للمستخدمين الانضمام إلى الاجتماعات دون التحقق من صحة ملف تعريف الارتباط الخاص بالجلسة، وهو أمر مطلوب عندما ينضم المستخدمون من خلال عنوان URL للانضمام تم إنشاؤه بواسطة واجهة برمجة التطبيقات (API) ويتم تحميله داخل إطار iframe.

تمت إضافة هذا المعامل في الإصدار 2.4.3 من BigBlueButton، وقيمته الافتراضية هي falseإذا تم حذف هذا المعامل أو تركه كما هو falseقد لا يتمكن المستخدمون من الانضمام إلى الاجتماعات من خلال إطار iframe مضمن.

أنشئ رابط انضمام لإطار iframe

  1. إنشاء اجتماع باستخدام create استدعاء واجهة برمجة التطبيقات وتضمينها allowRequestsWithoutSession=true.
  2. انتظر حوالي 5 ثوانٍ حتى يبدأ الاجتماع، أو قم باستطلاع الرأي getMeetingInfo نقطة نهاية واجهة برمجة التطبيقات (API) حتى يصبح الاجتماع متاحًا.
  3. اعرض شاشة تحميل أثناء بدء الاجتماع.
  4. قم بإنشاء رابط انضمام باستخدام join استدعاء API.
  5. استخدم عنوان URL الخاص بالانضمام الذي تم إنشاؤه كـ src سمة من سمات إطار iframe الخاص بك.

مهم

يمكنك إنشاء رابط الانضمام فور إنشاء الاجتماع، ولكن يُنصح بالانتظار حتى يصبح الاجتماع جاهزًا قبل عرض الإطار المضمن (iframe). قد يؤدي تحميل الإطار المضمن مبكرًا جدًا إلى ظهور صفحة خطأ.

لكل من Vue.js وReact وAngular طرقها الخاصة لعرض الإطارات المضمنة (iframes). راجع وثائق إطار العمل الخاص بك للاطلاع على تفاصيل التنفيذ.

اضبط أذونات الإطار المضمن بشكل صحيح

استخدم allow يجب ضبط الخاصية تمامًا كما هو موضح أدناه لتمكين وظائف الكاميرا والميكروفون ومشاركة الشاشة:

<iframe
 src="https://manager.bigbluemeeting.com/bigbluebutton/api/join?..."
 width="100%"
 height="700"
 allow="camera *; microphone *; display-capture *;"
 allowfullscreen
></iframe>

عند ضبط الإعدادات بشكل صحيح، سيقوم الإطار المضمن (iframe) تلقائيًا بضم المستخدم إلى الاجتماع.

هل تحتاج إلى مساعدة؟

إذا كانت لديك أي أسئلة أو واجهت أي مشاكل، يرجى فتح تذكرة دعم أو استخدام زر الدردشة المباشرة الموجود في الزاوية اليمنى السفلية من الموقع الإلكتروني.