Uruchamianie BigBlueButton w ramce iframe — Reactjs, Vue.js, Angular.js

Hosting Big Blue Meeting Cloud, serwer dedykowany i Dedicated Private Cloud obsługują osadzanie BigBlueButton w ramce iframe.

Jak osadzić BigBlueButton 3.0 w ramce iframe

Jeśli korzystasz z naszej usługi hostingu w chmurze, możesz po prostu użyć swojego klucza API — nie jest wymagana żadna dodatkowa konfiguracja.

Jeśli korzystasz z innej opcji hostingu, skontaktuj się z naszym zespołem wsparcia. Będziemy musieli wprowadzić niewielką zmianę w konfiguracji Twojego serwera, aby umożliwić osadzanie ramek iframe.

Możesz również założyć bezpłatne konto próbne, aby przetestować integrację podczas tworzenia aplikacji.

Wymagany jest protokół SSL

Twoje <iframe> musi być hostowana na stronie internetowej obsługiwanej przez HTTPS (SSL/TLS). Funkcje WebRTC, takie jak kamery internetowe, mikrofony i udostępnianie ekranu, wymagają bezpiecznego kontekstu. Jeśli Twoja witryna nie jest hostowana w protokole SSL, użytkownicy nie będą mogli udzielić niezbędnych uprawnień.

Włącz opcję allowRequestsWithoutSession

Podczas tworzenia spotkania należy ustawić allowRequestsWithoutSession parametr true.

Ten parametr pozwala użytkownikom dołączać do spotkań bez sprawdzania poprawności plików cookie sesji, co jest wymagane, gdy użytkownicy dołączają za pośrednictwem wygenerowanego przez API adresu URL, załadowanego w ramce iframe.

Parametr dodano w BigBlueButton 2.4.3 i domyślnie ma wartość false. Jeśli ten parametr zostanie pominięty lub pozostawiony jako false, użytkownicy mogą nie być w stanie dołączyć do spotkań za pomocą osadzonej ramki iframe.

Utwórz adres URL dołączania do ramki iframe

Utwórz spotkanie za pomocą create Wywołanie API i dołączenie allowRequestsWithoutSession=true.
Poczekaj około 5 sekund na zainicjowanie spotkania lub odpytaj getMeetingInfo Punkt końcowy API do momentu, aż spotkanie stanie się dostępne.
Wyświetl ekran ładowania podczas rozpoczynania spotkania.
Wygeneruj adres URL dołączania za pomocą join Wywołanie API.
Użyj wygenerowanego adresu URL dołączania jako src atrybut Twojej ramki iframe.

Ważny

Możesz wygenerować adres URL dołączenia natychmiast po utworzeniu spotkania, ale przed wyświetleniem ramki iframe należy poczekać na jej zakończenie. Zbyt wczesne załadowanie ramki iframe może spowodować wyświetlenie strony błędu.

Vue.js, React i Angular mają własne metody renderowania ramek iframe. Szczegóły implementacji znajdziesz w dokumentacji swojego frameworka.

Ustaw poprawnie uprawnienia iframe

allow Aby włączyć funkcjonalność kamery, mikrofonu i udostępniania ekranu, atrybut musi zostać skonfigurowany dokładnie tak, jak pokazano poniżej:

<iframe
 src="https://manager.bigbluemeeting.com/bigbluebutton/api/join?..."
 width="100%"
 height="700"
 allow="camera *; microphone *; display-capture *;"
 allowfullscreen
></iframe>

Jeśli zostanie poprawnie skonfigurowana, ramka iframe automatycznie dołączy użytkownika do spotkania.