Incorporar uma sala do Speak via iframe

Você pode incorporar uma sala do Speak via iframe a qualquer página web: um site, uma plataforma de ensino, a área do cliente ou um aplicativo web. Os participantes entram na reunião ali mesmo, sem sair para outro site.

Para isso não é preciso usar a API nem mudar configurações no Kinescope — basta o link da sala e um trecho de código HTML.

Para quem é este artigo

• Escolas online e plataformas de ensino — precisam dar a aula direto na página do curso
• Organizadores de eventos — precisam que a reunião aconteça na página do evento, e não por um link externo
• Desenvolvedores — precisam adicionar reuniões por vídeo à área do cliente ou a um aplicativo web

Como incorporar uma sala

1. Copie o link da sala. Abra a sala e copie o endereço da barra de endereços. Durante a reunião, o link também está na própria sala: passe o cursor sobre o nome da sala no canto superior esquerdo e clique no ícone de copiar na linha Link da reunião. O link é assim: https://speak.kinescope.io/jqi-qhua-glk. Pela API, o link e o código da sala vêm nos campos link e code da resposta de GET /v1/speak/rooms — veja a referência da API.
2. Cole o código na página e coloque o link da sua sala em src:

<iframe
  src="https://speak.kinescope.io/jqi-qhua-glk"
  allow="camera; microphone; display-capture; fullscreen; autoplay; clipboard-write"
  style="width: 100%; height: 100vh; min-height: 640px; border: 0;"
></iframe>

3. Abra a página e teste a reunião: ative a câmera e o microfone na tela de entrada, entre na sala e tente compartilhar a tela. Quando o participante sai da reunião, o iframe continua mostrando a tela “Você saiu da reunião” com o botão Entrar novamente.

O que o atributo allow permite

Por padrão, o navegador não deixa uma página incorporada usar a câmera e outros dispositivos. O atributo allow lista o que a sala do Speak pode usar.

O Firefox ignora autoplay e clipboard-write e registra um aviso sobre isso no console. É normal: a câmera, o microfone e o compartilhamento de tela funcionam.

Requisitos da página

• Apenas HTTPS. A câmera e o microfone só funcionam em páginas seguras. Se a página for aberta por HTTP, aparece um erro no lugar da sala. Para testar localmente, http://localhost serve.
• Tamanho do iframe. A tela de entrada cabe inteira em um iframe a partir de 1024×640 pixels. Em um iframe mais estreito ela passa para uma coluna, e a prévia da câmera pode não caber na altura. O mais prático é dar ao iframe toda a largura da página e a altura da janela; no celular, a tela inteira.
• Os cabeçalhos de segurança não bloqueiam o iframe. Se o seu site define Content-Security-Policy, Permissions-Policy ou isolamento da página (Cross-Origin-Embedder-Policy), confira-os pela resposta a Por que o iframe não carrega?
• Sem sandbox. É melhor não definir o atributo sandbox no iframe. Se não der para ficar sem ele, adicione allow-scripts allow-same-origin allow-forms allow-popups: sem allow-same-origin, aparece uma tela vazia no lugar da sala.

Entrada do organizador

Dentro do iframe, o Speak não reconhece o dono da sala: mesmo que você esteja conectado ao Kinescope, a tela de entrada mostra Você é um participante, e não Organizada por você. O navegador não repassa os dados de login para um iframe incorporado em outro site, então no iframe todos entram como participantes.

Como conduzir a reunião:

• O organizador entra pelo link direto, e os participantes entram pelo seu site. Abra https://speak.kinescope.io/<código da sala> em uma aba separada: lá você tem os direitos de organizador — gravação, controle de acesso e sala de espera.
• O apresentador entra pelo seu site com um link com token. O seu servidor assina um token JWT com a função admin, e você coloca em src um link como https://speak.kinescope.io/jqi-qhua-glk?token=<token>. A função vem junto com o link, e não dos dados de login. Como assinar o token está em Link de entrada no Speak com a função de administrador.

Se a sala de espera estiver ativada, os participantes no iframe aguardam com a mensagem “O anfitrião vê sua solicitação — aguarde”. Só um organizador que já está na sala pode admiti-los: lista de participantes → Aguardando entrada → Admitir.

No celular e no tablet

Em dispositivos móveis, o iframe mostra primeiro a tela Tenha a melhor experiência com o nosso app, com links para as lojas de aplicativos e o botão Continuar no navegador.

• Para entrar pelo seu site, toque em Continuar no navegador — abre a tela de entrada, e a câmera e o microfone funcionam dentro do iframe. A escolha fica salva por uma semana.
• Para instalar o aplicativo, abra o link da sala diretamente no navegador. Dentro do iframe, os links da App Store e do Google Play podem não abrir: as lojas não permitem exibir suas páginas em iframes.

O que funciona de outro jeito no iframe

• O pedido de acesso à câmera vem em nome do seu site. No Chrome, o pedido mostra o domínio da sua página, e não o Kinescope.
• O Picture-in-picture não abre no Chrome. O item está no menu de três pontos, mas ao clicar nada acontece: o Chrome só permite essa janela para uma página aberta diretamente, e não em um iframe. Se precisar do modo, abra a sala pelo link direto.
• A supressão de ruído RNNoise não funciona. Dá para selecioná-la em Configurações → Áudio → Supressão de ruído, mas o áudio segue sem esse processamento. WebRTC AEC (o padrão) e DPDFNet (16k) funcionam no iframe.
• O link da reunião na sala é o link direto. A linha Link da reunião, na janela que aparece ao passar o cursor sobre o nome da sala, mostra e copia o endereço em speak.kinescope.io, e não o endereço da sua página. Se os participantes devem entrar pelo seu site, envie a eles o link da sua página.

Solução de problemas

Se não resolver, escreva para o chat de suporte na interface do Kinescope: envie o endereço da página com o iframe, o código da sala, o nome do navegador e uma captura de tela do console.

O que fazer a seguir?

Depois de incorporar a sala, recomendamos:

1. O que é o Speak? — recursos das reuniões por vídeo, gravação e sala de espera
2. Link de entrada no Speak com a função de administrador — entrada do apresentador pelo seu site com um link com token JWT
3. Retransmissão no Speak — transmitir a reunião para plataformas externas direto da sala
4. Solução de problemas e suporte — o que fazer quando algo dá errado em uma reunião

Ainda tem dúvidas? Escreva para o chat de suporte na interface do Kinescope — nossos especialistas vão ajudar!