Running BigBlueButton in an <iframe> - Reactjs, Vue.js, Angular.js

If you are using the Cloud Hosting, then you can simply use your API key no configuration is necessary. If you are using the other options please contact us as we will have to make a small change to your server in order to facilitate this functionality.

You can sign up for a free trial account with us to test this process while you develop your app.

There are a few pre-requisites to hosting BigBlueButton within an <iframe>.

Must be hosted under SSL

Your <iframe> must by on a site which is hosted under SSL otherwise WebRTC can not work and webcam, microphone, and screen sharing permission can not be given.

How to use the BigBlueButton API to create a URL for an <iframe>

You must first create a meeting with the create API call. After a meeting is created you can either wait 5 seconds before joining or poll the getMeetingInfo API endpoint for if the meeting has started, it shouldn't take more than 5 seconds. During this time you should show your user a loading page. After 5 seconds, you can generate a join link which you will use for the src tag of your <iframe>. Your <iframe> should look like below, notice the "allow" parameter it must be specified exactly like this. The iframe will then join the user into the meeting.

You can generate the join URL right after you issue a create call, but you must wait 5 seconds before showing the iframe to the user because otherwise, the meeting will not be ready and the user will get an error page.

Vue.js, Reactjs, Angular all have their own methods for adding iframes, please consult documentation for your library for how to add an iframe to your application.

Set <iframe> permissions properly

<iframe src="?..." width="100%" height="700" allow="camera *;microphone *;display-capture *;" allowfullscreen></iframe>

If you have any questions or issues open a support ticket or click the chat button on the bottom right.