Volver a proyectos
Procesamiento de fotos en tiempo real para eventos

Plataforma de Fotomatón

Desafío

Una empresa de alquiler de fotomatones operaba un MVP en PHP y HTML/JS sin framework, sin carga de imágenes en tiempo real y con un rendimiento inadecuado para eventos con alto volumen de fotografías. Las fotos recién tomadas no se mostraban en tiempo real, el código no era mantenible y al frontend le faltaba la reactividad necesaria para una experiencia fluida.

Solución

Reescribí la plataforma con un backend Laravel y frontend Vue.js. Un script Node.js escaneaba continuamente el disco de destino en busca de nuevas imágenes capturadas mediante una tarjeta SD con WiFi. Al detectarlas, notificaba al backend Laravel, que procesaba cada imagen — generando miniaturas para previsualización rápida y versiones con overlay para selección. Tras elegir foto y overlay, Laravel generaba la imagen final en resolución completa y enviaba un comando de impresión PHP directamente a la impresora conectada. El frontend recibía actualizaciones en tiempo real vía WebSocket, mostrando nuevas fotos al instante sin recargas manuales.

Resultado

La plataforma reemplazó un MVP frágil con una aplicación robusta y mantenible capaz de gestionar eventos de alto volumen. La entrega de imágenes en tiempo real y el despacho inmediato de impresión ofrecieron una experiencia fluida a operadores e invitados. El stack Laravel/Vue proporcionó una base limpia para desarrollo futuro.

Desarrollado con

Vue.jsLaravelNode.jsWebSocketsPHP

Descripción del Proyecto

Este proyecto consistió en reconstruir desde cero una plataforma de software para fotomatón para una empresa que alquila fotomatones — incluyendo hardware, personal, overlays personalizados y software — para eventos corporativos y ocasiones en vivo. El MVP existente apenas cumplía los requisitos mínimos y no era apto para uso real en eventos de alto volumen.

Funcionalidades

  • Script Node.js que detecta nuevas imágenes de una tarjeta SD con WiFi en tiempo real
  • Backend Laravel para ingesta de imágenes, generación de miniaturas y composición de overlays
  • Notificaciones WebSocket que envían nuevas imágenes al frontend Vue al instante
  • Selección de overlay con previsualización renderizada en el backend (resolución optimizada)
  • Generación de imagen en resolución completa con overlay seleccionado al confirmar
  • Comando de impresión PHP enviado desde Laravel a la impresora del evento

Aspectos Técnicos

El reto principal era lograr reactividad en tiempo real sin polling. La combinación de un file watcher en Node.js y un broadcaster WebSocket en Laravel mantenía el frontend siempre actualizado en el momento en que una foto llegaba al disco. La generación de miniaturas en el backend era esencial para mantener el frontend ágil — cargar imágenes en resolución completa en un evento en vivo habría causado retrasos notables. El stack Laravel/Vue reemplazó una base de código PHP/JS difícil de mantener con una aplicación limpia y estructurada lista para futuras extensiones.

Ponte en contacto

Construyamos algo genial, escríbeme un mensaje:

O conéctate a través de redes sociales