An easy way to extend Bigbluebutton functionality by including an iframe of another service in the presentation area.
This code is currently implemented in this branch: https://github.com/lfzawacki/bigbluebutton/tree/generic-component
Code for the POC quiz application: https://github.com/lfzawacki/react-quiz-component
Each new generic component has to be configured in settings.yml
with a name, urlRegex and an icon. Here's some examples:
genericComponents:
gdocs:
name: "Google Docs"
urlRegex: '^https:\/\/docs.google.com\/([a-z]+)\/d\/(.*)(\/edit)'
icon: "presentation"
form:
name: "BBB Quiz"
urlRegex: '^https:\/\/paulo.dev.mconf.com\/quiz\/?\?quizID=([a-zA-Z0-9]+)$'
icon: "polling"
The name will be shown in buttons and modals, the urlRegex is used to only permit content hosted in whitelisted websites and the icon will be shown in menus.
Each new entry will be show in the '+' menu and will open a modal asking for an adress to include in the page.
The provided URL will be mounted inside an iframe in the presentation area, which will display it to all participants. The HTML5 client will add 2 http parameters to the service URL '&meetingID=[meeting-id]&userName=[user-name]' which can be used by the component as a way to identify users coming from the HTML5 client.
When the iframe is loaded the component will receive a message event called loaded
, the message payload is:
{ "id": "loaded" }
When the included service wants to return a final result to the HTML5 client it should propagate a message called resultsComponent
{ "id": "resultsComponent", "data": <JSON DATA> }
The results can be shown in some form in the HTML5 client and will be dumped to Redis to be processed later.
- Localization
- Refactor common code used in this component and external video
can u put that . I'm working something with three.js to iframe it