Menjalankan BigBlueButton dalam iframe - Reactjs, Vue.js, Angular.js

Pengehosan Awan Big Blue Meeting, Pelayan Dedicated dan Awan Persendirian Dedicated menyokong pembenaman BigBlueButton dalam iframe.

Cara Membenamkan BigBlueButton 3.0 dalam iframe

Jika anda menggunakan perkhidmatan Pengehosan Awan kami, anda hanya boleh menggunakan kunci API anda—tiada konfigurasi tambahan diperlukan.

Jika anda menggunakan pilihan hosting lain, sila hubungi pasukan sokongan kami. Kami perlu membuat sedikit perubahan konfigurasi pada pelayan anda untuk mendayakan pembenaman iframe.

Anda juga boleh mendaftar untuk akaun percubaan percuma bagi menguji integrasi semasa membangunkan aplikasi anda.

SSL Diperlukan

<iframe> mesti dihoskan di laman web yang disiarkan melalui HTTPS (SSL/TLS). Ciri WebRTC seperti kamera web, mikrofon dan perkongsian skrin memerlukan konteks yang selamat. Jika laman web anda tidak dihoskan di bawah SSL, pengguna tidak akan dapat memberikan kebenaran yang diperlukan.

Dayakan allowRequestsWithoutSession

Semasa membuat mesyuarat, anda mesti menetapkan allowRequestsWithoutSession parameter untuk true.

Parameter ini membolehkan pengguna menyertai mesyuarat tanpa pengesahan kuki sesi, yang diperlukan apabila pengguna menyertai melalui URL penyertaan yang dijana API yang dimuatkan di dalam iframe.

Parameter tersebut telah ditambah dalam BigBlueButton 2.4.3 dan ditetapkan secara lalai kepada falseJika parameter ini diabaikan atau dibiarkan sebagai false, pengguna mungkin tidak dapat menyertai mesyuarat melalui iframe terbenam.

Cipta URL Sertai untuk iframe

Cipta mesyuarat menggunakan create Panggilan API dan sertakan allowRequestsWithoutSession=true.
Tunggu lebih kurang 5 saat untuk mesyuarat dimulakan, atau undian getMeetingInfo Titik akhir API sehingga mesyuarat tersedia.
Paparkan skrin pemuatan semasa mesyuarat bermula.
Jana URL penyertaan menggunakan join Panggilan API.
Gunakan URL penyertaan yang dijana sebagai src atribut iframe anda.

penting

Anda boleh menjana URL penyertaan sejurus selepas membuat mesyuarat, tetapi anda harus menunggu sehingga mesyuarat siap sebelum memaparkan iframe. Memuatkan iframe terlalu awal boleh mengakibatkan halaman ralat.

Vue.js, React dan Angular masing-masing mempunyai kaedah tersendiri untuk memaparkan iframe. Rujuk dokumentasi rangka kerja anda untuk butiran pelaksanaan.

Tetapkan Kebenaran iframe dengan Betul

. allow atribut mesti dikonfigurasikan sama seperti yang ditunjukkan di bawah untuk mendayakan fungsi kamera, mikrofon dan perkongsian skrin:

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

Apabila dikonfigurasikan dengan betul, iframe akan secara automatik menyertai pengguna ke mesyuarat.