Espelho de Webcam

Espelho de Webcam - Espelho Virtual para Maquiagem e Cabelo

Uma ferramenta abrangente de espelho de webcam online que transforma sua câmera em espelho virtual. Perfeito para verificar maquiagem, cabelo, coordenação de roupa e aparência geral. Recursos incluem inversão de espelho, controle de zoom, ajuste de brilho, realce de contraste, ajustes de saturação e vários filtros. Tire fotos e salve-as para referência.

Como funciona o espelho de webcam?

O espelho de webcam usa a câmera do seu dispositivo e exibe o feed na tela com transformação de espelho:

1. Clique em 'Iniciar Espelho' para ativar sua câmera
2. O feed de vídeo é exibido em um elemento canvas
3. Canvas transform scale(-1, 1) inverte a imagem horizontalmente
4. Renderização em tempo real a 60fps para experiência suave de espelho
5. Todo processamento acontece no navegador - nenhum vídeo enviado

O efeito de espelho faz parecer como olhar em espelho real, que é mais intuitivo para verificar aparência, aplicar maquiagem ou ajustar cabelo.

Implementação técnica:
- getUserMedia API para acesso à câmera
- Canvas 2D context para renderização
- requestAnimationFrame para atualizações suaves
- Filtros CSS para efeitos

Por que o espelho está invertido por padrão?

O espelho está invertido (espelhado) por padrão porque:

Experiência Natural:
- Espelhos na vida real mostram imagem invertida
- Quando você move para direita, seu reflexo move para direita
- Mais intuitivo para cuidado pessoal e verificação de aparência
- Mais fácil para aplicar maquiagem ou ajustar cabelo

Como funciona:
- Canvas transform: scale(-1, 1) inverte a imagem horizontalmente
- Seu lado direito aparece no lado direito da tela
- Corresponde à experiência de olhar em espelho real

Vista não invertida:
- Clique em 'Espelhar' para alternar o efeito espelhado
- Mostra como outros veem você (vista real da câmera)
- Útil para verificar como você aparece em chamadas de vídeo
- Texto e logotipos aparecem corretos (não invertidos)

A maioria das pessoas prefere a vista espelhada para uso pessoal, mas você pode alternar a qualquer momento!

Para que posso usar o espelho de webcam?

O espelho de webcam é versátil para muitas tarefas de cuidado pessoal:

Aplicação de Maquiagem:
- Verificar aplicação e mistura de maquiagem
- Verificar aplicação de batom
- Garantir cobertura uniforme de base
- Aperfeiçoar delineador e máscara
- Testar diferentes looks de maquiagem

Penteado:
- Verificar penteado de todos os ângulos
- Verificar divisão e estilo do cabelo
- Identificar fios soltos ou seções bagunçadas
- Testar diferentes penteados
- Verificar cor e luzes do cabelo

Roupa e Acessórios:
- Coordenar peças de roupa
- Verificar joias e acessórios
- Verificar ajuste e estilo de roupas
- Testar combinações de cores
- Garantir aparência profissional

Cuidado Pessoal:
- Verificar barbear facial
- Verificar aparência limpa
- Inspecionar dentes e sorriso
- Verificações gerais de higiene

Preparação para Chamada de Vídeo:
- Verificar aparência antes de chamadas importantes
- Testar iluminação e fundo
- Verificar ângulo da câmera
- Praticar expressões e postura

Usos Criativos:
- Praticar tutoriais de maquiagem
- Testar maquiagem de fantasia
- Criar conteúdo para mídias sociais
- Referência de autorretrato para artistas

Como uso o recurso de zoom?

O recurso de zoom ajuda a focar em áreas específicas:

Como dar zoom:
1. Use o controle deslizante de Zoom (100% - 300%)
2. Valores maiores = vista mais próxima
3. Zoom atualiza em tempo real

Casos de uso:
- 100-150%: Vista completa de rosto e parte superior do corpo
- 150-200%: Focar no rosto para maquiagem
- 200-300%: Vista detalhada para olhos, lábios ou sobrancelhas

Dicas:
- Dê zoom para trabalho detalhado (delineador, batom)
- Diminua zoom para ver aparência geral
- Combine com boa iluminação para melhores resultados
- Ajuste posição para manter rosto centralizado

Nota: Zoom maior pode mostrar mais pixels/granulação, o que é normal para zoom digital. Para melhor qualidade, aproxime-se da câmera em vez de usar zoom extremo.

O que fazem os controles de brilho, contraste e saturação?

Esses controles ajustam a exibição do espelho para melhorar visibilidade:

Brilho (50-200%):
- Torna imagem mais clara ou escura
- Aumente se ambiente estiver muito escuro
- Diminua se imagem estiver desbotada
- 100% = brilho normal
- Útil para compensar iluminação ruim

Contraste (50-200%):
- Ajusta diferença entre áreas claras e escuras
- Aumente para visual mais vívido e dramático
- Diminua para visual mais suave e plano
- 100% = contraste normal
- Ajuda detalhes a se destacarem

Saturação (0-200%):
- Controla intensidade de cor
- 0% = preto e branco (escala de cinza)
- 100% = cores normais
- 200% = cores vibrantes e intensas
- Útil para verificar combinação de cores de maquiagem

Desfoque (0-10px):
- Suaviza imagem com desfoque gaussiano
- Pode esconder imperfeições
- Cria efeito de foco suave
- 0px = imagem nítida

Esses controles NÃO mudam sua aparência real - apenas ajustam como o espelho exibe a imagem. Use-os para compensar iluminação ruim ou ver detalhes melhor.

Quais são os efeitos de filtro?

Filtros aplicam efeitos especiais ao espelho:

Nenhum:
- Espelho de cor normal
- Nenhum efeito especial aplicado
- Cores fiéis à realidade

Escala de Cinza:
- Espelho em preto e branco
- Remove toda cor
- Visual vintage clássico
- Ajuda a focar em iluminação e contraste
- Útil para verificar intensidade de maquiagem sem distração de cor

Sépia:
- Tom quente e acastanhado
- Efeito de fotografia vintage
- Estética nostálgica
- Mais quente que escala de cinza

Inverter:
- Inverte todas as cores
- Escuro se torna claro, claro se torna escuro
- Efeito artístico
- Pode revelar detalhes escondidos em tons similares

Filtros são efeitos puramente visuais e não afetam fotos que você tira (a menos que ativos ao capturar). São divertidos para looks criativos ou práticos para focar em aspectos específicos como contraste ou detalhe.

Como tiro e salvo fotos?

O recurso de foto captura sua vista atual do espelho:

Tirando uma foto:
1. Ajuste configurações do espelho (zoom, brilho, filtros) como desejar
2. Clique no botão 'Tirar Foto'
3. Frame atual é capturado instantaneamente
4. Foto aparece na visualização abaixo do espelho

O que é capturado:
- Vista exata atual do espelho
- Todos os filtros e ajustes ativos
- Nível de zoom atual
- Estado de inversão do espelho (espelhado ou não invertido)

Salvando a foto:
1. Revise a foto capturada
2. Clique no botão 'Baixar'
3. Foto salva como arquivo PNG
4. Nome do arquivo inclui timestamp (espelho-2024-01-15-143022.png)

Usos para fotos salvas:
- Comparar looks de maquiagem ao longo do tempo
- Compartilhar com amigos para conselho de roupa
- Referência para cabeleireiro ou maquiador
- Comparações antes/depois
- Documentar progresso de cuidados com a pele
- Criar tutoriais de maquiagem

Dica: Tire múltiplas fotos de diferentes ângulos ou com diferentes configurações para comparar depois.

Meu vídeo é privado e seguro?

Sim, sua privacidade é completamente protegida:

Processamento Local:
- Todo processamento de vídeo acontece no seu navegador
- Nada é enviado para nenhum servidor
- Feed de vídeo nunca sai do seu dispositivo
- Sem gravação a menos que você tire uma foto
- Sem armazenamento de dados de vídeo

O que acontece com seu feed de câmera:
1. Câmera → Memória do seu navegador (temporariamente)
2. Renderizado em canvas em tempo real
3. Exibido na sua tela
4. Descartado imediatamente (não salvo)

Quando você tira uma foto:
- Capturada apenas quando você clica em 'Tirar Foto'
- Salva apenas se você clicar em 'Baixar'
- Armazenada localmente no seu dispositivo
- Nunca enviada para lugar nenhum
- Você tem controle completo

Permissões do navegador:
- Você deve conceder acesso à câmera
- Você pode revogar acesso a qualquer momento
- Ferramenta só funciona quando a página está aberta
- Câmera para quando você fecha a página ou para o espelho
- Nunca solicitamos a câmera até você clicar em 'Iniciar Espelho' (sem aviso de permissão ao carregar a página)

Sem rastreamento:
- Sem análises sobre seu uso
- Sem registro de quando você usa o espelho
- Sem coleta de dados de qualquer tipo
- Aplicação 100% lado do cliente

Você pode verificar isso:
- Usando com internet desconectada (funciona offline após carregamento da página)
- Verificando ferramentas do desenvolvedor do navegador (sem requisições de rede para vídeo)
- Revisando código de código aberto se disponível

Quais navegadores e dispositivos suportam este teste de webcam?

A ferramenta usa a API padrão getUserMedia (WebRTC), suportada por todos os navegadores modernos:

Suportados:
- Chrome / Edge / Brave (desktop e Android)
- Firefox (desktop e Android)
- Safari (macOS 11+ e iOS/iPadOS 14.3+)
- Opera e a maioria dos navegadores baseados em Chromium

Contexto seguro obrigatório:
- getUserMedia só funciona em páginas HTTPS (ou localhost). Em uma página http:// o navegador esconde totalmente navigator.mediaDevices, então a ferramenta mostra uma mensagem de 'requer HTTPS' em vez da câmera.

Observações do iOS Safari:
- A câmera funciona apenas dentro do Safari; alguns navegadores embutidos em apps a bloqueiam
- O elemento de vídeo deve ser em linha (usamos playsinline) ou o iOS forçaria a reprodução em tela cheia
- O iOS pode rotular a câmera frontal como 'user' e a traseira como 'environment'

Por que os nomes das câmeras ficam ocultos no início?
- Por privacidade, os navegadores retornam rótulos vazios em enumerateDevices() até você conceder a permissão. Por isso o menu mostra 'Câmera 1 / Câmera 2' genéricos antes de começar, e os nomes reais só aparecem após clicar em 'Iniciar Espelho' e aprovar o acesso.

A câmera não inicia - como corrigir erros de permissão e 'em uso'?

Problemas comuns de câmera e soluções:

Permissão negada (NotAllowedError):
- Você (ou seu navegador) bloqueou o acesso à câmera
- Clique no ícone de câmera/cadeado na barra de endereços → Configurações do site → defina Câmera como 'Permitir', então recarregue
- No macOS verifique também Ajustes do Sistema → Privacidade e Segurança → Câmera
- No Windows verifique Configurações → Privacidade → Câmera

Câmera em uso / tela preta (NotReadableError):
- Outro app já está usando a câmera (Zoom, Teams, OBS, Skype, FaceTime)
- Feche esses apps ou outras abas que usem a câmera e tente novamente
- Reiniciar libera um driver de câmera travado no Windows

Nenhuma câmera detectada (NotFoundError):
- Verifique o cabo / a conexão USB de webcams externas
- Confirme que o dispositivo aparece no gerenciador de dispositivos do sistema
- Tente outra porta USB

Configurações incompatíveis (OverconstrainedError):
- A resolução selecionada não é suportada por essa câmera; escolha um preset menor (ex.: 720p)

Ainda travado:
- Tente outro navegador para isolar um problema de navegador vs. hardware
- Uma câmera que falha em todos os apps provavelmente precisa de reinstalação de driver ou reparo

O que é o painel Informações da Câmera - resolução solicitada vs. real?

O painel Informações da Câmera transforma isto de um espelho de vaidade em um instrumento de diagnóstico real. Após iniciar a câmera, ele lê a faixa MediaStreamTrack ao vivo com getSettings() e getCapabilities():

Solicitada vs. entregue:
- O menu de resolução envia uma 'dica' ideal de largura/altura ao navegador
- O navegador pode dar algo próximo mas diferente (um pedido de 1080p costuma retornar 1280×720 em um sensor de 720p)
- 'Resolução Real' mostra o que a câmera realmente entregou via getSettings().width/height, não o que você pediu

O que cada campo significa:
- Resolução Real: dimensões reais em pixels do fluxo
- Taxa de Quadros: os fps negociados (ex.: 30 fps)
- Proporção: largura ÷ altura (1.778 = 16:9, 1.333 = 4:3)
- Dispositivo: o rótulo real da câmera (após a permissão)
- Orientação: 'user' (frontal) ou 'environment' (traseira) em celulares
- Capacidades: a resolução, fps, zoom e lanterna máximos que o hardware reporta via getCapabilities()

Exportar para registros de QA:
- Clique em 'Exportar Info (JSON)' para baixar o relatório completo, ou 'Copiar' para copiá-lo
- Técnicos de reparo podem anexar este registro verificável a um chamado para provar que uma webcam substituída ou reparada entrega sua resolução e taxa de quadros nominais

Recursos Principais

• Espelho de webcam em tempo real com renderização a 60fps
• Canvas transform scale(-1, 1) para inversão de espelho
• Alternância de inversão de espelho (vista espelhada/não invertida)
• Suporte para seleção de múltiplas câmeras
• Opções de resolução (HD 720p, Full HD 1080p, SD 480p)
• Controle de zoom (100-300%)
• Ajuste de brilho (50-200%)
• Ajuste de contraste (50-200%)
• Controle de saturação (0-200%)
• Efeito de desfoque (0-10px)
• Efeitos de filtro (Escala de Cinza, Sépia, Inverter)
• Redefinição de filtro com um clique
• Modo tela cheia para experiência imersiva
• Captura de foto com configurações atuais
• Baixar fotos como PNG
• Timestamp em nomes de arquivo
• Atualizações de visualização em tempo real
• Animação suave a 60fps
• Design responsivo para todos os tamanhos de tela
• Suporte a interface em modo escuro
• Processamento 100% lado do cliente
• Sem envio ou armazenamento de vídeo
• Privacidade e segurança completas
• Funciona offline após carregamento inicial
• Sem necessidade de registro