Exécution de BigBlueButton dans une iframe - Reactjs, Vue.js, Angularjs

L'hébergement Big Blue Meeting Cloud, le serveur dédié et le cloud privé dédié prennent en charge l'intégration de BigBlueButton dans un iframe.

Comment intégrer BigBlueButton 3.0 dans une iframe

Si vous utilisez notre service d'hébergement cloud, il vous suffit d'utiliser votre clé API ; aucune configuration supplémentaire n'est requise.

Si vous utilisez un autre service d'hébergement, veuillez contacter notre équipe d'assistance. Nous devrons effectuer une petite modification de configuration sur votre serveur pour activer l'intégration d'iframes.

Vous pouvez également vous inscrire pour un compte d'essai gratuit afin de tester l'intégration pendant le développement de votre application.

SSL requis

Votre <iframe> L'hébergement doit se faire sur un site web sécurisé par HTTPS (SSL/TLS). Les fonctionnalités WebRTC, telles que les webcams, les microphones et le partage d'écran, nécessitent un environnement sécurisé. Si votre site n'est pas hébergé sur un serveur SSL, les utilisateurs ne pourront pas accorder les autorisations nécessaires.

Activer l'option allowRequestsWithoutSession

Lors de la création d'une réunion, vous devez définir les allowRequestsWithoutSession paramètre true.

Ce paramètre permet aux utilisateurs de rejoindre des réunions sans validation de cookie de session, qui est requise lorsque les utilisateurs se connectent via une URL de participation générée par une API et chargée dans une iframe.

Ce paramètre a été ajouté dans BigBlueButton 2.4.3 et sa valeur par défaut est falseSi ce paramètre est omis ou laissé tel quel falseIl est possible que les utilisateurs ne puissent pas rejoindre les réunions via une iframe intégrée.

Créer une URL de connexion pour une iframe

Créez une réunion en utilisant create appel API et inclusion allowRequestsWithoutSession=true.
Attendez environ 5 secondes que la réunion s'initialise, ou interrogez le système. getMeetingInfo Point de terminaison API jusqu'à ce que la réunion soit disponible.
Afficher un écran de chargement pendant le démarrage de la réunion.
Générez une URL de connexion en utilisant join Appel API.
Utilisez l'URL de connexion générée comme src attribut de votre iframe.

Important

Vous pouvez générer l'URL de participation immédiatement après la création de la réunion, mais vous devez attendre que la réunion soit prête avant d'afficher l'iframe. Charger l'iframe trop tôt peut entraîner l'affichage d'une page d'erreur.

Vue.js, React et Angular possèdent chacun leurs propres méthodes pour le rendu des iframes. Consultez la documentation de votre framework pour plus de détails sur l'implémentation.

Configurer correctement les autorisations de l'iframe

Le allow L'attribut doit être configuré exactement comme indiqué ci-dessous pour activer les fonctionnalités de caméra, de microphone et de partage d'écran :

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

Une fois correctement configurée, l'iframe intégrera automatiquement l'utilisateur à la réunion.