Init commit

2026-03-17 17:22:25 +01:00
parent 3c6a5e4cdb
commit 2ae32f8914
5 changed files with 1390 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+.env
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "pollets-streaming",
+  "version": "1.0.0",
+  "description": "Servidor de streaming RTMP para pollets.com.es",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js",
+    "dev": "node server.js"
+  },
+  "dependencies": {
+    "node-media-server": "^2.6.4",
+    "express": "^4.18.2"
+  }
+}
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,265 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pollets - Directo</title>
+    <script src="https://cdn.jsdelivr.net/npm/flv.js@1.6.2/dist/flv.min.js"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            min-height: 100vh;
+            color: #fff;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        header {
+            text-align: center;
+            padding: 30px 0;
+        }
+
+        h1 {
+            font-size: 2.5rem;
+            margin-bottom: 10px;
+            background: linear-gradient(90deg, #ff6b6b, #feca57);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .live-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            background: #e74c3c;
+            padding: 8px 16px;
+            border-radius: 20px;
+            font-weight: bold;
+            font-size: 0.9rem;
+            animation: pulse 2s infinite;
+        }
+
+        .live-badge::before {
+            content: '';
+            width: 10px;
+            height: 10px;
+            background: #fff;
+            border-radius: 50%;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.7; }
+        }
+
+        .video-container {
+            background: #000;
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+            margin: 20px 0;
+        }
+
+        #videoPlayer {
+            width: 100%;
+            aspect-ratio: 16/9;
+            background: #000;
+        }
+
+        .controls {
+            display: flex;
+            gap: 10px;
+            justify-content: center;
+            padding: 20px;
+            flex-wrap: wrap;
+        }
+
+        button {
+            padding: 12px 24px;
+            border: none;
+            border-radius: 8px;
+            font-size: 1rem;
+            cursor: pointer;
+            transition: transform 0.2s, box-shadow 0.2s;
+            font-weight: 600;
+        }
+
+        button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
+        }
+
+        .btn-primary {
+            background: linear-gradient(90deg, #00b894, #00cec9);
+            color: #fff;
+        }
+
+        .btn-danger {
+            background: linear-gradient(90deg, #e74c3c, #c0392b);
+            color: #fff;
+        }
+
+        .status {
+            text-align: center;
+            padding: 20px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 8px;
+            margin-top: 20px;
+        }
+
+        .status-indicator {
+            display: inline-block;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            margin-right: 8px;
+        }
+
+        .status-indicator.offline {
+            background: #e74c3c;
+        }
+
+        .status-indicator.online {
+            background: #2ecc71;
+            animation: pulse 1s infinite;
+        }
+
+        .offline-message {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            min-height: 300px;
+            color: #888;
+        }
+
+        .offline-message svg {
+            width: 80px;
+            height: 80px;
+            margin-bottom: 20px;
+            opacity: 0.5;
+        }
+
+        footer {
+            text-align: center;
+            padding: 30px;
+            color: #888;
+            font-size: 0.9rem;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>🐔 Pollets en Directo</h1>
+            <span class="live-badge" id="liveBadge" style="display: none;">EN DIRECTO</span>
+        </header>
+
+        <div class="video-container">
+            <video id="videoPlayer" controls autoplay muted></video>
+        </div>
+
+        <div class="controls">
+            <button class="btn-primary" onclick="conectar()">▶️ Conectar</button>
+            <button class="btn-danger" onclick="desconectar()">⏹️ Desconectar</button>
+        </div>
+
+        <div class="status">
+            <span class="status-indicator offline" id="statusIndicator"></span>
+            <span id="statusText">Sin conexión - Pulsa "Conectar" para ver el directo</span>
+        </div>
+
+        <footer>
+            <p>Proyecto escolar - pollets.com.es</p>
+        </footer>
+    </div>
+
+    <script>
+        let flvPlayer = null;
+        const videoElement = document.getElementById('videoPlayer');
+        const statusIndicator = document.getElementById('statusIndicator');
+        const statusText = document.getElementById('statusText');
+        const liveBadge = document.getElementById('liveBadge');
+
+        // Configuración del stream
+        // En desarrollo: localhost
+        // En producción: cambiar a pollets.com.es
+        const STREAM_URL = 'http://localhost:8000/live/pollets.flv';
+
+        function conectar() {
+            if (flvjs.isSupported()) {
+                if (flvPlayer) {
+                    desconectar();
+                }
+
+                flvPlayer = flvjs.createPlayer({
+                    type: 'flv',
+                    url: STREAM_URL,
+                    isLive: true,
+                    hasAudio: true,
+                    hasVideo: true,
+                    enableStashBuffer: false,
+                    stashInitialSize: 128
+                }, {
+                    enableWorker: false,
+                    lazyLoadMaxDuration: 3 * 60,
+                    seekType: 'range'
+                });
+
+                flvPlayer.attachMediaElement(videoElement);
+                flvPlayer.load();
+                flvPlayer.play();
+
+                flvPlayer.on(flvjs.Events.ERROR, (errorType, errorDetail) => {
+                    console.error('Error:', errorType, errorDetail);
+                    actualizarEstado(false, 'Error de conexión - ¿Está el stream activo?');
+                });
+
+                flvPlayer.on(flvjs.Events.LOADING_COMPLETE, () => {
+                    actualizarEstado(false, 'Stream finalizado');
+                });
+
+                actualizarEstado(true, 'Conectado al directo');
+                
+            } else {
+                alert('Tu navegador no soporta FLV. Prueba con Chrome o Firefox.');
+            }
+        }
+
+        function desconectar() {
+            if (flvPlayer) {
+                flvPlayer.pause();
+                flvPlayer.unload();
+                flvPlayer.detachMediaElement();
+                flvPlayer.destroy();
+                flvPlayer = null;
+            }
+            actualizarEstado(false, 'Desconectado');
+        }
+
+        function actualizarEstado(online, mensaje) {
+            statusIndicator.className = 'status-indicator ' + (online ? 'online' : 'offline');
+            statusText.textContent = mensaje;
+            liveBadge.style.display = online ? 'inline-flex' : 'none';
+        }
+
+        // Intentar conectar automáticamente al cargar
+        window.onload = () => {
+            setTimeout(conectar, 1000);
+        };
+    </script>
+</body>
+</html>
--- a/server.js
+++ b/server.js
@@ -0,0 +1,101 @@
+const NodeMediaServer = require('node-media-server');
+const express = require('express');
+const path = require('path');
+
+// Configuración del servidor RTMP
+const config = {
+  rtmp: {
+    port: 1935,
+    chunk_size: 60000,
+    gop_cache: true,
+    ping: 30,
+    ping_timeout: 60
+  },
+  http: {
+    port: 8000,
+    mediaroot: './media',
+    allow_origin: '*'
+  },
+  trans: {
+    ffmpeg: 'ffmpeg',
+    tasks: [
+      {
+        app: 'live',
+        hls: true,
+        hlsFlags: '[hls_time=2:hls_list_size=3:hls_flags=delete_segments]',
+        hlsKeep: false,
+        dash: true,
+        dashFlags: '[f=dash:window_size=3:extra_window_size=5]',
+        dashKeep: false
+      }
+    ]
+  }
+};
+
+// Servidor de medios RTMP
+const nms = new NodeMediaServer(config);
+
+nms.on('preConnect', (id, args) => {
+  console.log('[NodeEvent on preConnect]', `id=${id} args=${JSON.stringify(args)}`);
+});
+
+nms.on('postConnect', (id, args) => {
+  console.log('[NodeEvent on postConnect]', `id=${id} args=${JSON.stringify(args)}`);
+});
+
+nms.on('doneConnect', (id, args) => {
+  console.log('[NodeEvent on doneConnect]', `id=${id} args=${JSON.stringify(args)}`);
+});
+
+nms.on('prePublish', (id, StreamPath, args) => {
+  console.log('[NodeEvent on prePublish]', `id=${id} StreamPath=${StreamPath} args=${JSON.stringify(args)}`);
+});
+
+nms.on('postPublish', (id, StreamPath, args) => {
+  console.log('[NodeEvent on postPublish]', `id=${id} StreamPath=${StreamPath} args=${JSON.stringify(args)}`);
+});
+
+nms.on('donePublish', (id, StreamPath, args) => {
+  console.log('[NodeEvent on donePublish]', `id=${id} StreamPath=${StreamPath} args=${JSON.stringify(args)}`);
+});
+
+nms.on('prePlay', (id, StreamPath, args) => {
+  console.log('[NodeEvent on prePlay]', `id=${id} StreamPath=${StreamPath} args=${JSON.stringify(args)}`);
+});
+
+nms.on('postPlay', (id, StreamPath, args) => {
+  console.log('[NodeEvent on postPlay]', `id=${id} StreamPath=${StreamPath} args=${JSON.stringify(args)}`);
+});
+
+nms.on('donePlay', (id, StreamPath, args) => {
+  console.log('[NodeEvent on donePlay]', `id=${id} StreamPath=${StreamPath} args=${JSON.stringify(args)}`);
+});
+
+nms.run();
+
+// Servidor web Express para la página
+const app = express();
+const WEB_PORT = 3000;
+
+app.use(express.static(path.join(__dirname, 'public')));
+
+app.get('/', (req, res) => {
+  res.sendFile(path.join(__dirname, 'public', 'index.html'));
+});
+
+app.listen(WEB_PORT, () => {
+  console.log('='.repeat(50));
+  console.log('🐔 POLLETS STREAMING SERVER');
+  console.log('='.repeat(50));
+  console.log(`📺 Web del stream: http://localhost:${WEB_PORT}`);
+  console.log(`📡 Servidor RTMP: rtmp://localhost:1935/live`);
+  console.log(`🎬 Stream HTTP-FLV: http://localhost:8000/live/CLAVE.flv`);
+  console.log('='.repeat(50));
+  console.log('');
+  console.log('📋 CONFIGURACIÓN PARA OBS:');
+  console.log('   Servidor: rtmp://localhost/live');
+  console.log('   Clave de retransmisión: pollets');
+  console.log('');
+  console.log('   (Para producción usar: rtmp://pollets.com.es/live)');
+  console.log('='.repeat(50));
+});