BigBlueButton jest zbudowany na solidnym fundamencie podstawowych komponentów, w tym NGINX, FreeSWITCH, mediasoup, Redis, Node.js, React.js i innych.
Ta strona opisuje ogólną architekturę BigBlueButton i sposób współpracy tych komponentów.
Architektura wysokiego poziomu
Poniższy diagram przedstawia ogólny widok współpracy komponentów BigBlueButton.
flowchart TB
%% Blue = new/default in 4.0 · grey-dashed = alternative/opt-in path
%% ── Edge / reverse proxies ──────────────────────────
client[client]
haproxy[HAProxy]
nginx[NginX]
thirdparty[3rd party]
client <--> haproxy
nginx --> haproxy
thirdparty --> nginx
%% ── HTML5 client, GraphQL stack & datastore ─────────
html5["bbb-html5<br/>(static client)"]
gqlmw[graphql-middleware]
hasura["graphql-server<br/>(Hasura)"]
gqlactions[graphql-actions]
postgres[(PostgreSQL)]
html5 --> haproxy
haproxy <--> gqlmw
gqlmw <--> hasura
gqlmw --> gqlactions
gqlmw <--> redis
gqlactions --> redis
hasura --> nginx
postgres --> hasura
%% ── Core apps ───────────────────────────────────────
akkaapps[akka-apps]
webapi[Web API]
redis[RedisPubSub]
akkaapps --> postgres
akkaapps <--> redis
akkaapps --> redisdb
webapi <--> nginx
webapi <--> redis
%% ── Media: LiveKit (default) ─────────────────────────
livekit["LiveKit server<br/>(default A/V/screenshare)"]:::neo
livekitsip["LiveKit SIP<br/>(dial-in)"]:::neo
sfu["bbb-webrtc-sfu<br/>(media controller)"]
recorder[webrtc-recorder]
nginx <--> livekit
livekitsip --> livekit
sfu <--> livekit
sfu <--> nginx
sfu <--> redis
recorder <--> livekit
sfu <--> recorder
%% ── Media: mediasoup + FreeSWITCH (alternative) ──────
mediasoup["mediasoup<br/>(alternative)"]:::alt
freeswitch["FreeSWITCH<br/>(alternative / dial-in)"]:::alt
akkafsesl[akka-fsesl]:::alt
sfu -.-> mediasoup
mediasoup -.-> freeswitch
akkaapps -.-> akkafsesl
akkafsesl -.-> freeswitch
%% ── Shared notes: BlockNote ──────────────────────────
sharednotes["bbb-shared-notes-server<br/>(Hocuspocus / Yjs)"]:::neo
blocknotedb[("blocknote_app<br/>(Yjs docs)")]:::neo
nginx <--> sharednotes
sharednotes <--> blocknotedb
sharednotes <--> redis
%% ── Presentation conversion & static files ──────────
prescon[Presentation Conversion]
presfiles[(presentation files)]
webapi --> prescon
prescon --> presfiles
prescon --> redis
presfiles --> nginx
%% ── Recording & other Redis consumers ────────────────
exportann[export-annotations]
webhooks[webhooks]
transcription[transcription-controller]
redisdb[(RedisDB)]
recproc[recording processor]
redis <--> exportann
exportann --> presfiles
redis <--> webhooks
redis <--> transcription
redisdb --> recproc
%% ── Styling ─────────────────────────────────────────
classDef store fill:#e8ecf3,stroke:#5b6b8c,color:#1c2733;
classDef alt fill:#f2f2f2,stroke:#b0b0b0,color:#7a7a7a,stroke-dasharray:4 4;
classDef neo fill:#e6f0ff,stroke:#2b6cb0,color:#12345a;
class postgres,presfiles,redisdb store;
Poniżej omówimy bardziej szczegółowo każdy komponent.
Klient HTML5
Klient HTML5 to jednostronicowa, responsywna aplikacja internetowa zbudowana na następujących komponentach:
- React.js do wydajnego renderowania interfejsu użytkownika
- WebRTC do wysyłania/odbioru audio i wideo
- tl;draw do tablicy
- Apollo klient graphql
- TypeScript większość klienta jest napisana w TypeScript
Klient HTML5 łączy się bezpośrednio z serwerem BigBlueButton przez port 443 (SSL), od załadowania klienta BigBlueButton do nawiązania połączenia z gniazdem internetowym. Wszystkie te połączenia są obsługiwane przez nginx.
W BigBlueButton 3.0 przeprowadziliśmy poważną restrukturyzację architektury, usuwając naszą zależność od Meteor.js i MongoDB.
bbb-graphql-server
bbb-graphql-server wykorzystuje platformę Hasura i nasłuchuje na porcie 8085. Obsługuje zapytania GraphQL i subskrypcje od klientów, sprawdza uprawnienia użytkowników i weryfikuje, czy użytkownik ma dostęp do żądanej treści przed zwróceniem informacji. Jeśli jest to subskrypcja, będzie ona nadal aktualizowana, gdy tylko pojawią się nowe dane.
bbb-graphql-middleware
bbb-graphql-middleware znajduje się pomiędzy przeglądarką a usługą bbb-graphql-server i przekazuje wiadomości tam i z powrotem. Jest to aplikacja Go, która nasłuchuje połączeń WebSocket na porcie 8378. Oprócz przekazywania wiadomości, ponownie łączy się z usługą the bbb-graphql-server za każdym razem, gdy klient potrzebuje odświeżenia uprawnień i tworzy łatki JSON, aby zminimalizować transfer danych, wysyłając tylko różnice.
bbb-graphql-actions
Aplikacja bbb-graphql-actions jest napisana w Node.js. Ilekroć bbb-graphql-middleware odbierze mutację GraphQL, przekazuje ją do bbb-graphql-actions poprzez żądanie HTTP na porcie 8093. Usługa akcji sprawdza otrzymane parametry i wysyła wiadomość za pośrednictwem Redis do aplikacji Akka.
PostgreSQL
PostgreSQL przechowuje wszystkie informacje GraphQL w bazie danych bbb_graphql. bbb-graphql-server pobiera dane z tej bazy danych, natomiast Akka-apps wstawia do niej informacje.
HAproxy
TURN serwer (powrót)
BBB web
Aplikacja internetowa BigBlueButton jest aplikacją opartą na Javie napisaną w języku Scala. Implementuje BigBlueButton API i przechowuje kopię stanu spotkania.
BigBlueButton API zapewnia integrację strony trzeciej (takiej jak wtyczka BigBlueButtonBN dla Moodle) z punktem końcowym w celu kontrolowania serwera BigBlueButton.
Każdy dostęp do BigBlueButton odbywa się poprzez portal front-end (nazywamy to aplikacją strony trzeciej). BigBlueButton integruje Moodle, Wordpress, Canvas, Sakai, MatterMost i inne (patrz integracje innych firm). BigBlueButton ma własny interfejs o nazwie Greenlight. Korzystając z systemu zarządzania nauczaniem (LMS), takiego jak Moodle, nauczyciele mogą konfigurować pokoje BigBlueButton w ramach swoich zajęć, a uczniowie mają dostęp do tych pokoi i ich nagrań.
Niezależnie od tego, jakiego front-endu używasz, wszystkie korzystają z API pod maską.
Redis PubSub
Redis PubSub zapewnia kanał komunikacji pomiędzy różnymi aplikacjami działającymi na serwerze BigBlueButton.
Redis DB
Kiedy spotkanie jest nagrywane, wszystkie zdarzenia są zapisywane w Redis DB. Po zakończeniu spotkania procesor nagrywania pobierze do przetworzenia wszystkie nagrane zdarzenia, a także różne pliki surowe (PDF, WAV, FLV).
Apps akka
BigBlueButton Apps to główna aplikacja, która łączy różne aplikacje w celu zapewnienia współpracy podczas spotkania w czasie rzeczywistym. Zapewnia listę użytkowników, czat, tablicę, prezentacje na spotkaniu.
Poniżej znajduje się schemat różnych komponentów Apps Akka.
Logika biznesowa spotkania znajduje się w obiekcie MeetingActor. Tutaj przechowywane są informacje o spotkaniu i przetwarzane są wszystkie wiadomości dotyczące spotkania.
FSESL akka
Wyodrębniliśmy komponent integrujący się z FreeSWITCH do własnej aplikacji. Dzięki temu inni użytkownicy korzystający z systemów konferencji głosowych innych niż FreeSWITCH mogą łatwo stworzyć własną integrację. Komunikacja między Akka Apps a warstwą FreeSWITCH Event Socket Layer (fsels) wykorzystuje komunikaty za pośrednictwem redis pubsub.
FreeSWITCH
Uważamy, że FreeSWITCH to niesamowite oprogramowanie do obsługi dźwięku.
W BigBlueButton 4.0 LiveKit (patrz poniżej) jest domyślnym backendem głosowym; FreeSWITCH pozostaje dostępny jako alternatywny most audio dla klienta HTML5 i obsługuje również dial-in/telefonię wraz z LiveKit. FreeSWITCH można także zintegrować z dostawcami VoIP, dzięki czemu użytkownicy, którzy nie mogą dołączyć za pomocą zestawu słuchawkowego, będą mogli dzwonić za pomocą telefonu.
LiveKit
LiveKit to domyślny serwer multimediów obsługujący dźwięk, obraz z kamery i udostępnianie ekranu za pośrednictwem pojedynczego SFU WebRTC. Zastępuje mieszaną topologię FreeSWITCH (audio) i mediasoup (wideo) ujednoliconym stosem. Moduł kontrolera LiveKit w bbb-webrtc-sfu wykonuje generowanie tokenów, obsługę uprawnień, przetwarzanie elementu webhook i orkiestrację (przechwytywanie) bbb-webrtc-recorder.
Mediasoup i WebRTC-SFU
Mediasoup to serwer multimediów, który implementuje model SFU. Pozostaje dostępny jako alternatywny most multimedialny do przesyłania strumieniowego kamer internetowych, dźwięku tylko do słuchania i udostępniania ekranu. WebRTC-SFU pełni rolę kontrolera mediów obsługującego negocjacje i zarządzającego strumieniami multimediów.
Dołączanie do konferencji głosowej
Użytkownik może dołączyć do konferencji głosowej (domyślnie obsługiwanej przez LiveKit lub przez FreeSWITCH w przypadku konfiguracji i w celu wdzwaniania) z klienta BigBlueButton HTML5 lub poprzez telefon. Dołączając przez klienta, użytkownik może wybrać opcję dołączenia do mikrofonu lub tylko do słuchania, a klient BigBlueButton nawiąże połączenie audio z serwerem za pośrednictwem WebRTC. WebRTC zapewnia użytkownikowi dźwięk wysokiej jakości z mniejszym opóźnieniem.
Przesyłanie prezentacji
Przesłane prezentacje przechodzą proces konwersji w celu wyświetlenia ich w kliencie. Jeśli przesłana prezentacja jest dokumentem pakietu Office, należy ją przekonwertować na format PDF za pomocą pakietu LibreOffice. Dokument PDF jest następnie konwertowany na skalowalną grafikę wektorową (SVG) za pomocą bbb-web.
Proces konwersji wysyła komunikaty o postępie do klienta poprzez pubsub Redis.
Przebieg konwersji prezentacji
Poniższy diagram opisuje przebieg konwersji prezentacji. Bierzemy pod uwagę konfigurację włączania i wyłączania konwersji SWF, SVG i PNG.
Następnie poniżej przepływu konwersji SVG. Obejmuje rezerwę konwersji. Czasami wykrywamy, że wygenerowany plik SVG jest trudny do załadowania przez przeglądarkę, korzystamy z rozwiązania awaryjnego, aby umieścić rasteryzowany obraz w pliku SVG i sprawić, aby przeglądarka ładowała się lekko.
Wewnętrzne połączenia sieciowe
Poniższy diagram pokazuje, w jaki sposób różne komponenty BigBlueButton łączą się ze sobą poprzez gniazda.
