App Android · Produto próprioCase 02 / 02

BabaCam

Um celular antigo vira babá eletrônica completa, com o vídeo indo direto para os meus aparelhos, sem nuvem de terceiros.

BabaCam: visão geral do app
01 / A ideia

De onde veio

Com o bebê chegando, transformar um Samsung S22 que estava parado na gaveta numa babá eletrônica de verdade: ligado na tomada 24 horas, com vídeo, áudio, alertas e gravação, e assistida pelo navegador de qualquer celular ou PC da casa, e também de fora de casa.

02 / A dor

O que incomodava quem ia usar

03 / O problema

O que precisava ser resolvido

Eu queria tudo o que uma babá eletrônica boa faz (ouvir, falar, alerta de choro, sons para ninar, visão noturna e gravação por movimento) sem entregar a imagem do quarto do bebê para nenhum serviço de nuvem. E tinha de funcionar num aparelho comum, que fica 24 horas na tomada, sem eu precisar mexer nele.
04 / A solução

Como o produto resolve

Um app Android que transforma o S22 num pequeno servidor seguro: a câmera e o microfone transmitem por WebSocket direto para o navegador, com HTTPS de certificado gerado no próprio aparelho e senha guardada só como hash. O app recusa qualquer IP público, aceitando só a rede de casa e a rede privada do Tailscale, que liga os meus aparelhos entre si quando estou na rua. A interface é uma página web leve, pensada para ser usada de madrugada, com uma mão e meio dormindo.

Princípio 01

Privacidade por arquitetura

Nada passa por servidor de terceiros. O vídeo sai do S22 direto para o aparelho de quem assiste, e fora de casa vai criptografado de ponta a ponta.

Princípio 02

Feito para a madrugada

Tema escuro quente, botões grandes, ações principais sempre na tela e nenhum brilho branco que acorde alguém.

Princípio 03

Roda sozinho 24h

Liga sozinho depois de reiniciar, mostra bateria e temperatura do S22 e só ativa a câmera quando alguém está assistindo.

Princípio 04

Sem instalar nada para assistir

Funciona no navegador do celular ou do PC e pode ir para a tela inicial como um app.

05 / Funcionalidades

O que o BabaCam faz

Vídeo ao vivo

Troca de lente, resolução, zoom, brilho, girar, espelhar, tela cheia e foto.

Ouvir e falar

Áudio do quarto em tempo real e a minha voz saindo no alto-falante do S22.

Alerta de choro e barulho

Bipe, vibração e notificação, com sensibilidade ajustável e histórico dos sons.

Sons para ninar

Ruído branco, rosa, marrom ou batimentos, com timer e diminuição suave no fim.

Modo noturno

Filtro na imagem e sensor noturno com exposição mais longa no escuro.

Gravação por movimento

Grava a partir de 5 segundos antes do movimento, salva em MP4 e apaga os mais antigos quando atinge o limite de espaço.

Aba Vídeos

Assistir, baixar ou apagar as gravações direto pelo navegador.

Modo só áudio

Economiza dados fora de casa: cerca de 60 MB por hora.

06 / Telas

A interface, como está no app

BabaCam: Monitor no PC: vídeo, som do quarto, ações rápidas e histórico de alertas
Monitor no PC: vídeo, som do quarto, ações rápidas e histórico de alertas
BabaCam: Aba Vídeos: gravações por dia, para assistir, baixar ou apagar
Aba Vídeos: gravações por dia, para assistir, baixar ou apagar
BabaCam no celular: No celular: tudo ao alcance do polegar
No celular: tudo ao alcance do polegar
BabaCam no celular: Gravação por movimento com sensibilidade e limite de espaço
Gravação por movimento com sensibilidade e limite de espaço
BabaCam no celular: Sons para ninar com volume e timer
Sons para ninar com volume e timer
BabaCam no celular: Acesso por senha, com bloqueio após 5 tentativas
Acesso por senha, com bloqueio após 5 tentativas

Imagem da câmera ilustrativa. As telas são da interface real do app.

07 / Linguagem trabalhada

Visual, voz e código

Linguagem visual

Paleta escura e quente, com um pêssego suave como única cor de ação, para não ofuscar no quarto escuro. A lua é o símbolo do app. Hierarquia simples: o vídeo em cima, a barra do som do quarto logo abaixo e cinco botões grandes (Ouvir, Falar, Ninar, Noturno, Foto) ao alcance do polegar. Os ajustes ficam em abas, longe do uso do dia a dia.

Pêssego
#F2B880
Noite
#0E1014
Painel
#1B1F27
Branco
#FFFFFF

Tipografia: Fonte do sistema, pesos 400 a 700

Tom de voz

Calmo e explicativo, escrito para pais cansados. Cada ajuste diz o efeito em linguagem comum ("Mais para a esquerda = avisa com sons mais baixos") e os estados contam o que está acontecendo ("Vídeo desligado para economizar dados. O som continua.").

Linguagem de código

Kotlin com CameraX e um serviço em primeiro plano no Android; servidor HTTP e WebSocket embutido (NanoHTTPD); áudio em µ-law a 16 kHz; TLS com certificado próprio (Bouncy Castle) e senha com PBKDF2. A interface é um único HTML com JavaScript puro, sem framework, servido pelo próprio celular.

08 / Decisões de produto

Escolhas que definiram o app

  • Navegador em vez de um segundo app: qualquer celular ou PC vira monitor, sem instalar nada
  • Recusar IP público no código, em vez de confiar na configuração do roteador
  • Tailscale para acesso de fora: liga só os meus aparelhos e não exige abrir portas
  • Câmera ligada só com alguém assistindo; o microfone fica ativo para detectar choro
  • Gravação com 5 s de pré-movimento e limite de espaço com limpeza automática, como uma câmera de segurança
  • APK gerado e assinado pelo GitHub Actions a cada push, para atualizar por cima sem perder configurações
Stack
KotlinAndroid CameraXNanoHTTPD + WebSocketWeb Audio APIHTML, CSS e JS purosBouncy Castle (TLS)TailscaleGitHub Actions (APK)
09 / Resultado

Onde o produto está hoje

24hligado na tomada, religando sozinho após reiniciar
0servidores de terceiros no caminho do vídeo
~60 MB/hno modo só áudio, fora de casa
R$ 0de hardware novo: reaproveita um celular parado

Projeto de uso pessoal, feito para resolver uma necessidade real da minha casa. É o tipo de produto que mostra como penso: começar pela dor, tratar segurança como requisito de design e desenhar a interface para o contexto real de uso, que aqui é um quarto escuro às 3 da manhã.

10 / Próximos passos

O que vem depois

/ Seu produto

Quer tirar uma ideia do papel?

Pesquisa, UX/UI, identidade e desenvolvimento: do problema real ao produto publicado.