Skip to content

Instantly share code, notes, and snippets.

@lfzawacki
Last active June 18, 2020 20:56
Embed
What would you like to do?
Generic Component API

Generic Component API

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

Configuring

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.

Messages

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.

TODO

  • Localization
  • Refactor common code used in this component and external video
location /quiz {
proxy_pass http://127.0.0.1:8989/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_read_timeout 6h;
proxy_send_timeout 6h;
client_body_timeout 6h;
send_timeout 6h;
}
@anishmenon
Copy link

is that file ?

/usr/share/meteor/bundle/programs/server/assets/app/config/settings.yml

we need to put under public : ??

@lfzawacki
Copy link
Author

lfzawacki commented Jun 18, 2020

Yes you put these options in settings.yml under public.app .

I just noticed that there's one file missing in the repository. The file is 'imports/ui/components/generic-component/service.jsx'. It is just a file exporting some methods that just uses makeCall for the methods in 'imports/ui/api/genericComponent' ... sorry

@anishmenon
Copy link

Thanks for the Reply .

How can i modify my existing BBB server .

Or tell me how to install it from ur tree

@anishmenon
Copy link

s makeCall for the methods in 'imports/ui/api/genericComponent' ...

can u put that . I'm working something with three.js to iframe it

@lfzawacki
Copy link
Author

Sorry I can't, I'm not working with this right now. The changes that need to be done should be straight forward to someone with some BBB background.

@anishmenon
Copy link

can ya commit imports/ui/components/generic-component/service.jsx

@lfzawacki
Copy link
Author

Unfortunately I did this a few months back and don't have the file anymore. You might get an idea of how to rewrite this code based on how something like 'imports/ui/components/actions-bar/service.js' uses the makeCall method

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment