📹 RTSP Web Viewer

Una aplicación web moderna para visualizar cámaras RTSP directamente en tu navegador. Convierte streams RTSP a formato HLS para reproducción web compatible.

✨ Características

🎥 Visualización de cámaras RTSP en tiempo real
🌐 Interfaz web responsive y moderna
🔄 Conversión automática RTSP a HLS
📱 Compatible con dispositivos móviles
🎛️ Control de múltiples streams simultáneos
📊 Monitoreo de estado en tiempo real
🔧 Fácil configuración y uso
📝 Registro de actividad detallado

🛠️ Requisitos Previos

Software Requerido

Node.js (versión 14 o superior)

# Verificar instalación
node --version
npm --version

FFmpeg (requerido para conversión de video)

En macOS (con Homebrew):
```
brew install ffmpeg
```
En Ubuntu/Debian:
```
sudo apt update
sudo apt install ffmpeg
```
En Windows:
- Descargar desde https://ffmpeg.org/download.html
- Agregar al PATH del sistema
Verificar FFmpeg:
```
ffmpeg -version
```

🚀 Instalación Rápida

⚡ Instalación con Una Línea (Recomendado)

# Instalar y configurar automáticamente
curl -fsSL https://raw.githubusercontent.com/alehardmode/rtsp-web-viewer/main/install.sh | bash

# O con wget
wget -qO- https://raw.githubusercontent.com/alehardmode/rtsp-web-viewer/main/install.sh | bash

# O especificar directorio personalizado
curl -fsSL https://raw.githubusercontent.com/alehardmode/rtsp-web-viewer/main/install.sh | bash -s mi-proyecto

📦 Instalación con npm (Global)

# Instalar globalmente
npm install -g rtsp-web-viewer

# Configurar y ejecutar
rtsp-web-viewer install
rtsp-web-viewer start

🛠️ Instalación Manual

# 1. Clonar repositorio
git clone https://github.com/alehardmode/rtsp-web-viewer.git
cd rtsp-web-viewer

# 2. Ejecutar instalación automática
chmod +x start.sh
./start.sh

🔧 Instalación Paso a Paso

# 1. Clonar y navegar
git clone https://github.com/alehardmode/rtsp-web-viewer.git
cd rtsp-web-viewer

# 2. Instalar dependencias
npm install

# 3. Verificar seguridad
npm audit

# 4. Crear directorios necesarios
mkdir -p public/streams logs

# 5. Configurar variables de entorno (opcional)
cp .env.example .env

# 6. Iniciar el servidor
npm start

🌐 Acceder a la Aplicación

http://localhost:3000

🎮 Uso

Configuración Básica

Acceder a la interfaz web en http://localhost:3000
Configurar una cámara RTSP:
- URL RTSP: rtsp://usuario:contraseña@ip:puerto/ruta
- ID del Stream: Identificador único (ej: camara-1)

Ejemplos de URLs RTSP:

rtsp://admin:[email protected]:554/stream1
rtsp://admin:[email protected]:554/cam/realmonitor?channel=1&subtype=0
rtsp://user:[email protected]:554/live

Funciones Principales

▶️ Iniciar Stream

Ingresa la URL RTSP de tu cámara
Asigna un ID único al stream
Haz clic en "🎬 Iniciar Stream"
Espera a que el stream se procese (2-5 segundos)

🛑 Detener Stream

Desde la lista de streams activos
O usando el botón "🛑 Detener Stream" del stream actual

📺 Visualizar Video

Haz clic en "📺 Ver" en cualquier stream activo
El video se reproducirá automáticamente
Controles de video estándar disponibles

ℹ️ Información del Stream

Clic en "ℹ️ Info" para ver detalles técnicos
Tiempo de actividad, URLs, estado, etc.

⚙️ Configuración Avanzada

Variables de Entorno

Crear archivo .env en la raíz del proyecto:

# Puerto del servidor
PORT=3000

# Configuración FFmpeg
FFMPEG_PATH=/usr/local/bin/ffmpeg
HLS_SEGMENT_TIME=2
HLS_LIST_SIZE=10

# Configuración de streams
MAX_CONCURRENT_STREAMS=10
STREAM_TIMEOUT=30000

Parámetros FFmpeg

Editar server.js para ajustar calidad y rendimiento:

// Para mejor calidad (más CPU)
'-preset', 'medium',
'-crf', '23',

// Para menor latencia
'-preset', 'ultrafast',
'-tune', 'zerolatency',

// Para menor ancho de banda
'-b:v', '1000k',
'-s', '640x480',

🔧 Solución de Problemas

Problemas Comunes

❌ "FFmpeg no encontrado"

# Verificar instalación
which ffmpeg
ffmpeg -version

# En Windows, verificar PATH
echo %PATH%

❌ "Stream no se reproduce"

Verificar URL RTSP con VLC o similar
Comprobar credenciales de usuario/contraseña
Verificar conectividad de red
Revisar logs del servidor

❌ "Error de conexión RTSP"

Verificar que la cámara esté accesible
Comprobar firewall y puertos
Validar formato de URL RTSP

❌ "Video se reproduce pero con retraso"

Ajustar parámetros HLS (hls_time, hls_list_size)
Usar preset ultrafast en FFmpeg
Reducir resolución si es necesario

Logs y Debugging

Ver logs del servidor:

npm start
# Los logs aparecen en la consola

Logs del navegador:

Abrir DevTools (F12)
Pestaña Console para errores JavaScript
Pestaña Network para problemas de red

URLs RTSP de Prueba

Para testing, puedes usar streams públicos:

# Big Buck Bunny (stream de prueba)
rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov

# Nota: Los streams públicos pueden no estar siempre disponibles

🏗️ Arquitectura del Sistema

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   Cámara RTSP   │───▶│  Servidor Node  │───▶│  Navegador Web  │
│                 │    │                 │    │                 │
│ Stream RTSP     │    │ FFmpeg → HLS    │    │ HLS Player      │
│ H.264/H.265     │    │ Segmentos .ts   │    │ Video HTML5     │
└─────────────────┘    └─────────────────┘    └─────────────────┘

Flujo de Datos

Cliente solicita iniciar stream RTSP
Servidor ejecuta FFmpeg para convertir RTSP → HLS
FFmpeg genera segmentos .ts y playlist .m3u8
Servidor sirve archivos HLS vía HTTP
Cliente reproduce HLS con hls.js

🔒 Consideraciones de Seguridad

Recomendaciones

No exponer directamente a internet sin autenticación
Usar HTTPS en producción
Validar URLs RTSP para evitar ataques
Limitar streams concurrentes para evitar sobrecarga
Implementar autenticación para acceso web

Configuración Segura

// Ejemplo de validación de URL
const allowedHosts = ['192.168.1.0/24', 'camera.local'];
const isAllowedRTSP = (url) => {
    // Implementar validación personalizada
    return allowedHosts.some(host => url.includes(host));
};

📈 Optimización de Rendimiento

Para Múltiples Streams

Usar resoluciones menores para streams secundarios
Limitar FPS según necesidades
Configurar calidad adaptativa
Monitorear uso de CPU/memoria

Configuración Optimizada

// Configuración para múltiples streams
const streamConfig = {
    primary: {
        resolution: '1920x1080',
        bitrate: '2000k',
        fps: 30
    },
    secondary: {
        resolution: '640x480',
        bitrate: '500k',
        fps: 15
    }
};

🤝 Contribuir

Fork el repositorio
Crear rama feature (git checkout -b feature/nueva-funcionalidad)
Commit cambios (git commit -am 'Agregar nueva funcionalidad')
Push a la rama (git push origin feature/nueva-funcionalidad)
Crear Pull Request

📄 Licencia

Este proyecto está bajo la Licencia MIT. Ver archivo LICENSE para más detalles.

🆘 Soporte

Para soporte técnico:

Issues: Crear issue en GitHub
Documentación: Revisar este README
Logs: Incluir logs del servidor y navegador
Entorno: Especificar OS, Node.js, FFmpeg versions

🚧 Roadmap

Próximas Funcionalidades

Versiones

v1.0.0: Funcionalidad básica RTSP → HLS
v1.1.0: Interfaz web mejorada
v1.2.0: Múltiples streams simultáneos
v2.0.0: Autenticación y seguridad (planned)

🧪 Probar la Aplicación

🎯 Comandos CLI (si instalaste globalmente)

# Comando principal
rtsp-web-viewer --help

# Inicio rápido
rtsp-web-viewer start

# Demo interactivo
rtsp-web-viewer demo

# Ejecutar pruebas
rtsp-web-viewer test

# Ver estado
rtsp-web-viewer status

🧪 Pruebas Automáticas

# Ejecutar suite completa de pruebas
./test.sh

# Ver resultados detallados
cat test-results.log

# O con CLI global
rtsp-web-viewer test

🎬 Demostración Interactiva

# Configurar demo con streams de ejemplo
./demo.sh

# O con CLI global
rtsp-web-viewer demo

# Seguir las instrucciones en pantalla

Pruebas Manuales Rápidas

1. Verificar Servidor

# Verificar que el servidor responde
curl http://localhost:3000

# Verificar API
curl http://localhost:3000/api/streams

2. Probar con Stream de Ejemplo

# Iniciar stream de prueba
curl -X POST http://localhost:3000/api/stream/start \
  -H "Content-Type: application/json" \
  -d '{
    "rtspUrl": "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov",
    "streamId": "test-stream"
  }'

# Verificar stream activo
curl http://localhost:3000/api/streams

# Ver en navegador: http://localhost:3000
# Hacer clic en "📺 Ver" para reproducir

3. Probar Validación de Seguridad

# Probar URL inválida (debería fallar)
curl -X POST http://localhost:3000/api/stream/start \
  -H "Content-Type: application/json" \
  -d '{"rtspUrl":"http://invalid.com","streamId":"test"}'

# Respuesta esperada: {"error":"Only RTSP protocol is allowed"}

URLs RTSP de Prueba

Si no tienes cámaras físicas, usa estos streams públicos:

# Big Buck Bunny (video de prueba)
rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov

# Sintel Trailer  
rtsp://wowzaec2demo.streamlock.net/vod/mp4:sintel_trailer-480p.mp4

Troubleshooting Rápido

# Si el servidor no inicia
npm audit fix
npm install

# Si FFmpeg no funciona
which ffmpeg
ffmpeg -version

# Si hay problemas de puerto
PORT=3001 npm start

📥 Métodos de Instalación Disponibles

Método	Comando	Descripción
Una línea	`curl -fsSL https://raw.githubusercontent.com/alehardmode/rtsp-web-viewer/main/install.sh \| bash`	Instalación completamente automática
npm global	`npm install -g rtsp-web-viewer && rtsp-web-viewer install`	Instalar como comando global
Git clone	`git clone https://github.com/alehardmode/rtsp-web-viewer.git`	Clonar repositorio manualmente
ZIP download	Descargar desde GitHub	Descargar archivo ZIP del repositorio

Para guía completa de pruebas, consulta: TESTING_GUIDE.md

⭐ ¡Si este proyecto te resulta útil, considera darle una estrella! ⭐

Name		Name	Last commit message	Last commit date
Latest commit History 14 Commits
bin		bin
logs		logs
public		public
.env.example		.env.example
.gitignore		.gitignore
CAMERAS.md		CAMERAS.md
DEPENDENCY_ANALYSIS.md		DEPENDENCY_ANALYSIS.md
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
TESTING_GUIDE.md		TESTING_GUIDE.md
demo.sh		demo.sh
install.sh		install.sh
package-lock.json		package-lock.json
package.json		package.json
server.js		server.js
start.sh		start.sh
test.sh		test.sh

License

alehardmode/rtsp-web-viewer

Folders and files

Latest commit

History

Repository files navigation

📹 RTSP Web Viewer

✨ Características

🛠️ Requisitos Previos

Software Requerido

🚀 Instalación Rápida

⚡ Instalación con Una Línea (Recomendado)

📦 Instalación con npm (Global)

🛠️ Instalación Manual

🔧 Instalación Paso a Paso

🌐 Acceder a la Aplicación

🎮 Uso

Configuración Básica

Funciones Principales

▶️ Iniciar Stream

🛑 Detener Stream

📺 Visualizar Video

ℹ️ Información del Stream

⚙️ Configuración Avanzada

Variables de Entorno

Parámetros FFmpeg

🔧 Solución de Problemas

Problemas Comunes

❌ "FFmpeg no encontrado"

❌ "Stream no se reproduce"

❌ "Error de conexión RTSP"

❌ "Video se reproduce pero con retraso"

Logs y Debugging

Ver logs del servidor:

Logs del navegador:

URLs RTSP de Prueba

🏗️ Arquitectura del Sistema

Flujo de Datos

🔒 Consideraciones de Seguridad

Recomendaciones

Configuración Segura

📈 Optimización de Rendimiento

Para Múltiples Streams

Configuración Optimizada

🤝 Contribuir

📄 Licencia

🆘 Soporte

🚧 Roadmap

Próximas Funcionalidades

Versiones

🧪 Probar la Aplicación

🎯 Comandos CLI (si instalaste globalmente)

🧪 Pruebas Automáticas

🎬 Demostración Interactiva

Pruebas Manuales Rápidas

1. Verificar Servidor

2. Probar con Stream de Ejemplo

3. Probar Validación de Seguridad

URLs RTSP de Prueba

Troubleshooting Rápido

📥 Métodos de Instalación Disponibles

About

Topics

Resources

License

Security policy

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages