BigBlueButton uitvoeren in een iframe - Reactjs, Vue.js, Angular.js

Big Blue Meeting Cloud Hosting, Dedicated Server en Dedicated Private Cloud ondersteunen het inbedden van BigBlueButton in een iframe.

Hoe BigBlueButton 3.0 in een iframe in te sluiten

Als u gebruikmaakt van onze cloudhostingdienst, kunt u eenvoudig uw API-sleutel gebruiken; er is geen verdere configuratie nodig.

Als u een andere hostingoptie gebruikt, neem dan contact op met ons supportteam. We moeten een kleine configuratiewijziging op uw server doorvoeren om het insluiten van iframes mogelijk te maken.

Je kunt je ook aanmelden voor een gratis proefaccount om de integratie te testen tijdens de ontwikkeling van je applicatie.

SSL is vereist

Uw <iframe> De website moet worden gehost op een platform dat via HTTPS (SSL/TLS) wordt aangeboden. WebRTC-functies zoals webcams, microfoons en schermdeling vereisen een beveiligde omgeving. Als uw site niet via SSL wordt gehost, kunnen gebruikers de benodigde machtigingen niet verlenen.

Schakel allowRequestsWithoutSession in

Bij het aanmaken van een vergadering moet u de volgende instellingen configureren: allowRequestsWithoutSession parameter true.

Met deze parameter kunnen gebruikers deelnemen aan vergaderingen zonder validatie van sessiecookies, wat vereist is wanneer gebruikers deelnemen via een door de API gegenereerde deelname-URL die in een iframe wordt geladen.

De parameter is toegevoegd in BigBlueButton 2.4.3 en heeft als standaardwaarde falseAls deze parameter wordt weggelaten of als deze wordt genegeerd, falseGebruikers kunnen mogelijk niet deelnemen aan vergaderingen via een ingesloten iframe.

Maak een deelname-URL voor een iframe.

Maak een vergadering aan met behulp van de create API-aanroep en include allowRequestsWithoutSession=true.
Wacht ongeveer 5 seconden totdat de vergadering is geïnitialiseerd, of peil de gegevens. getMeetingInfo API-eindpunt totdat de vergadering beschikbaar komt.
Toon een laadscherm terwijl de vergadering start.
Genereer een deelname-URL met behulp van de join API-oproep.
Gebruik de gegenereerde deelname-URL als de src attribuut van uw iframe.

Belangrijk

Je kunt de deelname-URL direct na het aanmaken van de vergadering genereren, maar je moet wachten tot de vergadering gereed is voordat je de iframe weergeeft. Het te vroeg laden van de iframe kan een foutpagina veroorzaken.

Vue.js, React en Angular hebben elk hun eigen methoden voor het weergeven van iframes. Raadpleeg de documentatie van uw framework voor implementatiedetails.

Stel de iframe-machtigingen correct in.

De allow Het attribuut moet exact zo geconfigureerd worden als hieronder weergegeven om de camera-, microfoon- en schermdeelingsfunctionaliteit in te schakelen:

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

Indien correct geconfigureerd, zal de iframe de gebruiker automatisch aan de vergadering toevoegen.