You are currently viewing Using BigBlueButton within an iFrame Embedded

If you opt for our Managed BigBlueButton Hosting service, you can easily utilize the API key without any additional configurations. However, if you are using Self-hosted BigBlueButton, please reach out to us for assistance in making the necessary adjustments to your server. To make things better we are also coming with our Cloud based On-Demand BigBlueButton API Hosting Service with a Hourly Pricing along with Free APIs for Testing & Development of your Platform or Solution . Stay Tuned for our Update on our Website also you can get in touch , Currently we are offering Beta Access for Almost Free.

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.

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 , you may lots of errors .

To use the BigBlueButton API to create a URL for an iframe, you will first need to create a meeting using the “create” API call. When using the BigBlueButton API to create a meeting, you 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.

Your 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 your 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.

Leave a Reply