Integrate BigBlueButton into the element.io matrix app

[toger5]

Context

This issue summarizes the work from the BigBlueButton summit 2023 to integrate BigBlueButton into Element web.

It explains how to host it today and what needs to be done to complete this jurney.

Screenshots:

Demo videos:

Getting it hosted (to try it out)

There are three additional parts to BBB to getting a working setup: A correct element web version, a hosted BigBlueButton version, an authentication service (to auth the element widget with the bigbluebutton server) and the widget itself.

• BigBlueButton itself (version 3.0. The bare minimum should also work with 2.7 but all matirx interop will be missing)
• The BigBlueButton Widget wrapper
  • The site needs to be hosted publically (see readme.md)
  • The widget needs to be configured to point to the BBB instance (see readme.md)
• The jwt bbb auth service
  • Details on how to run this service can be found in the readme.md.
  • A approprite url could be: https://my-bbb-domain/service
• Element Web
  • It needs to use the react sdk branch of the PR here: toger5/bigbluebutton.
    To also configure element web it is easiest to build it yourself. Therefore just update the dependency of the matrix-react sdk from:
    "github:matrix-org/matrix-react-sdk#develop" to :
    "https://github.com/matrix-org/matrix-react-sdk#toger5/bigbluebutton"
    In the PR description additional configuration information is listed.

Summary

At the end one wants

• https://my-bbb-domain.com shows BigBlueButton.
• https://element.my-bbb-domain.com shows element web
• https://my-bbb-domain.com/service has the auth service hosted
• https://my-bbb-domain.com/widget returns the widget (and should fail if not used inside element web with the correct widget url params.

With the configurations

• https://element.my-bbb-domain.com
  • uses the https://github.com/matrix-org/matrix-react-sdk#toger5/bigbluebutton react sdk branch
  • has big_blue_button.widget_url configured.
  • has feature_big_blue_button_calls configured.
• https://my-bbb-domain.com/service
  • Started with the bbb secret and the domain: https://my-bbb-domain.com
• https://my-bbb-domain.com/widget
  • configured with the jwt bbb service url: https://my-bbb-domain.com/service
  • and optionally a livekit service url: https://my-bbb-domain.com/optinal-livekit-jwt-service

Open Todos:

• Make BBB work on chrome (It does not right now work in Iframes)
• Get the PR for element web Merged
  • writing tests
  • Put BigBlueButton calls behind a feature flag
  • Auto approve the widget capabilities for the configured widget.
• Make the bbb service part of the default bbb docker container (Behind a feature flag. the service can create new meetings for valid matrix openId tokens. This should only be enabled if it is required).
• Make the widget spa part of the default bbb docker container. (this does not need a feature flag since its just a static page and does not pose any security issues)
• If livekit is enabled also host a livekit-service with the default bbb docker container which uses the BBB livekit SFU that is already part of the BBB container.