¿Y si una página web no necesitara mouse ni teclado?
Construí una interfaz web que se controla completamente con la voz y los gestos de las manos, usando solo APIs del navegador y bibliotecas de visión por computadora.
👉 Demo en vivo
Las 3 capas de interacción
🗣️ Capa 1: Control por voz bidireccional
Usando Web Speech API, el usuario habla y el sistema:
Escucha (Speech Recognition) — convierte voz a texto en tiempo real
Entiende — parsea comandos naturales ("muestra el mapa", "gira la tierra")
Responde (Speech Synthesis / TTS) — el sistema contesta con voz propia
const recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.lang = 'es-CO';
recognition.onresult = (event) => {
const command = event.results[event.resultIndex][0].transcript;
processVoiceCommand(command);
speak(Entendido: ${command});
};
No es un "Ok Google" genérico — es un copiloto de navegación que entiende el contexto de la página.
✋ Capa 2: Navegación gestual con MediaPipe
MediaPipe rastrea las manos del usuario a través de la cámara del dispositivo:
Mano abierta → scroll
Puño cerrado → click
Gesto de pinza → zoom
Swipe → cambiar sección
Todo sin tocar el dispositivo. La latencia es mínima porque MediaPipe corre en WebGL.
🌍 Capa 3: Globo terráqueo 3D
Un globo interactivo construido con Three.js que:
Visualiza datos geolocalizados en tiempo real
Responde a gestos de rotación y zoom
Se puede controlar por voz ("muestra Colombia", "gira a la derecha")
Backend: Firebase + IA conversacional
Firebase Auth — autenticación robusta
Firestore — estados y preferencias del usuario
Motor de IA conversacional — procesa intenciones del usuario y genera respuestas contextuales con voz
El reto técnico más difícil
Sincronizar las 3 capas sin que se pisen:
Voz dice "gira" ──┐
├──▶ Command Router ──▶ Three.js rotation
Gesto dice "swipe" ──┘
Si el usuario habla y gesticula al mismo tiempo, el sistema necesita priorizar y desambiguar. Implementé un router de comandos con cola de prioridad:
Voz directa > Gesto > Voz ambiental
Cooldown entre comandos para evitar spam
¿Para qué sirve?
Accesibilidad: personas con movilidad reducida pueden navegar la web con voz
Presentaciones: controla tu demo sin tocar el computador
Educación: los estudiantes interactúan sin necesidad de mouse
Kioscos interactivos: pantallas públicas sin contacto
Tecnologías
Componente Tecnología
Voz Web Speech API (Recognition + Synthesis)
Gestos MediaPipe Hands
3D Three.js
Auth Firebase
IA Motor conversacional custom
Frontend HTML5, CSS3, JavaScript vanilla
Lo que aprendí
MediaPipe en el browser es viable para producción — la latencia es aceptable en dispositivos modernos
Web Speech API varía mucho entre browsers — Chrome es el rey, Firefox todavía no soporta todo
Three.js + controles custom > OrbitControls cuando necesitas input no convencional
La accesibilidad no es un feature opcional — es una oportunidad de innovación
Soy Juan Esteban Bustos, desarrollador de software en Neiva, Huila, Colombia 🇨🇴
👉 Portafolio: juanex.pages.dev 👉 GitHub: @juanitogit
Top comments (0)