SSL Is Required

Your <iframe> must be hosted on a website served over HTTPS (SSL/TLS). WebRTC features such as webcams, microphones, and screen sharing require a secure context. If your site is not hosted under SSL, users will not be able to grant the necessary permissions.

Enable allowRequestsWithoutSession

When creating a meeting, you must set the allowRequestsWithoutSession parameter to true.

This parameter allows users to join meetings without session cookie validation, which is required when users are joining through an API-generated join URL loaded inside an iframe.

The parameter was added in BigBlueButton 2.4.3 and defaults to false. If this parameter is omitted or left as false, users may be unable to join meetings through an embedded iframe.

Create a Join URL for an iframe

1. Create a meeting using the create API call and include allowRequestsWithoutSession=true.
2. Wait approximately 5 seconds for the meeting to initialize, or poll the getMeetingInfo API endpoint until the meeting becomes available.
3. Display a loading screen while the meeting is starting.
4. Generate a join URL using the join API call.
5. Use the generated join URL as the src attribute of your iframe.

Important

You can generate the join URL immediately after creating the meeting, but you should wait until the meeting is ready before displaying the iframe. Loading the iframe too early may result in an error page.

Vue.js, React, and Angular each have their own methods for rendering iframes. Refer to your framework's documentation for implementation details.

Set iframe Permissions Properly

The allow attribute must be configured exactly as shown below to enable camera, microphone, and screen-sharing functionality:

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

When configured correctly, the iframe will automatically join the user to the meeting.