Dark Mode

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

No-Country-simulation/EleVideo

Repository files navigation

Plataforma inteligente de procesamiento de video
Convierte videos horizontales a formato vertical 9:16 con deteccion de rostros, reencuadre inteligente y multiples modos de procesamiento para TikTok, Instagram Reels y YouTube Shorts.


Tabla de contenidos

  • ?Que es Elevideo?
  • Arquitectura del sistema
  • Demos y deploys
  • Repositorios del proyecto
  • Stack tecnologico
  • El equipo

?Que es Elevideo?

Elevideo es una plataforma web que permite a creadores de contenido transformar sus videos horizontales en clips verticales listos para publicar en redes sociales, sin necesidad de editar manualmente.

El sistema detecta automaticamente los rostros en el video, calcula el encuadre optimo en cada fotograma y aplica estabilizacion cinematografica para generar un resultado fluido y profesional.

Funcionalidades principales

  • Proyectos -- Organiza tus videos en proyectos independientes
  • Subida de videos -- Upload directo a Cloudinary con metadatos automaticos
  • Tres modos de procesamiento:
    • vertical -- Convierte el video completo a 9:16
    • short_auto -- Selecciona automaticamente el mejor segmento
    • short_manual -- Tu decides el segmento de inicio y duracion
  • Seguimiento en tiempo real -- Consulta el progreso de cada job mediante polling
  • Fondos personalizables -- Smart crop, fondo difuminado o fondo negro
  • Galeria de resultados -- Accede a todos tus videos procesados con sus URLs de descarga
  • Notificaciones por email -- Recibe un aviso cuando tu video esta listo

Arquitectura del sistema

Elevideo esta compuesto por tres servicios independientes que se comunican entre si:

+---------------------------------------------------------+
| Usuario / Browser |
+---------------------------+-----------------------------+
| HTTPS
V
+---------------------------------------------------------+
| Frontend (React + Tailwind CSS) |
| elevideo.vercel.app |
+---------------------------+-----------------------------+
| REST API + JWT
V
+---------------------------------------------------------+
| Backend Spring Boot (Monolito Modular) |
| elevideo-ec.onrender.com |
| |
| auth | user | project | video | processing | notif. |
+--------------+-----------------------+------------------+
| HTTP + JWT delegado | Webhooks
| | (X-Service-Key)
V |
+--------------------------+ |
| Microservicio Python |-----------+
| FastAPI + MediaPipe |
| (solo local ) |
+--------------------------+

Flujo de procesamiento

  1. El usuario sube un video desde el frontend - se almacena en Cloudinary
  2. Crea un job de procesamiento - Spring Boot registra el job y llama al microservicio Python
  3. Python descarga el video, aplica deteccion de rostros con MediaPipe, estabilizacion cinematografica y encoding con FFmpeg
  4. El resultado se sube a Cloudinary y Python notifica a Spring Boot via webhook
  5. Spring Boot actualiza el job y guarda la rendition con las URLs de descarga
  6. El usuario recibe un notificacion en su navegagador y puede ver el resultado en su galeria de videos procesados

Demos y deploys

Servicio URL Estado
Frontend elevideo.vercel.app Desplegado
Backend API (Swagger) elevideo-ec.onrender.com/swagger-ui/index.html Desplegado
Microservicio Python -- Solo local

?Por que el microservicio Python no esta desplegado?
El procesamiento de video con MediaPipe, OpenCV y FFmpeg es una tarea intensiva en CPU y memoria RAM. Los planes gratuitos de plataformas como Render o Railway no ofrecen los recursos suficientes para ejecutarlo de forma estable. Para usarlo es necesario correrlo localmente o en un servidor propio con recursos adecuados.


Estructura del repositorio

elevideo/
+-- backend/ - API REST Spring Boot (monolito modular)
+-- frontend/ - Interfaz de usuario React.js
+-- video-processor/ - Microservicio de procesamiento Python FastAPI

Cada servicio tiene su propio README con instrucciones detalladas de instalacion y configuracion:


Stack tecnologico

Backend -- Spring Boot

Tecnologia Version Uso
Java 17 Lenguaje principal
Spring Boot 3.5.11 Framework REST
Spring Modulith 2.0.3 Arquitectura de monolito modular
Spring Security + JJWT 0.12.5 Autenticacion JWT
PostgreSQL -- Base de datos relacional
Spring Data JPA -- Persistencia
MapStruct 1.6.3 Mapeo de objetos
Cloudinary SDK 1.39.0 Almacenamiento de video
Thymeleaf + Resend -- Emails transaccionales
SpringDoc OpenAPI 2.8.15 Documentacion Swagger

Frontend -- React

Tecnologia Uso
React.js (JS ES6+) Interfaz de usuario reactiva
Tailwind CSS Estilos utilitarios
CRACO Configuracion personalizada sin eject
PostCSS Procesamiento de CSS

Microservicio Python -- FastAPI

Tecnologia Uso
Python 3.11+ Lenguaje principal
FastAPI Framework REST asincrono
MediaPipe Deteccion de rostros
OpenCV Procesamiento de fotogramas
FFmpeg Encoding y filtros de video
NumPy Calculos de estabilizacion
Cloudinary SDK Subida del video procesado

El Equipo

Este proyecto fue desarrollado por un equipo multidisciplinar en el marco de una simulacion laboral de No Country.

Rol Nombre LinkedIn GitHub
Project Manager David H. Caycedo Blum
Frontend Developer Jhorman Nieto
Backend Developer Edgar Ulises Camberos Arreola
Backend Developer Eduin Pino
Backend Developer Lisandro Sanchez Morales

Desarrollado con en No Country

About

S02 26 Equipo 16 Web App Development

Resources

Readme

Stars

Watchers

Forks

Releases

No releases published

Packages

Contributors