Using BigBlueButton within an iFrame Embedded

Are you looking for “How to do iFrame embedding of BigBlueButton within web application?”

BigBlueButton Infrastructure or API Credentials

To test this or implement this, you need BigBlueButton infrastructure API Credentials that support iFrame embedding, it’s not supported by default. However, most providers may enable this on request. If you own your BigBlueButton infrastructure then it is configurable.

With our Managed BigBlueButton Hosting plans, anyone can easily utilize the API key without any additional configurations if they selected iFrame embedding during your initial setup. Otherwise, they can request us anytime to enable this for their infrastructure or plan.
OR
If using a Self-hosted BigBlueButton infrastructure, we can make the necessary adjustments to the BigBlueButton infrastructure.

BigBlueButton TEST API Credentials for Development Needs

In case you don’t have any real usage or don’t want a BigBlueButton hosting plan or infrastructure immediately, you may consider using our shared TEST API for your development needs.

Please note that there are certain requirements to keep in mind when using BigBlueButton within an iframe. To ensure seamless integration, please make sure that all prerequisites are met before proceeding. If you have any questions or concerns, our team is always ready to assist you.

SSL or HTTPS is Mandatory for BigBlueButton

When using BigBlueButton within an iframe, the site must be hosted under SSL for WebRTC to function properly. Without SSL, webcam, microphone, and screen sharing permissions will not be granted so things won’t work as it should , it may show lots of errors .

To use the BigBlueButton API to create a URL for an iframe, we first need to create a meeting using the “create” API call. When using the BigBlueButton API to create a meeting, we can generate the join URL immediately after issuing the “create” call, but it is important to wait for 5 seconds before displaying the iframe to the user. This is because the meeting may not be fully ready and the user will be presented with an error page.

The iframe should look like this:

<iframe src="join_link" allow="camera;microphone;fullscreen"></iframe>

Please note that the “allow” parameter must be specified exactly as shown above. With this, the iframe will then join the user into the meeting.

For adding an iframe to your application, you can use the specific methods provided by Vue.js, React.js, or Angular. You can refer to the documentation of your chosen library for more information on how to add an iframe.

When adding the iframe to the application, it is important to set the permissions properly. The iframe should be added like this:

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

The “allow” parameter allows the iframe to access the camera, microphone, and display-capture, with the “allowfullscreen” parameter enabling the fullscreen mode. Please also make sure that the iframe is served over a secure connection (HTTPS) to ensure that the WebRTC function properly.

We allow iFrame embedding on all our plans, it is disabled by default & enabled on request.