Esse aplicativo web é uma solução completa de chamada de voz e vídeo diretamente no navegador, sem necessidade de instalação, funcionando de forma semelhante a plataformas como WhatsApp Web ou Google Meet, porém com uma proposta mais simples, baseada em conexão direta entre usuários. Ele utiliza a biblioteca PeerJS, que abstrai a complexidade do protocolo WebRTC, permitindo comunicação em tempo real entre navegadores com suporte a áudio, vídeo e troca de dados.

Logo ao carregar, o usuário é apresentado a uma interface em tela cheia, projetada para ocupar completamente a viewport do dispositivo, garantindo uma experiência imersiva tanto em desktop quanto em dispositivos móveis. A primeira etapa é a tela de configuração, onde o usuário pode inserir um nome e um código de sala. Caso prefira, há botões que geram automaticamente essas informações, utilizando funções simples em JavaScript que combinam valores aleatórios com listas pré-definidas. Essa etapa é importante porque o código da sala funciona como identificador único da conexão entre dois usuários.

Ao iniciar a aplicação, o sistema solicita permissão para acessar câmera e microfone por meio da API nativa do navegador navigator.mediaDevices.getUserMedia. Esse é um ponto crítico do funcionamento, pois sem essa autorização não há como estabelecer a transmissão de áudio e vídeo. Uma vez concedida a permissão, o vídeo local do usuário já é exibido na tela, utilizando o elemento <video> com a propriedade srcObject vinculada ao fluxo de mídia capturado.

Na sequência, entra em ação o núcleo da aplicação: a conexão peer-to-peer. O código cria uma instância do PeerJS usando um identificador baseado no código da sala. Se esse ID ainda não estiver em uso, o usuário se torna o “host” da sala. Caso contrário, o sistema detecta que já existe alguém com esse ID e automaticamente tenta se conectar como participante. Essa lógica é tratada no evento de erro do PeerJS, especificamente quando ocorre o tipo unavailable-id.

A comunicação entre os usuários acontece em duas camadas. A primeira é a chamada de vídeo propriamente dita, feita com peer.call, que transmite o stream de mídia entre os navegadores. A segunda é um canal de dados paralelo, criado com peer.connect, que permite enviar mensagens simples, como o sinal de “toque” da chamada. Esse canal é responsável por recursos adicionais, como o botão que dispara um alerta sonoro no outro dispositivo, simulando uma chamada sendo recebida.

Para garantir que a conexão funcione mesmo fora de redes locais, o código utiliza servidores STUN públicos do Google. Esses servidores ajudam a descobrir o endereço IP público dos usuários e facilitam a conexão direta, mesmo quando há NAT ou firewalls envolvidos. Essa configuração é essencial para que a aplicação funcione na internet real e não apenas em testes locais.

Durante a chamada, a interface muda completamente, exibindo o vídeo remoto em tela cheia e o vídeo local em uma pequena janela sobreposta, no estilo picture-in-picture. Há também um overlay inicial que informa o status da conexão, sendo ocultado automaticamente quando o vídeo remoto é recebido. Os controles ficam fixos na parte inferior da tela e permitem ao usuário ativar ou desativar o microfone e a câmera, com atualização visual imediata dos ícones e do estado dos botões.

O controle de áudio e vídeo é feito diretamente manipulando as tracks do stream de mídia. Quando o usuário desativa o microfone, por exemplo, o código acessa getAudioTracks()[0].enabled e altera seu valor para falso, interrompendo a transmissão de áudio sem encerrar a chamada. O mesmo acontece com o vídeo, além de um ajuste visual que reduz a opacidade do preview local para indicar que a câmera está desligada.

O encerramento da chamada pode ser feito a qualquer momento, fechando a conexão ativa e recarregando a página para resetar completamente o estado da aplicação. Caso a outra pessoa encerre primeiro, o sistema detecta o evento e atualiza a interface para indicar que a chamada foi finalizada, permitindo que o usuário reinicie o processo.

No geral, o código combina HTML, CSS e JavaScript de forma integrada para criar uma aplicação funcional e elegante. O CSS é responsável por toda a experiência visual moderna, com elementos como transparência, blur e layout responsivo, enquanto o JavaScript cuida da lógica de conexão, controle de mídia e interação em tempo real. O resultado é um aplicativo leve, direto e eficiente, que demonstra na prática o poder das tecnologias modernas de comunicação web sem depender de servidores complexos para transmissão de mídia.