Using BigBlueButton within an iFrame Embedded

Are you looking for "How to do iFrame embedding of BigBlueButton within a web application?"

BigBlueButton Infrastructure or API Credentials

To test 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, it is configurable.

With our Managed BigBlueButton Hosting plans, anyone can easily utilise the API key without any additional configurations if they selected iFrame embedding during initial setup. Otherwise, they can request us anytime to enable this for their infrastructure or plan.

If using a self-hosted BigBlueButton infrastructure, we can make the necessary adjustments to the BigBlueButton infrastructure as well.

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. Ensure all prerequisites are met before proceeding. If you have any questions or concerns, our team is always ready to assist you.

SSL / 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 — things won't work as expected and may show many errors.

Creating the Meeting and Generating the Join URL

To use the BigBlueButton API to create a URL for an iframe, first create a meeting using the create API call. You can generate the join URL immediately after issuing the create call, but it is important to wait 5 seconds before displaying the iframe to the user — 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="https://your-bbb-server.com/bigbluebutton/api/join?..."
  allow="camera; microphone; display-capture; fullscreen"
  allowfullscreen
  width="100%"
  height="600px"
></iframe>

The allow parameter must be specified exactly as shown above. With this, the iframe will join the user into the meeting.

Integrating with Vue.js, React.js, or Angular

For adding an iframe to your application, use the specific methods provided by Vue.js, React.js, or Angular. 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:

<iframe
  src="JOIN_URL"
  allow="camera; microphone; display-capture"
  allowfullscreen
></iframe>

The allow parameter allows the iframe to access the camera, microphone, and display-capture, with allowfullscreen enabling fullscreen mode. Make sure the iframe is served over a secure connection (HTTPS) to ensure WebRTC functions properly.

We allow iFrame embedding on all our plans — it is disabled by default and enabled on request. Explore all our Plans to get started.