feat: add BigBlueButton integration

[nicktrn]

trafficstars

What does this PR do?

As much a new integration as a POC for templated meeting links and redirects.

1. New BBB app with credential validation
2. On-demand meeting creation
3. Redirect via Cal.com link /booking/<uid>/join/<hash>
4. User-specific link generation (booking page and emails)

Todo:

• [x] get permission to use official logo
• [x] receive go-ahead for redirect pages
• [x] finalise description page
• [x] add remaining moderator types, e.g. team members

Fixes #1985 /claim #1985

Demo

bbb-install.webm

bbb-demo.webm

Type of change

• [x] New feature (non-breaking change which adds functionality)

How should this be tested?

Credentials for testing

endpoint: https://test-install.blindsidenetworks.com/bigbluebutton/api secret: 8cd8ef52e8e101574e400365b55e11a6 hash: sha1

1. Add the new integration
2. Set it as the location for an event
3. Make a booking
4. Try meeting links for both organizer and attendee
5. They should automatically join with different roles - organizer will be a moderator, able to control slides
6. Should work with multiple guests, each sent a different link

Mandatory Tasks

• [x] Make sure you have self-reviewed the code. A decent size PR without self-review might be rejected.

Checklist

• I haven't added tests that prove my fix is effective or that my feature works

[vercel[bot]]

@nicktrn is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 3, 2023 5:55am

[github-actions[bot]]

Thank you for following the naming conventions! 🙏 Feel free to join our discord and post your PR link to collect XP and win prizes!

[github-actions[bot]]

📦 Next.js Bundle Analysis for @calcom/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

New Pages Added

The following pages were added to the bundle from the code in this PR:

Page	Size (compressed)	First Load	% of Budget (350 KB)
/booking/[uid]/join	299 B	156.05 KB	44.59%
/booking/[uid]/join/[hash]	305 B	156.06 KB	44.59%

[nicktrn]

@ffdixon Hi Fred, and thanks for the invaluable details you provided in the related issue!

Would you mind letting me know if it's okay to use the official logo for this instead of the current placeholder?

I've read through your trademark page and added the brief disclaimer you cited - the rest of the description still needs to be finalised. Maybe you have an official promo text you would like me to include? I'm sure it would sound much better than what I'd type up!

Some examples of how the logo and description would be displayed:

Many thanks :pray:

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
3 out of 4 committers have signed the CLA.

:white_check_mark: aar2dee2
:white_check_mark: nicktrn
:white_check_mark: leog
:x: crowdin-bot
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[ffdixon]

The trademark guidelines, and the process to request usage of the BigBlueButton logo, are outlined here: https://bigbluebutton.org/trademark/.

It's a pretty simple process and I don't see any reason why you would be denied.

[nicktrn]

@Udit-takkar Thanks for having a look! :pray:

any update on the todos in description?

I've just received permission to use the official logo and updated the todos accordingly. Will address your comments and try to finish this up ASAP, but won't be before the weekend. Converting this back into draft for now and re-requesting review when it's ready.

The functionality shouldn't change, so feel free to test in the meantime!

edit: As you've already had a quick look, I presume the approach with the redirect pages is okay. If not, just let me know.

[socket-security[bot]]

New dependencies detected. Learn more about Socket for GitHub ↗︎

Packages	Version	New capabilities	Transitives	Size	Publisher
fast-xml-parser	4.3.2	None	+0	107 kB	amitgupta

[PeerRich]

@aar2dee2 will review this 🙏

[nicktrn]

Summoning @aar2dee2 beepbeep :robot:

I've seen you added some guidelines for new integrations a few days ago. Have updated the PR accrodingly.

The only missing point is using AppDeclarativeHandler. Had a look when I first created this integration and didn't see a straightforward way to set the credential key to the symmetrically encrypted secrets obtained from setup.

Some other integrations are using the pattern I decided to go with:

• /api GET redirects to /setup
• /api POST uses the setup data to encrypt and store the credendtial

If you see a better way of doing this, just let me know.

[aar2dee2]

thanks a ton for the updates, @nicktrn! Appreciate you looking at the guidelines.

I'll look into adding the AppDeclarativeHandler. Will leave you some comments very soon!

[aar2dee2]

Hey @nicktrn Would you able to share access to the hosted BigBlueButton server you used to build this integration for testing?

Also would love to have

• Demo video here
• links to the self-hosting docs in the app README.md

[nicktrn]

Hi @aar2dee2, thanks for having a look!

I've used a public test instance, credentials are (collapsed) in the "How should this be tested" section of the PR. As mentioned in there, the test instance only supports sha1, so be sure to select that when setting up!

Anything missing from the videos above? I've added one for the install and another one for making a booking + joining the meeting with all participants. (The only things that have changed are the logo and description.)

There is not much to see here, as everyone can join just by clicking the meeting link. Roles and names are automatically assigned and there is no sign-up or log-in required.

Will add links re self-hosting.

[aar2dee2]

Tested creating and joining a booking

@hariombalhara requesting your review

• we might want to change filenames inside the app lib directory
• I've modified AppDeclarativeHandler within this PR to handle apps with Oauth
• changes made by the contributor in core EventManager and booking pages

[nicktrn]

Hey @aar2dee2 thanks for working on this! Just had a quick look at the changes.

Sadly, it seems to have broken the install in a few places.

1. AppDeclarativeHandler is currently called for both GET and POST methods. GET previously only resulted in a redirect to setup. Now, by the time we POST from setup, the app is already installed, hence it fails.

2. The POST handler you removed was checking for credential validity by making a request to the BigBlueButton API and provided useful error messages:

3. It's now only possible to use this app via pre-seeded / admin-provided credentials as the key is hardcoded to getAppKeysFromSlug(slug). The custom key function would need to use the POSTed data if present (and valid!).

The idea is for users to provide the credentials of their own BBB server via the setup page, which is now bypassed.

It's a good idea to standardise app handler declarations, but I'm unsure this PR is the right place for it. There's already a lot of new stuff in here to make the integration work - templated meeting links, redirect pages, core changes, etc.

[hariombalhara]

@nicktrn Agreed. We would learn from it and can add AppDeclarativeHandler in a later PR.

[nicktrn]

Hey @hariombalhara Thanks for reviewing! @aar2dee2 Thanks for your efforts!

I have one concern at this moment that I would really not want to import apps in core. Let me know what you think and how that can be solved.

Agree, it's not ideal. Could have unintended consequences if someone decides to edit those apps. Sneak some changes into core etc. Re the BBB API calls, could abstract into separate handler/trpc. It being just for a redirect page (no user-facing outputs), I didn't think much of it.

The booking page imports however.. I will have to look into those more closely again, but I think there were a few separate problems relating to:

• Creating attendee-specific meeting URLs
• Updating meeting URLs in general (not propagating to booking refs?)
• Getting those attendee-specific links displayed on the booking confirmation page

https://github.com/calcom/cal.com/issues/10969 for more challenges with video integrations.

I would also prefer to do this more cleanly, straight in the app.

An alternative may be to stick those templating helpers into a core utils module for now and decouple from the app.

Bit hard-pressed for time currently, will ping you when I have anything more concrete.

Just FYI, the need for in-house meeting links / redirects arises as BBB is essentially stateless. Meetings are created on-the-fly and don't persist. Also, only one person can join per link that is generated from those API calls.

edit: Moving into draft until I have time to work on this. Will be ~10 days. edit2: Indefinitely on hold.

[github-actions[bot]]

Hey there, there is a merge conflict, can you take a look?

[keithwillcode]

Closing for now due to staleness. Please do reopen as needed!

[ffdixon]

This is Fred Dixon, Product Manager for BigBlueButton and Co-founder of BigBlueButton Inc.

Let us know if there is any assistance we can provide.

Regards,... Fred

[nicktrn]

Thanks @ffdixon! I think everything is fine from the BigBlueButton side. The holdup here was mainly re Cal.com internals and integration security.

@hariombalhara's review comments from https://github.com/calcom/cal.com/pull/10803#issuecomment-1742630665 and my reply with some ideas https://github.com/calcom/cal.com/pull/10803#issuecomment-1744725013 still hold.

Sadly, I don't currently have time to carry on, but this could easily be taken up by a keen contributor.

[abeatbeyondlab]

hello guys it would be really appreciated if this work continue. having big blue button in cal.com is amazing

[giteshsarvaiya]

Hello guys, I would like to work on this issue, should I start building asap or is there something which I should beforehand ?

[keithwillcode]

@giteshsarvaiya feel free to pick up where @nicktrn left off 🙏🏼