Init commit

This commit is contained in:
Carlos Narro
2026-03-17 17:22:25 +01:00
parent 3c6a5e4cdb
commit 2ae32f8914
5 changed files with 1390 additions and 0 deletions

2
.gitignore vendored Normal file
View File

@@ -0,0 +1,2 @@
node_modules
.env

1008
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

14
package.json Normal file
View File

@@ -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"
}
}

265
public/index.html Normal file
View File

@@ -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>

101
server.js Normal file
View File

@@ -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));
});