Esecuzione di BigBlueButton in un iframe - Reactjs, Vue.js, Angular.js

Big Blue Meeting Cloud Hosting, Server Dedicato e Cloud Privato Dedicato supportano l'incorporamento di BigBlueButton in un iframe.

Come incorporare BigBlueButton 3.0 in un iframe

Se utilizzi il nostro servizio di hosting cloud, puoi semplicemente usare la tua chiave API: non è richiesta alcuna configurazione aggiuntiva.

Se utilizzi un'altra opzione di hosting, contatta il nostro team di supporto. Dovremo apportare una piccola modifica alla configurazione del tuo server per abilitare l'incorporamento degli iframe.

È inoltre possibile registrarsi per un account di prova gratuito per testare l'integrazione durante lo sviluppo dell'applicazione.

È richiesto il certificato SSL.

<iframe> Il sito deve essere ospitato su un server che utilizzi il protocollo HTTPS (SSL/TLS). Le funzionalità WebRTC, come webcam, microfoni e condivisione dello schermo, richiedono un ambiente sicuro. Se il sito non è ospitato tramite SSL, gli utenti non saranno in grado di concedere le autorizzazioni necessarie.

Abilita allowRequestsWithoutSession

Quando crei una riunione, devi impostare il allowRequestsWithoutSession parametro true.

Questo parametro consente agli utenti di partecipare alle riunioni senza la convalida del cookie di sessione, necessaria invece quando gli utenti si uniscono tramite un URL di partecipazione generato da un'API e caricato all'interno di un iframe.

Il parametro è stato aggiunto in BigBlueButton 2.4.3 e il valore predefinito è false. Se questo parametro viene omesso o lasciato come falseGli utenti potrebbero non essere in grado di partecipare alle riunioni tramite un iframe incorporato.

Crea un URL di collegamento per un iframe

Crea una riunione utilizzando il create chiamata API e includi allowRequestsWithoutSession=true.
Attendi circa 5 secondi per l'avvio della riunione oppure interroga il getMeetingInfo Endpoint API fino a quando la riunione non sarà disponibile.
Visualizza una schermata di caricamento durante l'avvio della riunione.
Genera un URL di unione utilizzando il join Chiamata API.
Utilizzare l'URL di join generato come src attributo del tuo iframe.

Consigli

È possibile generare l'URL di partecipazione subito dopo aver creato la riunione, ma è consigliabile attendere che la riunione sia pronta prima di visualizzare l'iframe. Il caricamento anticipato dell'iframe potrebbe causare la visualizzazione di una pagina di errore.

Vue.js, React e Angular hanno ciascuno i propri metodi per il rendering degli iframe. Consulta la documentazione del tuo framework per i dettagli di implementazione.

Impostare correttamente le autorizzazioni dell'iframe

Migliori allow L'attributo deve essere configurato esattamente come mostrato di seguito per abilitare le funzionalità di fotocamera, microfono e condivisione dello schermo:

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

Se configurato correttamente, l'iframe aggiungerà automaticamente l'utente alla riunione.