Un dashboard de monitoreo de video profesional basado en web (HTML5/JS) diseñado para visualizar múltiples transmisiones de YouTube Live simultáneamente. Optimizado para pantallas Full HD (1920x1080) con una arquitectura de grilla responsive y controles avanzados de operador.
- Matriz 1+12: Un video principal de gran tamaño y 12 videos secundarios de monitoreo.
- Gestión de Audio Exclusivo: Solo una fuente de audio activa a la vez para evitar caos sonoro.
- Modo Patrulla (Auto-Scan): Rotación automática de foco y audio cada 10 segundos para vigilancia manos libres.
- Hot-Swap (Intercambio Rápido):
Shift + Clicktrae cualquier video secundario al cuadrante principal instantáneamente. - Botón de Pánico: Recarga individual de streams congelados sin refrescar toda la página.
- Bypass de Políticas de Autoplay: Sistema de inicio manual para cumplir con las normas de audio de los navegadores modernos.
| Acción | Comando | Descripción |
|---|---|---|
| Escuchar Video | Ctrl + Click |
Activa el audio de ese video y silencia el resto. |
| Pantalla Completa | Doble Click |
Maximiza el video seleccionado. |
| Traer al Frente | Shift + Click |
Intercambia el video seleccionado con el principal (Swap). |
| Recargar Stream | Click en ↻ |
Botón en la esquina superior derecha de cada video (hover). |
| Modo Patrulla | Botón en UI |
Activa/Desactiva la rotación automática. |
Este proyecto no requiere servidor backend ni dependencias de Node.js.
- Clona el repositorio:
git clone [https://github.com/cirotron/youtube-video-wall.git](https://github.com/cirotron/youtube-video-wall.git)
- Abre el archivo
index.htmlen tu navegador web favorito. - Haz click en "ACTIVAR SISTEMA".
Para cambiar los canales o videos de YouTube:
- Abre el archivo
script.js. - Busca el array
videoIdsal inicio del archivo. - Reemplaza los IDs (la parte alfanumérica después de
v=en la URL de YouTube).
const videoIds = [
"ID_PRINCIPAL", // Cuadrante 1
"ID_VIDEO_2",
"ID_VIDEO_3",
// ... hasta 13 videos
];