RTSP Web Player

Una aplicación web moderna para reproducir múltiples streams RTSP simultáneamente en tu navegador.

Características

✅ Conversión RTSP integrada - Backend Node.js con FFmpeg para convertir RTSP a HLS en runtime
✅ Descubrimiento automático de cámaras - Detecta cámaras ONVIF, Tapo y Yi Cams en tu red local
✅ Reproduce múltiples cámaras simultáneamente
✅ Soporte para HLS, MJPEG y WebRTC
✅ Almacenamiento automático en localStorage
✅ Diseño responsive con grid personalizable (1, 2 o 3 columnas)
✅ Interfaz moderna y oscura con Tailwind CSS
✅ Agregar/eliminar cámaras fácilmente
✅ TypeScript para mayor seguridad de tipos
✅ API REST para gestión de streams y descubrimiento

Instalación

Requisitos Previos

Node.js 18+ (para el backend)
FFmpeg (para conversión RTSP a HLS)

Instalar FFmpeg

Linux (Ubuntu/Debian):

sudo apt update
sudo apt install ffmpeg

macOS:

brew install ffmpeg

Windows: Descarga desde ffmpeg.org y agrega al PATH.

Instalación Rápida

# Instalar todas las dependencias (frontend + backend)
npm run setup

# O manualmente:
npm install                    # Frontend
npm run server:install         # Backend

Iniciar la Aplicación

Necesitas ejecutar dos terminales simultáneamente:

Terminal 1 - Backend (servidor de conversión RTSP):

npm run server

Terminal 2 - Frontend (interfaz web):

npm run dev

Ahora abre tu navegador en http://localhost:5173

Uso

Método 1: Descubrimiento Automático (Nuevo)

Iniciar la aplicación: Ejecuta npm run dev y npm run server
Descubrir cámaras: Haz clic en el botón "Descubrir Cámaras" en el header
Iniciar búsqueda: Haz clic en "Iniciar Descubrimiento"
Seleccionar cámara: Elige una de las cámaras encontradas
Autenticar: Ingresa usuario y contraseña de la cámara
Conectar: La cámara se agregará automáticamente

Ver CAMERA_DISCOVERY.md para más detalles sobre el descubrimiento automático.

Método 2: Manual

Iniciar la aplicación: Ejecuta npm run dev y npm run server
Agregar cámara: Haz clic en el botón + flotante
Configurar cámara:
- Nombre: Un nombre descriptivo para tu cámara
- URL: La URL del stream (ver sección de configuración RTSP)
- Tipo: Selecciona el tipo de stream (HLS, RTSP, MJPEG, WebRTC)
Gestionar vista: Usa los botones de grid en la parte superior para cambiar el layout

Configuración RTSP

Los navegadores web NO pueden reproducir streams RTSP directamente. Esta aplicación incluye un backend integrado que convierte automáticamente tus streams RTSP a HLS usando FFmpeg.

⭐ Opción 1: Backend Integrado (Recomendado)

La forma más fácil de usar streams RTSP es con el backend integrado:

Inicia el backend (si no lo has hecho):
```
npm run server
```
Agrega tu cámara RTSP en la interfaz web:
- URL: rtsp://usuario:password@192.168.1.100:554/stream
- La conversión a HLS se hará automáticamente
- El checkbox "Convertir automáticamente usando el backend" debe estar marcado
¡Listo! El backend convertirá el stream en tiempo real

Cómo Funciona

Tu Cámara RTSP → Backend (FFmpeg) → Conversión HLS → Navegador

El backend:

Recibe la URL RTSP de tu cámara
Usa FFmpeg para convertir a HLS en tiempo real
Sirve los archivos HLS (.m3u8 y .ts)
El frontend los reproduce automáticamente

API del Backend

El backend expone una API REST en http://localhost:3001:

Iniciar stream:

curl -X POST http://localhost:3001/api/streams \
  -H "Content-Type: application/json" \
  -d '{"id":"cam1","rtspUrl":"rtsp://..."}'

Listar streams activos:

curl http://localhost:3001/api/streams

Detener stream:

curl -X DELETE http://localhost:3001/api/streams/cam1

Health check:

curl http://localhost:3001/api/health

Opción 2: FFmpeg Manual + HLS

Convierte tu stream RTSP a HLS usando FFmpeg:

ffmpeg -rtsp_transport tcp -i rtsp://usuario:password@192.168.1.100:554/stream \
  -c:v copy -c:a copy -f hls -hls_time 2 -hls_list_size 3 \
  -hls_flags delete_segments stream.m3u8

Luego sirve los archivos con un servidor HTTP simple:

# Con Python
python -m http.server 8080

# Con Node.js
npx serve .

Usa la URL: http://localhost:8080/stream.m3u8

Opción 3: MediaMTX

MediaMTX es un servidor de streaming que convierte RTSP a HLS/WebRTC automáticamente.

# Descargar y ejecutar MediaMTX
wget https://github.com/bluenviron/mediamtx/releases/latest/download/mediamtx_linux_amd64.tar.gz
tar -xzf mediamtx_linux_amd64.tar.gz
./mediamtx

Configuración básica en mediamtx.yml:

paths:
  cam1:
    source: rtsp://usuario:password@192.168.1.100:554/stream

URL para usar: http://localhost:8889/cam1/index.m3u8

Opción 4: go2rtc

go2rtc soporta múltiples protocolos y es muy eficiente.

# Instalar go2rtc
docker run -p 1984:1984 -p 8554:8554 alexxit/go2rtc

Configurar en go2rtc.yaml:

streams:
  camera1: rtsp://usuario:password@192.168.1.100:554/stream

URL para WebRTC: http://localhost:1984/

Opción 5: Cámaras IP con MJPEG

Algunas cámaras IP soportan MJPEG directamente:

http://192.168.1.100/video.cgi
http://192.168.1.100/videostream.cgi

Formatos Soportados

Formato	Extensión	Descripción	Latencia
HLS	.m3u8	HTTP Live Streaming (más compatible)	Media (5-10s)
MJPEG	.mjpeg, .cgi	Motion JPEG sobre HTTP	Baja (< 1s)
WebRTC	N/A	Streaming en tiempo real	Muy baja (< 500ms)
RTSP	rtsp://	Requiere conversión a HLS/WebRTC	N/A

Ejemplos de URLs

// HLS desde servidor local
http://localhost:8080/camera1/stream.m3u8

// MJPEG desde cámara IP
http://192.168.1.100/videostream.cgi

// HLS desde MediaMTX
http://localhost:8889/cam1/index.m3u8

// Big Buck Bunny (demo HLS)
https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8

Estructura del Proyecto

rtsp-web-player/
├── src/                           # Frontend (React + TypeScript)
│   ├── components/
│   │   ├── VideoPlayer.tsx       # Componente de reproductor individual
│   │   ├── AddCameraForm.tsx     # Formulario para agregar cámaras
│   │   └── CameraDiscovery.tsx   # Componente de descubrimiento
│   ├── hooks/
│   │   └── useLocalStorage.ts    # Hook para persistencia
│   ├── types.ts                  # Tipos TypeScript
│   ├── App.tsx                   # Componente principal
│   └── main.tsx                  # Punto de entrada
├── server/                        # Backend (Node.js + Express)
│   ├── index.js                  # Servidor Express + API REST
│   ├── streamManager.js          # Gestor de conversión RTSP → HLS
│   ├── cameraDiscovery.js        # Módulo de descubrimiento de cámaras
│   ├── streams/                  # Archivos HLS generados (auto-creado)
│   └── package.json              # Dependencias del backend
├── CAMERA_DISCOVERY.md            # Documentación de descubrimiento
├── package.json                   # Dependencias del frontend
├── tsconfig.json
└── tailwind.config.js

Scripts Disponibles

# Instalación
npm run setup              # Instala dependencias del frontend y backend

# Desarrollo
npm run dev                # Inicia servidor de desarrollo (frontend)
npm run server             # Inicia backend de conversión RTSP
npm run server:install     # Instala solo dependencias del backend

# Producción
npm run build              # Construye para producción
npm run preview            # Preview de build de producción

# Linting
npm run lint               # Ejecuta ESLint

Tecnologías Utilizadas

Frontend

React 18 - Librería UI
TypeScript - Lenguaje tipado
Vite - Build tool y dev server
Tailwind CSS - Framework CSS utility-first
HLS.js - Reproductor HLS para navegadores
Lucide React - Iconos modernos

Backend

Node.js - Runtime JavaScript
Express - Framework web minimalista
FFmpeg - Conversión de video RTSP → HLS
fluent-ffmpeg - Wrapper de FFmpeg para Node.js
node-onvif - Descubrimiento y control de cámaras ONVIF
tp-link-tapo-connect - API para dispositivos Tapo
CORS - Manejo de CORS para API REST

Solución de Problemas

Error: "HLS no soportado en este navegador"

Asegúrate de usar un navegador moderno (Chrome, Firefox, Edge)
Safari tiene soporte nativo para HLS

El video no se carga

Verifica que el backend esté corriendo:
```
npm run server
```
Deberías ver: ✅ Servidor corriendo en: http://localhost:3001
Verifica FFmpeg:
```
ffmpeg -version
```
Si no está instalado, instálalo según tu sistema operativo.
Verifica la URL RTSP:
- Asegúrate de que la cámara sea accesible en tu red
- Prueba la URL con VLC o similar primero
- Formato: rtsp://usuario:password@IP:puerto/stream
Revisa los logs:
- Consola del navegador (F12)
- Terminal donde corre el backend
Verifica CORS:
- El backend ya incluye CORS habilitado
- Si usas otro servidor, configura CORS adecuadamente

Alta latencia en el stream

Usa WebRTC para menor latencia
Reduce el hls_time en FFmpeg (ej: -hls_time 1)
Considera usar go2rtc con WebRTC

CORS errors

Si estás sirviendo HLS desde otro dominio, necesitas configurar CORS:

// Ejemplo con Express
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

Seguridad

Las URLs con credenciales se almacenan en localStorage del navegador
No expongas esta aplicación públicamente sin autenticación
Usa HTTPS en producción
Considera usar variables de entorno para credenciales

Roadmap

Contribuir

Las contribuciones son bienvenidas! Por favor:

Fork el proyecto
Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
Commit tus cambios (git commit -m 'Add some AmazingFeature')
Push a la rama (git push origin feature/AmazingFeature)
Abre un Pull Request

Licencia

MIT License - ve el archivo LICENSE para más detalles.

Soporte

¿Tienes preguntas o problemas?

Abre un issue en GitHub
Revisa la sección de Solución de Problemas

Hecho con ❤️ usando React + TypeScript + Tailwind CSS

Name		Name	Last commit message	Last commit date
Latest commit History 13 Commits
electron		electron
public		public
server		server
src		src
.gitignore		.gitignore
CAMERA_DISCOVERY.md		CAMERA_DISCOVERY.md
ELECTRON_README.md		ELECTRON_README.md
QUICK_START.md		QUICK_START.md
README.md		README.md
bun.lock		bun.lock
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

Folders and files

Latest commit

History

Repository files navigation

RTSP Web Player

Características

Instalación

Requisitos Previos

Instalar FFmpeg

Instalación Rápida

Iniciar la Aplicación

Uso

Método 1: Descubrimiento Automático (Nuevo)

Método 2: Manual

Configuración RTSP

⭐ Opción 1: Backend Integrado (Recomendado)

Cómo Funciona

API del Backend

Opción 2: FFmpeg Manual + HLS

Opción 3: MediaMTX

Opción 4: go2rtc

Opción 5: Cámaras IP con MJPEG

Formatos Soportados

Ejemplos de URLs

Estructura del Proyecto

Scripts Disponibles

Tecnologías Utilizadas

Frontend

Backend

Solución de Problemas

Error: "HLS no soportado en este navegador"

El video no se carga

Alta latencia en el stream

CORS errors

Seguridad

Roadmap

Contribuir

Licencia

Soporte

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages