Executando o BigBlueButton em um iframe - Reactjs, Vue.js, Angular.js

O Big Blue Meeting Cloud Hosting, Servidor Dedicado e Nuvem Privada Dedicada suporta a incorporação de BigBlueButton em um iframe.

Como incorporar o BigBlueButton 3.0 em um iframe

Se você estiver usando nosso serviço de Hospedagem em Nuvem, basta usar sua chave de API — nenhuma configuração adicional é necessária.

Se você estiver usando outra opção de hospedagem, entre em contato com nossa equipe de suporte. Precisaremos fazer uma pequena alteração de configuração em seu servidor para habilitar a incorporação de iframes.

Você também pode se inscrever para uma conta de teste gratuita para testar a integração enquanto desenvolve seu aplicativo.

É necessário certificado SSL.

Sua <iframe> O site deve estar hospedado em um servidor HTTPS (SSL/TLS). Recursos do WebRTC, como webcams, microfones e compartilhamento de tela, exigem um contexto seguro. Se o seu site não estiver hospedado em um servidor SSL, os usuários não poderão conceder as permissões necessárias.

Ative allowRequestsWithoutSession

Ao criar uma reunião, você deve definir o allowRequestsWithoutSession parâmetro para true.

Este parâmetro permite que os usuários participem de reuniões sem a validação do cookie de sessão, que é necessária quando os usuários participam por meio de um URL de participação gerado por API e carregado dentro de um iframe.

O parâmetro foi adicionado no BigBlueButton 2.4.3 e o valor padrão é falseSe este parâmetro for omitido ou deixado como está falseOs usuários podem não conseguir participar de reuniões por meio de um iframe incorporado.

Criar um URL de entrada para um iframe

Crie uma reunião usando o create Chamada de API e inclusão allowRequestsWithoutSession=true.
Aguarde aproximadamente 5 segundos para que a reunião seja inicializada ou faça uma pesquisa na lista de participantes. getMeetingInfo Endpoint da API até que a reunião esteja disponível.
Exibir uma tela de carregamento enquanto a reunião está sendo iniciada.
Gere um URL de entrada usando o join Chamada API.
Use o URL de entrada gerado como o src atributo do seu iframe.

importante

Você pode gerar o URL de acesso imediatamente após criar a reunião, mas deve aguardar até que a reunião esteja pronta antes de exibir o iframe. Carregar o iframe muito cedo pode resultar em uma página de erro.

Vue.js, React e Angular possuem métodos próprios para renderizar iframes. Consulte a documentação do seu framework para obter detalhes sobre a implementação.

Configure as permissões do iframe corretamente.

O allow O atributo deve ser configurado exatamente como mostrado abaixo para habilitar as funcionalidades de câmera, microfone e compartilhamento de tela:

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

Quando configurado corretamente, o iframe conectará automaticamente o usuário à reunião.