Cabine de fotos com webcam gratuita

Como funciona

1. Autorize a câmera : clique em « Iniciar a câmera » e conceda o acesso quando o navegador solicitar.
2. Ajuste as opções : escolha um filtro, ative o modo espelho e defina um timer se quiser se posicionar antes do disparo.
3. Capture e baixe : clique em « Tirar a foto ». As fotos se acumulam na galeria, prontas para serem baixadas individualmente ou em lote.

Perguntas frequentes

Minhas fotos são enviadas online ?

Não. Todo o processamento acontece no seu navegador via a API MediaDevices ; as imagens nunca saem do seu dispositivo. Nenhum servidor vê nem armazena seu fluxo de vídeo.

Por que a câmera não inicia ?

Verifique se você autorizou o acesso à câmera nas configurações do navegador, se o site é servido via HTTPS (obrigatório para acesso à câmera) e se nenhum outro aplicativo já a está usando.

Posso escolher entre várias webcams ?

Sim. Se várias câmeras estão conectadas, o seletor « Câmera » lista todas : webcam integrada, webcam USB externa, câmeras virtuais etc.

Como as webcams de navegador realmente funcionam

O acesso à câmera no navegador é regido pela especificação Media Capture and Streams do W3C. O ponto de entrada é navigator.mediaDevices.getUserMedia(): uma função que a página chama com um objeto de constraints (restrições) que descreve o tipo de fluxo que ela quer. O navegador mostra o pedido de permissão; se você permitir, a função resolve com um objeto MediaStream contendo uma ou mais trilhas de vídeo. A página vincula esse fluxo a um elemento <video> via video.srcObject = stream, a transmissão ao vivo aparece na tela, e capturar um quadro é então uma questão de desenhar o vídeo em um <canvas> do HTML5 no momento em que o usuário clica em Tirar a foto. O canvas é exportado via canvas.toBlob('image/jpeg'), que se torna o JPG para download. Nenhum quadro jamais sai do seu dispositivo: todo o pipeline está no processo do seu navegador.

O getUserMedia baseado em promessas chegou sem prefixo no Chrome 53 (setembro de 2016) e no Firefox 36 (fevereiro de 2015). O Safari foi o retardatário: o acesso à webcam a partir de páginas web só chegou ao iOS no iOS 11 (setembro de 2017), e o alvo estável moderno é o iOS 14.5 ou posterior. Em 2026, a API é essencialmente universal: o caniuse coloca o suporte global acima de 97%.

Por que o HTTPS é obrigatório

O getUserMedia é restrito a «contextos seguros»: HTTPS, localhost no desktop ou file:// no Firefox. As páginas servidas por HTTP não conseguem acessar a câmera de jeito nenhum; a chamada é rejeitada com um NotAllowedError. Esse é o bug de implantação mais comum para variantes auto-hospedadas desse tipo de ferramenta, e é imposto de maneira uniforme por todo navegador moderno. O celular é ainda mais rígido: não há isenção de localhost em um telefone, então testar ferramentas de câmera em um servidor de desenvolvimento local exige uma ferramenta de túnel como o ngrok ou um proxy reverso com TLS.

Constraints: como pedir a câmera certa

O objeto de constraints é a parte mais complexa da API. Os controles comuns:

• width / height: aceita um número literal ou um objeto com min, ideal, max, exact. ideal é o padrão prático; o navegador chega o mais perto possível sem rejeitar câmeras que não consigam corresponder exatamente. exact rejeita se o hardware não conseguir entregar.
• facingMode: 'user' para a câmera frontal (selfie) ou 'environment' para a traseira. Em laptops com apenas uma câmera, a constraint é ignorada silenciosamente; em telefones, é a forma mais limpa de escolher a lente certa sem enumerar os dispositivos.
• frameRate: a maioria das webcams limita em 30 fps; algumas câmeras USB externas chegam a 60.
• deviceId: para escolher um dispositivo específico depois de enumerar com navigator.mediaDevices.enumerateDevices(). Nuance crucial: label é uma string vazia até que o usuário tenha concedido ao menos uma permissão de câmera nesta sessão, então uma lista suspensa de «escolha sua câmera» que rode antes de qualquer concessão de permissão vai mostrar IDs sem rótulo. A lista suspensa Câmera acima contorna isso ao se popular apenas depois que o Iniciar a câmera funciona.

A luz da câmera é o seu sinal de confiança

Em um Mac com uma webcam de 2008 ou posterior, o LED verde ao lado da câmera está ligado ao mesmo barramento de energia que o sensor. O macOS e o firmware garantem que o LED fica aceso sempre que o sensor está energizado: a Apple projetou isso para que nem mesmo um malware em nível de kernel consiga apagar o LED enquanto a câmera está gravando. O iOS implementa o indicador de ponto laranja no topo da tela desde o iOS 14 (lançado em setembro de 2020), desenhado por um processo do sistema que o aplicativo não pode suprimir. As webcams do Windows usam uma abordagem semelhante na maioria dos dispositivos modernos, embora a imposição seja menos universal: algumas webcams USB antigas de 2010 tinham LEDs controlados por software. O Linux varia conforme o hardware.

A lição: confie no LED, não no site. Uma ferramenta puramente de navegador como esta pode prometer sinceramente que nada sai do seu dispositivo, e a luz da câmera lhe dá uma confirmação independente de que a câmera está realmente desligada quando a página diz que está. O bug mais comum nas ferramentas de webcam é esquecer de chamar stream.getTracks().forEach(t => t.stop()) ao fechar, com o sintoma: a luz da câmera continua acesa depois que o usuário acha que a desligou. O botão Parar a câmera nesta página chama isso explicitamente.

Quando você recorreria a uma ferramenta de webcam no navegador

• Fotos de perfil rápidas para Slack, Discord, GitHub, redes sociais, sem instalar um aplicativo de webcam separado.
• Fotos estilo passaporte / documento tiradas em casa para formulários on-line (renovação de carteira de motorista, pedidos de visto). A questão da privacidade no navegador importa aqui justamente porque enviar uma foto do rosto a um serviço de terceiros é desconfortável.
• Pré-visualizações de videoconferência: verificar a iluminação, o enquadramento e como um fundo virtual fica antes de entrar em uma chamada do Zoom ou do Teams.
• Presença na escola e no trabalho remoto: quando um professor ou empregador pede uma selfie rápida para confirmar a presença.
• Fotos de referência para arte e design: uma pose de mão, uma foto de objeto para um modelo 3D, um esboço de autorretrato.
• Cabine de fotos leve em eventos: rodar um laptop com uma página dedicada para que os convidados tirem selfies sem instalar um aplicativo.
• Mockups e prototipagem: designers que constroem fluxos que incluem uma etapa de «tire uma selfie» querem uma página de teste rápida.
• Demonstrações educacionais: professores mostrando aos alunos como a Camera API moderna da web funciona.

O diferencial em relação ao Photo Booth no macOS ou ao aplicativo Câmera no Windows é que nada é instalado e nada é enviado: útil em computadores de trabalho bloqueados e quiosques compartilhados onde você não pode instalar software.

Filtros: o que a propriedade filter do CSS oferece

O canvas do HTML5 pode aplicar a sintaxe de filtros do CSS através da propriedade ctx.filter. Os filtros disponíveis acima usam as mesmas primitivas que qualquer regra CSS pode aplicar: grayscale(1) (dessaturação total, equivalente a uma projeção de luminância), sepia(1) (tom marrom quente que imita fotografias antigas), invert(1) (negativo de cor), blur(5px) (desfoque gaussiano), brightness(1.4) (multiplica a intensidade do pixel) e contrast(1.4) (gira em torno do cinza médio). Eles são acelerados por hardware em todo navegador desde o Chrome 53 / Firefox 35 / Safari 9.1.

Um detalhe sutil, mas importante: os filtros CSS aplicados ao elemento <video> não se propagam ao canvas. Para embutir o filtro no JPG salvo, o mesmo filtro precisa ser definido em ctx.filter antes do drawImage. Esta página faz isso, então a pré-visualização na tela corresponde ao arquivo salvo pixel por pixel.

Erros comuns e o que significam

Se o Iniciar a câmera falhar, a rejeição volta como uma DOMException com um destes nomes:

• NotAllowedError: você (ou uma sessão anterior) negou a permissão, ou a página não está em HTTPS. Olhe o menu de permissões do site na barra de endereços e verifique se a Câmera está definida como Permitir ou Perguntar.
• NotFoundError: nenhum dispositivo correspondente. Acontece com mais frequência ao solicitar facingMode: 'environment' com exact em um desktop sem câmera traseira.
• NotReadableError: o hardware está em uso por outro aplicativo. O Zoom, o Teams, o OBS ou outra aba do navegador está com a câmera aberta. Feche-os e tente de novo.
• OverconstrainedError: as constraints não puderam ser satisfeitas. Remova as exigências de exact ou relaxe a resolução.
• TypeError: o objeto de constraints estava vazio. A chamada deve solicitar ao menos áudio ou vídeo.

Mais perguntas

Por que a minha imagem está de cabeça para baixo ou de lado?

Algumas câmeras Android relatam uma rotação enganosa nos seus metadados EXIF. O navegador normalmente aplica a rotação automaticamente antes de o quadro de vídeo chegar ao canvas, mas versões mais antigas do Samsung Internet e alguns WebViews embutidos pulam essa etapa. Se as capturas saírem de lado, tente girar o seu dispositivo 90° antes de capturar, ou use a ferramenta Girar imagem depois.

Por que a lista suspensa mostra «Câmera 1, Câmera 2» em vez de nomes?

Porque o navegador ainda não recebeu permissão de câmera. O enumerateDevices() retorna rótulos (por exemplo, «FaceTime HD Camera») apenas depois que o usuário aprovou o acesso à câmera ao menos uma vez na sessão atual; até lá, só são retornados IDs opacos. Clique em Iniciar a câmera uma vez, permita o acesso, e a lista suspensa será atualizada com os nomes corretos.

A luz da câmera vai continuar acesa depois que eu fechar a página?

Não. O botão Parar a câmera para explicitamente cada trilha do fluxo, e os navegadores modernos também param as trilhas quando a aba fica oculta ou a página é descarregada. Se você algum dia vir o LED da câmera continuar aceso depois de fechar uma aba, é um bug que vale a pena relatar: na maioria das vezes, significa que a página não chamou a função de limpeza. Nesta ferramenta, clicar em Parar a câmera ou fechar a aba libera o hardware imediatamente.

Posso gravar vídeo, não apenas fotos?

Não nesta ferramenta: ela é apenas para captura de fotos. Gravar vídeo exige a API MediaRecorder e produz arquivos em WebM, MP4 ou MKV, dependendo do navegador. A gravação também tem suas próprias implicações de privacidade (você está armazenando quantidades maiores de imagens identificáveis), então é um caso de uso separado que vale a pena tratar com sua própria ferramenta dedicada.

Algo é enviado a um servidor?

Não. O fluxo de vídeo é entregue diretamente do sistema operacional para o navegador; a captura do canvas e a exportação para JPG acontecem via JavaScript localmente; a galeria fica na memória do navegador e é baixada direto para o seu dispositivo. Nada sobre a sua câmera, o seu rosto ou as suas fotos sai da página.

Ferramentas relacionadas