Jak dostosować interfejs i logo BigBlueButton do własnych potrzeb

Branding BigBlueButton może oznaczać trzy różne rzeczy: zmianę logo na domyślnej stronie internetowej serwera, wyświetlanie logo w trakcie spotkania lub przeprojektowanie samego klienta spotkań. Wybierz najmniejszą zmianę, która spełni Twój cel. Pierwsze dwie to udokumentowane zmiany konfiguracji lub zasobów; przeprojektowanie schematu kolorów, sformułowań lub układu klienta zazwyczaj wymaga stworzenia spersonalizowanego klienta HTML5.

Niniejszy przewodnik jest zgodny z dokumentacją administracyjną BigBlueButton 4.0, dostępną od 6 października 2026 r. Ścieżki i pakiety wdrożeniowe mogą się różnić w zależności od wersji lub dostawcy hostingu. Przed zmianą plików sprawdź wersję zainstalowaną na serwerze i najpierw wykonaj kopię zapasową.

Wybierz potrzebną Ci zmianę marki

BramkaUdokumentowane podejścieJak sprawdzić
Zastąp logo na domyślnej stronie internetowej BigBlueButtonZastąp logo.pngw domyślnym katalogu zasobówOtwórz publiczną stronę główną serwera w prywatnym oknie przeglądarki
Pokaż logo na spotkaniuWłącz obszar brandingu w konfiguracji klienta HTML5 i podaj logoadres URL obrazu podczas tworzenia spotkaniaDołącz do nowo utworzonego spotkania testowego i sprawdź obszar nad listą uczestników
Zmień kolory, tekst interfejsu lub inny projekt klientaZbuduj i wdróż dostosowanego klienta HTML5 ze źródła BigBlueButtonPrzetestuj cały przebieg spotkania w obsługiwanych przeglądarkach na komputerach stacjonarnych i urządzeniach mobilnych

Logo strony docelowej serwera i logo spotkania są oddzielne. Zastąpienie jednego nie powoduje automatycznego zastąpienia drugiego.

Przed edycją serwera

Potrzebujesz dostępu do powłoki z uprawnieniami, aby zmienić serwer BigBlueButton. Powinieneś również wiedzieć, czy host jest utrzymywany przez Ciebie, czy przez usługę zarządzaną. Jeśli serwer jest zarządzany przez dostawcę, zapytaj, czy obsługuje on niestandardowe brandingowanie i czy zachowa zmiany podczas konserwacji.

  • Sprawdź zainstalowaną wersję i porównaj ją z odpowiadającym jej przewodnikiem dostosowywania serwera BigBlueButton .
  • Zapisz kopię bieżącego logo i każdego pliku konfiguracyjnego, który chcesz edytować.
  • Przygotuj czysty plik logo, który będzie rozpoznawalny w rozmiarze wyświetlanym na Twojej stronie lub spotkaniu. Dokumentacja nie określa uniwersalnego rozmiaru w pikselach, dlatego sprawdź rzeczywisty obszar wyświetlania, zamiast polegać na domniemanym wymiarze.
  • Użyj adresu URL obrazu, do którego uczestnicy spotkania będą mogli uzyskać dostęp bez konieczności logowania. Preferuj protokół HTTPS i zweryfikuj adres URL poza serwerem przed jego użyciem.

Zmień domyślne logo strony internetowej

W przypadku BigBlueButton 4.0, przewodnik administracyjny identyfikuje domyślne logo pod adresem /var/www/bigbluebutton-default/assets/images/logo.png. Dotyczy to domyślnej witryny obsługiwanej przez serwer. Nie ustawia logo wyświetlanego w kliencie spotkań HTML5.

  1. Połącz się z serwerem i sprawdź, czy plik znajduje się w udokumentowanej ścieżce. Jeśli ścieżka jest inna, wstrzymaj się i sprawdź dokumentację zainstalowanej wersji, zamiast kopiować plik do podejrzanego katalogu.
  2. Utwórz kopię zapasową istniejącego zasobu. Na przykład, administrator może skopiować go do pliku kopii zapasowej z datą w tym samym katalogu przed jego wymianą. Podczas instalowania nowego zasobu należy pamiętać o pierwotnych uprawnieniach i prawach własności.
  3. Umieść nowe logo w udokumentowanej lokalizacji, używając nazwy pliku logo.png. Sprawdź, czy plik obrazu jest rzeczywiście w formacie PNG i czy ma wystarczający kontrast z tłem strony.
  4. Otwórz publiczną stronę docelową BigBlueButton w prywatnym oknie przeglądarki lub wyczyść pamięć podręczną przeglądarki. Sprawdź, czy nowy znacznik jest widoczny bez rozciągania, przycinania ani rozmycia.

Oficjalny przewodnik podaje lokalizację zasobu, ale nie gwarantuje, że lokalny zamiennik będzie zachowywany po każdej aktualizacji pakietu. Zachowaj pliki oryginalne i zastępcze w dokumentach wdrożeniowych i sprawdź ponownie stronę docelową po aktualizacjach. Jeśli logo zniknie po aktualizacji, porównaj zainstalowany plik z zapisanym zasobem i ponownie zastosuj zmianę dopiero po sprawdzeniu instrukcji dotyczących bieżącej wersji.

Pokaż logo na spotkaniach

Udokumentowana opcja brandingu dla każdego spotkania w BigBlueButton umieszcza logo w obszarze brandingu nad listą uczestników. Muszą być spełnione dwa warunki: displayBrandingAreaustawienie klienta HTML5 musi być włączone, a spotkanie musi zostać utworzone z logoadresem URL obrazu. Sam parametr logo nie spowoduje wyświetlenia ukrytego obszaru brandingu.

  1. W konfiguracji klienta HTML5 należy włączyć opcję displayBrandingArea. W obecnych udokumentowanych instalacjach /etc/bigbluebutton/bbb-html5.ymlzalecany jest lokalny plik nadpisywania; zawarte w nim wpisy konfiguracyjne zastępują odpowiednie spakowane ustawienia klienta. Zachowaj inne istniejące wartości YAML podczas edycji pliku.
  2. Uruchom ponownie BigBlueButton, aby zmiany konfiguracji zostały wprowadzone: sudo bbb-conf --restart. Zaplanuj to na odpowiedni czas konserwacji, ponieważ ponowne uruchomienie może przerwać aktywne spotkania.
  3. Gdy Twoja aplikacja lub klient API utworzy spotkanie, uwzględnij w formularzu parametr niestandardowy logo=https://your-domain.example/brand.png. Dokładne miejsce wprowadzenia parametru niestandardowego zależy od integracji wysyłającej /createżądanie BigBlueButton. Postępuj zgodnie z instrukcjami dotyczącymi tej integracji i nie ujawniaj współdzielonego klucza tajnego serwera w kodzie po stronie klienta.
  4. Utwórz nowe spotkanie testowe i dołącz do niego. Sprawdź, czy logo wyświetla się nad listą uczestników i czy obraz wczytuje się dla uczestnika, który nie jest zalogowany do hosta obrazu.

Zapoznaj się z oficjalnymi informacjami o plikach konfiguracyjnych, aby poznać zalecane lokalizacje nadpisywania oraz informacjami o API dotyczącymi spełniania parametrów tworzenia. Skorzystaj z dokumentacji odpowiadającej wersji serwera, jeśli jest ona inna niż 4.0.

Kiedy potrzebujesz pełnego rebrandingu interfejsu

Logo w obszarze brandingu spotkania to nie to samo, co aplikacja konferencyjna typu white-label. Jeśli chcesz zmienić kolory interfejsu, etykiety lub inne wbudowane elementy klienta, sekcja FAQ BigBlueButton instruuje administratorów, jak skonfigurować środowisko programistyczne i stworzyć własną wersję klienta HTML5. Punktem wyjścia są FAQ dotyczące brandingu i przewodnik programistyczny projektu.

Ta ścieżka wymaga prac rozwojowych i wdrożeniowych. Nie jest to szybkie ustawienie serwera, a zmiany mogą wymagać konserwacji w miarę rozwoju BigBlueButton. Przed zainwestowaniem w niestandardową wersję, dokładnie zapisz, które ekrany lub elementy wymagają zmian i sprawdź, czy wbudowane opcje landing page'a lub logo spotkania są wystarczające. Jeśli zdecydujesz się na kontynuację, zachowaj dostosowanie w systemie kontroli wersji, udokumentuj sposób jego przebudowy i przetestuj aktualizacje w środowisku testowym przed aktualizacją produkcyjną.

Sprawdź wynik i rozwiąż problem na podstawie objawów

  • Logo strony docelowej nie uległo zmianie: sprawdź, czy plik został zastąpiony w bigbluebutton-defaultkatalogu zasobów aktywnego serwera, a następnie pomiń buforowanie przeglądarki. Jeśli strona publiczna jest obsługiwana przez serwer proxy lub oddzielny portal, sprawdź, który system jest jej właścicielem.
  • Logo spotkania nie jest wyświetlane: sprawdź, czy ustawienie obszaru marki jest włączone, serwer został uruchomiony ponownie, nowe spotkanie zostało utworzone przy użyciu logoparametru i adres URL obrazu działa w przypadku przeglądarki bez uwierzytelniania.
  • Logo pojawia się, ale wygląda nieprawidłowo: sprawdź proporcje, obszary przezroczyste i kontrast obrazu źródłowego. Dostosuj grafikę źródłową zamiast rozciągać ją w interfejsie.
  • Niektórzy uczestnicy widzą pusty obszar: sprawdź adres URL obrazu z innej sieci i urządzenia. Zapora sieciowa, ograniczenie dostępu, nieprawidłowy certyfikat TLS lub wygasający adres URL mogą uniemożliwić załadowanie go w przeglądarkach uczestników.
  • Kolory i napisy pozostają niezmienione: wymiana logo serwera nie powoduje zmiany wyglądu klienta konferencyjnego. Jeśli te elementy interfejsu wymagają zmiany, skorzystaj z opcji tworzenia klienta niestandardowego.

Oceniaj sukces na podstawie lokalizacji i spójności rezultatu: strona docelowa wyświetla znak zastępczy; nowo utworzone spotkanie testowe wyświetla logo spotkania w udokumentowanym obszarze brandingu; a jeśli stworzyłeś niestandardowego klienta, żądane zmiany interfejsu pozostają widoczne przez cały proces dołączania i spotkania. Małe spotkanie testowe jest bezpieczniejszym punktem walidacji niż sprawdzanie tylko jednej zapisanej w pamięci podręcznej karty przeglądarki.

Opcje brandingu BigBlueButton są celowo ograniczone na poziomie konfiguracji. Wbudowane ścieżki logo zaspokajają typowe potrzeby identyfikacji wizualnej, natomiast pełna przebudowa interfejsu wymaga posiadania własnego klienta i jego bieżącej obsługi.

Zostaw komentarz

10 najlepszych narzędzi do pingowania w celu znajdowania urządzeń w sieci

10 najlepszych narzędzi do pingowania w celu znajdowania urządzeń w sieci

Porównaj 10 narzędzi do pingowania, które umożliwiają szybkie wykrywanie sieci LAN, skanowanie międzyplatformowe i zarządzanie adresami IP. Dowiedz się, co narzędzie pingujące może Ci powiedzieć, a czego nie.

6 najlepszych narzędzi do zarządzania siecią, umożliwiających śledzenie wydajności

6 najlepszych narzędzi do zarządzania siecią, umożliwiających śledzenie wydajności

Porównaj sześć narzędzi do zarządzania siecią służących do monitorowania wydajności, obejmujących zasięg SNMP, mapowanie, alerty, modele wdrażania i kompromisy kosztów.

Ping Monitor: 7 darmowych i otwartych narzędzi do monitorowania dostępności sieci

Ping Monitor: 7 darmowych i otwartych narzędzi do monitorowania dostępności sieci

Porównaj siedem darmowych i otwartych monitorów pingów — od kompletnych pakietów sieciowych po ukierunkowane sondy opóźnień — i wybierz odpowiedni monitor pod kątem dostępności, utraty pakietów i historii.

QoS w sieciach: czym jest jakość usług i jak działa

QoS w sieciach: czym jest jakość usług i jak działa

Dowiedz się, co oznacza QoS w sieciach, w jaki sposób oznaczenia DSCP i kolejki ruchu nadają priorytet aplikacjom głosowym, wideo i biznesowym oraz czego QoS nie jest w stanie naprawić.

Najlepsze oprogramowanie serwera SFTP do bezpiecznego przesyłania plików

Najlepsze oprogramowanie serwera SFTP do bezpiecznego przesyłania plików

Porównaj niezawodne oprogramowanie serwera SFTP dla systemów Windows i Linux, w tym OpenSSH, Bitvise, SolarWinds i SFTPGo. Znajdź rozwiązanie odpowiednie dla swoich potrzeb w zakresie bezpieczeństwa i transferu plików.

7 najlepszych narzędzi do zarządzania adresami IP dla zespołów sieciowych

7 najlepszych narzędzi do zarządzania adresami IP dla zespołów sieciowych

Porównaj siedem narzędzi do zarządzania adresami IP służących do wykrywania podsieci, koordynacji DNS i DHCP, inwentaryzacji sieci i otwartego oprogramowania IPAM.

6 najlepszych narzędzi do monitorowania serwerów Windows Server zapewniających lepszą dostępność i wydajność

6 najlepszych narzędzi do monitorowania serwerów Windows Server zapewniających lepszą dostępność i wydajność

Porównaj sześć narzędzi do monitorowania systemu Windows Server pod kątem zbierania danych systemu Windows, widoczności aplikacji, modelu wdrażania i licencjonowania, aby znaleźć odpowiednie rozwiązanie.

10 najlepszych narzędzi do skanowania sieci w celu wykrywania urządzeń i adresów IP

10 najlepszych narzędzi do skanowania sieci w celu wykrywania urządzeń i adresów IP

Porównaj narzędzia do skanowania sieciowego umożliwiające szybkie wykrywanie urządzeń, skanowanie adresów IP na wielu platformach oraz zarządzanie IPAM w przedsiębiorstwie. Znajdziesz tu wskazówki dotyczące dopasowania każdej opcji do swojej sieci.

Najlepsze praktyki monitorowania sieci: co śledzić i jakich narzędzi używać

Najlepsze praktyki monitorowania sieci: co śledzić i jakich narzędzi używać

Zbuduj praktyczny monitoring sieci z przejrzystym zakresem urządzeń, przydatnymi wskaźnikami wydajności, przydatnymi alertami oraz porównaniem SolarWinds NPM, PRTG i OpManager.

Jak używać Nmap do śledzenia trasy i odczytywania ścieżki sieciowej

Jak używać Nmap do śledzenia trasy i odczytywania ścieżki sieciowej

Użyj opcji --traceroute programu Nmap, aby mapować przeskoki do autoryzowanego hosta, zrozumieć dane wyjściowe dotyczące przeskoków i czasu RTT oraz rozwiązywać problemy z brakującymi odpowiedziami bez nadmiernego skanowania.