Adicionar feed de webcam ao vivo ao seu site permite streaming em tempo real para eventos, monitoramento ou experiências interativas. Guia prático de implementação.
Pré-requisitos
- Webcam funcional (USB, IP camera ou embutida)
- Servidor web ou hospedagem (shared, VPS, cloud)
- Conhecimento básico de HTML/JavaScript
- Software ou serviço de streaming
Método 1: Software de Streaming + Embed (Recomendado)
Usando OBS Studio (Grátis, Open Source)
- Instale OBS Studio no computador conectado à webcam.
- Adicione fonte "Dispositivo de Captura de Vídeo" → selecione sua webcam.
- Configure saída: Configurações → Stream → escolha "Custom" → insira seu servidor de streaming (veja abaixo).
- Inicie streaming no OBS.
Opções de Servidor de Streaming
Método 2: WebRTC (Navegador a Navegador, Sem Servidor)
Para peer-to-peer simples ou audiências pequenas, use WebRTC com servidor de sinalização. Bibliotecas: PeerJS, simple-peer. Mais complexo para escalar.
Incorporando o Stream
HLS (HTTP Live Streaming) — Mais Compatível
<video id="webcam" controls playsinline> <source src="https://seu-stream.m3u8" type="application/x-mpegURL"> Seu navegador não suporta HLS. </video> <script src="https://cdn.jsdelivr.net/npm/hls.js@latest/dist/hls.min.js"></script> <script> if (Hls.isSupported()) { var video = document.getElementById('webcam'); var hls = new Hls(); hls.loadSource('https://seu-stream.m3u8'); hls.attachMedia(video); } </script>
Embed Mux / Cloudflare Stream / Vimeo
Use o iframe ou SDK do player JavaScript fornecido por eles.
Considerações Críticas
- Privacidade/LGPD/GDPR/CCPA: Informe visitantes, obtenha consentimento se gravar, evite capturar indivíduos não consentidos.
- Largura de Banda/Custos: Streaming consome egress significativo. Monitore uso em planos pagos.
- Segurança: Use streams autenticados (URLs assinadas, tokens) para feeds privados. Desative listagem de diretório.
- Fallback: Forneça imagem estática ou mensagem "offline" quando stream cai.
- Mobile: Teste no iOS Safari (requer
playsinline) e Android Chrome.
Alternativa Mais Simples: Refresh de Imagem Estática
Para atualizações de baixa frequência (tempo, obra), use script que faz FTP/HTTP POST de snapshots da câmera para seu servidor, então exiba com refresh JavaScript:
<img id="cam" src="latest.jpg?nocache=1"> <script>setInterval(()=>document.getElementById('cam').src='latest.jpg?'+Date.now(),30000)</script>
