A sala de vídeo da Kontato tem 2 layouts manuais (Grid e Speaker) e 1 layout automático (Screen-share). Você escolhe entre Grid e Speaker pelo menu da barra de controle (atalho L). O sistema decide automaticamente quando forçar mudanças.
Modo Grid (default)
Tiles em malha que adaptam ao número de participantes. Mais democrático — ninguém ganha destaque desproporcional.
Comportamento por número de pessoas
1 participante (você sozinho)
- Tile fullscreen ocupa toda a tela
- Mensagem "Aguardando participantes..." se ninguém entrou ainda
2 participantes (você + cliente)
- Desktop: split horizontal 50/50
- Mobile (portrait): empilhado vertical (cliente em cima, você embaixo)
3 participantes
- Desktop: 2 tiles em cima + 1 centralizado embaixo (50% width)
- Mobile: 3 tiles empilhados verticalmente
4 participantes
- Grade 2×2 em ambos desktop e mobile
5 ou mais participantes
- Auto-força Speaker (ver abaixo) — Grid não escala bem com muitos
Modo Speaker
Foco no falante ativo. Tile grande de quem está falando + thumbs (miniaturas) dos demais.
Layout:
- Desktop: tile principal grande + coluna lateral à direita com thumbs (180px de largura, scroll vertical se passa de 4 thumbs)
- Mobile: tile principal em cima + linha embaixo com thumbs (scroll horizontal se passa de 2-3)
Quem é o "speaker":
- Quem está falando agora — atualiza em tempo real
- Se ninguém está falando, mostra o primeiro participante que não é você
- Se só você está, mostra você
Quando vale a pena escolher manualmente:
- Você quer se concentrar no que o cliente fala (consultas, sessões de terapia)
- Tem 4 pessoas e o Grid 2×2 fica espremido
- Cliente está apresentando algo (sem usar screen share formal)
Quem está falando ganha ring azul pulsante ao redor do tile em todos os layouts, não só no Speaker. Visual claro de quem está falando.
Modo Screen-share (automático)
Quando dispara: alguém clica "Compartilhar tela" (atalho S) e seleciona uma janela/aba no aviso do navegador.
O que muda:
- Layout automático ignora a escolha manual (Grid ou Speaker)
- Tile da tela compartilhada ocupa a área principal (sem cortar o conteúdo da tela)
- Badge "[Nome] compartilhando" no canto superior esquerdo do tile da tela
- Outros participantes viram thumbs ao lado:
- Desktop: coluna direita (180px)
- Mobile: linha embaixo (scroll horizontal)
- Quando o compartilhamento termina, layout volta pro modo manual escolhido (Grid ou Speaker)
Quem pode compartilhar:
- Dono e cliente, ambos
- Apenas 1 pessoa por vez
- Se outra pessoa começar a compartilhar, a anterior é parada automaticamente
Como trocar de layout manualmente
Na barra de controle (barra inferior), botão Layout (ícone de grade):
- Click ou atalho L abre o menu
- Escolhas:
- Grid — tiles em malha
- Speaker — foco no falante
A escolha é local (cada participante decide o que vê) — não sincroniza com os outros.
Modo de cliente vs. dono
O cliente vê os mesmos layouts que você, mas com ressalvas:
- ✅ Vê o resultado do layout (Grid/Speaker/Screen-share)
- ✅ Vê o ring azul de quem está falando
- ✅ Pode trocar o layout dele (atalho L na barra de controle dele)
- ❌ Não vê a sua janela flutuante de auto-visualização (ele tem a dele própria)
- ❌ Layout dele independe do seu (cada um tem o seu)
O que acontece em mobile portrait
Mobile portrait (celular em pé) é o caso mais constrangido — pouca largura. Por isso:
- Grid 2 empilha vertical (em vez de split horizontal)
- Grid 3 empilha vertical (em vez de 2+1)
- Speaker e Screen-share: thumbs viram scroll horizontal embaixo
Mobile landscape (celular deitado) usa o layout desktop normal.
Active Speaker Ring (em todos os layouts)
Quem está falando ganha um anel azul pulsante ao redor do tile dele. Funciona em:
- Grid (qualquer número de pessoas)
- Speaker (no tile principal e nas thumbs)
- Screen-share (nas thumbs)
Útil pra identificar quem fala em chamadas com 3+ pessoas, especialmente em mobile onde os tiles ficam pequenos.
Active speaker e mute
Se o microfone está mutado, o tile não ganha o ring azul mesmo se a pessoa estiver "falando" (a sala não identifica quem fala quando o áudio está desligado). Útil saber: se o cliente está em mute e fala, ninguém percebe — peça pra ele desmutar.
Próximos artigos
- Self-view PiP — sua janela floating, drag, resize
- Compartilhar tela — como funciona o screen share
- Trocar dispositivos in-call — chevrons + engrenagem