# 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. > **Информация:** Dentro do iframe, o idioma da interface do Speak segue o idioma do navegador do participante; parâmetros no link não o alteram. Você pode trocar o idioma dentro da sala: menu de **três pontos** → **Configurações** → **Geral** → **Idioma**. ## 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](https://docs-br.kinescope.com/api/speak/#v1-speak-rooms). 2. **Cole o código na página** e coloque o link da sua sala em `src`: ```html ``` 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 atributo `allow` é obrigatório.** Sem ele a sala abre, mas o navegador não libera para ela a câmera, o microfone e o compartilhamento de tela — o participante vê "Câmera indisponível" ou um pedido para permitir a câmera e o microfone. ### 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. | Permissão | Para que serve | |---|---| | `camera` | Câmera do participante | | `microphone` | Microfone do participante | | `display-capture` | Compartilhamento de tela | | `fullscreen` | Botão **Tela cheia** | | `autoplay` | Reprodução automática do áudio e do vídeo dos outros participantes | | `clipboard-write` | Cópia do link da reunião | 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?](#faq-speak-iframe-not-loading) * **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/` 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=`. 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](https://docs-br.kinescope.com/developer-guides/speak-admin-login-link/). > **Внимание:** Um link com token dá direitos de administrador a qualquer pessoa que o abrir. Gere-o no servidor e mostre-o apenas ao apresentador autorizado — não o coloque em uma página comum que todos veem. 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 {{< faq >}} {{< faq-item id="speak-iframe-camera" q="Por que o Speak mostra “Câmera indisponível” se o acesso à câmera está permitido no navegador?" >}} É assim que o Speak mostra que o navegador não deixa o iframe usar os dispositivos. No lugar de "Câmera indisponível", pode aparecer o pedido "Permita que o Kinescope use sua câmera e microfone". Verifique nesta ordem: 1. **O atributo `allow`** — ele precisa ter `camera` e `microphone`. Sem eles, o navegador bloqueia os dispositivos no iframe, e o console mostra `Permissions policy violation: camera is not allowed in this document`. 2. **O cabeçalho `Permissions-Policy` do seu site** — se ele tiver `camera=()` ou `microphone=()`, o atributo `allow` não resolve. Libere os dispositivos para o Speak, por exemplo: `Permissions-Policy: camera=(self "https://speak.kinescope.io"), microphone=(self "https://speak.kinescope.io"), display-capture=(self "https://speak.kinescope.io")`. 3. **O protocolo** — a página precisa abrir por HTTPS. {{< /faq-item >}} {{< faq-item id="speak-iframe-screen-share" q="Por que o compartilhamento de tela não começa?" >}} Se o botão **Compartilhar sua tela** não faz nada, adicione `display-capture` ao atributo `allow`. Confira também se o cabeçalho `Permissions-Policy` do seu site não proíbe `display-capture`. {{< /faq-item >}} {{< faq-item id="speak-iframe-blank-screen" q="Por que aparece uma tela escura vazia no lugar da sala?" >}} O iframe carregou, mas o Speak não conseguiu iniciar. Causas possíveis: 1. **O navegador bloqueia cookies de terceiros.** É o padrão no modo anônimo do Chrome, e no modo normal isso é ativado nas configurações de privacidade. Dentro do iframe, o Speak não consegue acessar o armazenamento do navegador e não inicia. O participante precisa permitir cookies de terceiros para `speak.kinescope.io` nas configurações do navegador ou abrir a reunião pelo link direto. 2. **O iframe tem o atributo `sandbox` sem `allow-same-origin`.** Remova o `sandbox` ou adicione os valores necessários — veja os [requisitos da página](#requisitos-da-página). > **Совет:** Coloque abaixo do iframe um link "Abrir a reunião em uma nova aba" com o endereço direto da sala. Assim o participante consegue entrar mesmo que o navegador dele não deixe o Speak funcionar em um iframe. {{< /faq-item >}} {{< faq-item id="speak-iframe-error" q="Por que aparece uma mensagem de erro no lugar da sala?" >}} Se no lugar da tela de entrada o iframe mostra uma linha como `error_boundary ID: …`, na maioria das vezes a página está aberta por HTTP. Em uma página insegura, o navegador não dá acesso à câmera e ao microfone, e a sala não inicia. Passe a página para HTTPS. {{< /faq-item >}} {{< faq-item id="speak-iframe-not-loading" q="Por que o iframe não carrega?" >}} Se no lugar do iframe há um retângulo vazio ou um erro do navegador, abra o console do navegador (**F12** → **Console**) e procure a mensagem: * **`violates the following Content Security Policy directive: "frame-src …"`** — a política de segurança do site não permite iframes externos. Adicione `https://speak.kinescope.io` à diretiva `frame-src` do cabeçalho `Content-Security-Policy`. * **`net::ERR_BLOCKED_BY_RESPONSE`** — a página tem o isolamento ativado: os cabeçalhos `Cross-Origin-Embedder-Policy` e `Cross-Origin-Opener-Policy`. O Speak não pode ser incorporado a uma página assim. Remova esses cabeçalhos da página da reunião ou leve a reunião para uma página separada, sem eles. {{< /faq-item >}} {{< faq-item id="speak-iframe-owner" q="Por que o iframe mostra “Você é um participante” se eu sou o dono da sala?" >}} É o comportamento esperado: no iframe, o navegador não repassa ao Speak os seus dados de login no Kinescope, então a gravação e o controle de acesso ficam indisponíveis. Entre na sala pelo link direto ou por um link com token — veja [Entrada do organizador](#entrada-do-organizador). {{< /faq-item >}} {{< faq-item id="speak-iframe-waiting" q="Por que o participante espera muito para entrar?" >}} Se o participante vê "O anfitrião vê sua solicitação — aguarde" e não é admitido, a sala de espera está ativada e não há organizador na sala. O organizador precisa entrar pelo link direto e admitir o participante. Se você não precisa da sala de espera, desative-a na sala: **Controle de acesso** → **Sala de espera**. {{< /faq-item >}} {{< /faq >}} 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?](https://docs-br.kinescope.com/speak-beta/what-is-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](https://docs-br.kinescope.com/developer-guides/speak-admin-login-link/)** — entrada do apresentador pelo seu site com um link com token JWT 3. **[Retransmissão no Speak](https://docs-br.kinescope.com/speak-beta/restreaming-in-speak/)** — transmitir a reunião para plataformas externas direto da sala 4. **[Solução de problemas e suporte](https://docs-br.kinescope.com/troubleshooting/)** — 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!