Essa uma aplicação completa de transmissão de vídeo em tempo real diretamente no navegador, funcionando como uma espécie de “câmera sem fio” entre dois dispositivos. Ele foi construído inteiramente com HTML, CSS e JavaScript, e utiliza a biblioteca PeerJS para criar uma conexão direta entre os usuários sem precisar de servidor intermediário complexo. A estrutura começa com um container principal que ocupa toda a tela, fixado com position fixed e um z-index extremamente alto, garantindo que a interface fique sobre qualquer outro elemento da página, como um overlay total. Esse container também define variáveis de estilo, como cores e fontes, criando um visual escuro e moderno semelhante a aplicativos profissionais.

O sistema organiza a interface em diferentes “telas”, que são basicamente seções ocultas e exibidas conforme a interação do usuário. A navegação entre essas telas é feita por uma função que remove uma classe ativa de todas e aplica apenas na tela desejada, simulando uma troca de páginas sem recarregar o site. A tela inicial apresenta duas opções principais: operar como câmera, que transmite o vídeo, ou como receptor, que recebe a transmissão. Essa separação define todo o fluxo da aplicação.

Quando o usuário escolhe o modo câmera, ele precisa inserir um código de cinco dígitos. Esse código corresponde ao identificador do dispositivo receptor. Ao iniciar, o sistema solicita acesso à câmera e ao microfone do dispositivo usando a API getUserMedia, capturando o vídeo em alta resolução sempre que possível. Esse vídeo é exibido localmente em um elemento , permitindo ao usuário visualizar o que está sendo transmitido. Ao mesmo tempo, uma conexão peer-to-peer é criada com o receptor usando PeerJS, e o stream de mídia é enviado em tempo real. Se a conexão cair, o sistema tenta reconectar automaticamente após alguns segundos, mantendo a transmissão estável.

Já no modo receptor, o sistema gera automaticamente um código aleatório de cinco dígitos, que funciona como um identificador único para a conexão. Esse código é exibido na tela para que seja inserido no dispositivo que atuará como câmera. O receptor cria uma instância do PeerJS com esse ID e fica aguardando uma chamada. Quando a câmera se conecta, o receptor aceita a chamada e passa a exibir o vídeo recebido em tempo real. Enquanto aguarda conexão, uma mensagem visual com o código fica na tela, orientando o usuário.

Um recurso interessante é a possibilidade de adicionar uma marca d’água no vídeo recebido. O usuário pode selecionar uma imagem, que é carregada via FileReader e exibida sobre o vídeo com opacidade reduzida. Isso permite personalizar transmissões, como em eventos ou apresentações. Além disso, há um botão para ativar o modo tela cheia, que utiliza a API Fullscreen do navegador para melhorar a visualização, escondendo o botão automaticamente quando já está ativo.

No lado da câmera, o sistema oferece controles visuais em tempo real, como zoom, brilho e desfoque. Esses controles são implementados com sliders que alteram diretamente o estilo do vídeo local usando filtros CSS, criando efeitos instantâneos. Mais do que isso, essas alterações também são enviadas para o receptor através de uma conexão de dados paralela, garantindo que o vídeo exibido no outro dispositivo tenha exatamente os mesmos ajustes. Há também a opção de alternar entre câmera frontal e traseira, alternando o parâmetro facingMode e reinicializando a captura de vídeo.

O código também se preocupa com o gerenciamento de recursos. Quando o usuário encerra a aplicação, todas as trilhas de mídia são interrompidas e a conexão peer é destruída, evitando uso desnecessário de câmera, microfone ou rede. Esse cuidado garante que o aplicativo não continue rodando em segundo plano consumindo recursos do dispositivo.

Visualmente, o design utiliza elementos como cartões centralizados, botões com feedback ao toque e um painel translúcido sobre o vídeo da câmera, criando uma experiência semelhante a aplicativos mobile modernos. O uso de backdrop-filter adiciona um efeito de vidro fosco, reforçando esse aspecto profissional. Tudo isso é encapsulado dentro de um único namespace em JavaScript, evitando conflitos com outros scripts e mantendo o código organizado.

No geral, trata-se de uma solução completa de streaming ponto a ponto via navegador, que combina interface amigável, transmissão em tempo real e controle dinâmico de imagem, funcionando sem instalação de aplicativos e com uma experiência bastante fluida entre dois dispositivos conectados.