Meu projeto original no LAC-EBA-UFMG dependia de um pipeline clássico em desktop: Python, OpenCV, ONNX (RFB-320 + PFLD) e envio de UDP direto para um sketch Java no Processing. Funcionava redondo, mas exigia instalar runtime, configurar drivers de webcam e lidar com dependências locais.

Decidi levar esse experimento 100% para o browser, mantendo o caráter exploratório e a precisão do cálculo facial, mas com zero instalação. Funciona inclusive em celulares, com uma formatação dinâmica otimizada.

Experimente online!

A mecânica no navegador

Tudo roda client-side via MediaPipe Face Mesh acelerado por WebAssembly e WebGL, mapeando os 468 landmarks faciais em tempo real.

Para a detecção do piscar, implementei o cálculo clássico de EAR (Eye Aspect Ratio) de Soukupová & Cech em JavaScript puro, acoplado a uma máquina de estados com histerese configurável (setP_fechar e setP_abrir) via sliders na tela. Isso evita falsos positivos por microoscilações.

O clássico sketch das bolinhas coloridas (Bolinhas_OSC_PISCADAS) virou um módulo em p5.js. A grande sacada arquitetural aqui foi desacoplar a visão computacional da interface visual:

• Em vez de fundir tudo num monólito, a comunicação interna usa BroadcastChannel (com fallback para postMessage).
• Dá para rodar a câmera e o sketch divididos na mesma aba ou abrir as bolinhas em uma janela/monitor pop-up separado — a sincronia continua instantânea.

A Bridge: saindo do DOM para o mundo real

O diferencial mais divertido desse experimento é não deixar os dados presos no ecossistema web. Para plugar o navegador com DAWs, sintetizadores ou ambientes visuais, criei uma bridge leve em Python (websockets + python-osc):

1. O browser envia o stream via WebSocket local.
2. A bridge converte os pacotes e dispara via OSC sobre UDP.
3. Softwares como PureData, Processing, SuperCollider ou Reaper recebem tudo em tempo real na porta configurada (default 12345).

Além do evento discreto /piscou, a aplicação joga um fluxo contínuo a ~30 Hz mapeando:

• /head/angles: pitch, roll e yaw da cabeça em graus
• /eye/open: abertura ocular normalizada
• /mouth/mar: Mouth Aspect Ratio (abertura vertical da boca)
• /brow/raise: elevação das sobrancelhas

Com isso, um simples piscar de olhos ou a inclinação da cabeça vira gatilho de sampler, modulação de filtro de áudio ou controle de câmera 3D — rodando direto do GitHub Pages, com uma pontezinha UDP discreta fazendo o trabalho pesado de integração.

Para obter o código e informações mais detalhadas, acesse o link do projeto no GitHub:

Interfaces_com_Redes_Neurais_e_Expressao_Facial_WEB