Kjøre BigBlueButton i en iframe - Reactjs, Vue.js, Angular.js

Big Blue Meeting Cloud Hosting, dedikert server og dedikert privat sky støtter innebygging av BigBlueButton i en iframe.

Slik legger du inn BigBlueButton 3.0 i en iframe

Hvis du bruker vår skyhostingtjeneste, kan du ganske enkelt bruke API-nøkkelen din – ingen ytterligere konfigurasjon er nødvendig.

Hvis du bruker et annet hostingalternativ, kan du kontakte supportteamet vårt. Vi må gjøre en liten konfigurasjonsendring på serveren din for å aktivere innebygging av iframes.

Du kan også registrere deg for en gratis prøvekonto for å teste integrasjonen mens du utvikler applikasjonen din.

SSL er påkrevd

Din <iframe> må være lagret på et nettsted som serveres via HTTPS (SSL/TLS). WebRTC-funksjoner som webkameraer, mikrofoner og skjermdeling krever en sikker kontekst. Hvis nettstedet ditt ikke er lagret under SSL, vil ikke brukere kunne gi de nødvendige tillatelsene.

Aktiver allowRequestsWithoutSession

Når du oppretter et møte, må du angi allowRequestsWithoutSession parameter til true.

Denne parameteren lar brukere bli med i møter uten validering av øktinformasjonskapsler, noe som kreves når brukere blir med via en API-generert tilkoblings-URL lastet inn i en iframe.

Parameteren ble lagt til i BigBlueButton 2.4.3 og er som standard satt til falseHvis denne parameteren utelates eller beholdes som false, kan det hende at brukere ikke kan bli med i møter via en innebygd iframe.

Opprett en deltaker-URL for en iframe

Opprett et møte ved hjelp av create API-kall og inkludering allowRequestsWithoutSession=true.
Vent omtrent 5 sekunder til møtet starter, eller avstem getMeetingInfo API-endepunkt inntil møtet blir tilgjengelig.
Vis en lasteskjerm mens møtet starter.
Generer en URL-adresse for å bli med ved hjelp av join API-anrop.
Bruk den genererte tilkoblings-URL-en som src attributtet til iframen din.

Viktig

Du kan generere URL-en for å bli med umiddelbart etter at du har opprettet møtet, men du bør vente til møtet er klart før du viser iframe-en. Hvis du laster iframe-en for tidlig, kan det føre til en feilside.

Vue.js, React og Angular har hver sine egne metoder for gjengivelse av iframes. Se dokumentasjonen for rammeverket ditt for implementeringsdetaljer.

Angi iframe-tillatelser riktig

Ocuco allow Attributtet må konfigureres nøyaktig som vist nedenfor for å aktivere kamera-, mikrofon- og skjermdelingsfunksjonalitet:

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

Når den er riktig konfigurert, vil iframe-en automatisk bli med brukeren i møtet.