assets | ||
clean.sh | ||
docker-compose.yml | ||
Dockerfile | ||
index.html | ||
LICENSE | ||
nginx-rtmp.conf | ||
nginx-site-default.conf | ||
README.md |
title |
---|
streaming directo |
Recordario
Al realizar un commit de los repositorios en Estibadores, deben estar firmados con tu clave pública GPG para permitir su uso en el sistema.
Utilidades
Se adjunta un script clean.sh para limpiar periódicamente la carpeta de las emisiones, por alguna razón el modulo de nginx no parece que en algunos casos esté haciendo un cleanup de los fragmentos de HLS antiguos y el disco se llena.
Para ejecutarlo, se puede configurar en el Cron del host que contiene el demonio de Docker:
# crontab -e
@hourly docker exec <nombre_container> /etc/cron.hourly/clean.sh
Streaming video
Servido a traves de sintoniza.sindominio.net un canal para hacer streming video y audio.
Hemos seguido los pasos documentados por guifi.net + exo y explicados aqui (https://gitlab.com/guifi-exo/wiki/-/blob/master/howto/real-time-media/rtmp_streamer.md)
Usaremos el estandar RTMP Real-Time Messaging Protocol.
creación del Dockerfile
Install rtmp mod for nginx
apt install libnginx-mod-rtmp
Preparar nginx para estrimear en rtmp
Nginx puede estrimear codecs de HSL y Dash/MPEG, en este ejemplo únicamente veremos HLS
en /etc/nginx/nginx.conf
añadimos la configuración del fichero nginx-rtmp.conf
Prepara los directorios para el streaming
La pagina se sirve desde /var/www/html/
para automatizar el proceso de creación de Docker y usar la configuración por defecto de Nginx en Debian.
Crea el subdirectorio /var/www/html/hls
donde los trozos de vídeos serán almacenados:
mkdir -P /var/www/html/live.sindominio.net/hls
le damos permisos de lectura, escritura y ejecución a cualquier user ya que montaremos el volumen fuera del docker
chmod 777 /var/www/html/hls
Prepara tu web
Ponemos la página index.html
en /var/www/html/
para que la sirva por defecto.
Esta página llama a los ficheros js que permiten recibir y enviar video así como los css que dan forma gráfica y de usabilidad a la página.
Por organización y limpieza creamos el directorio assets/
donde pondremos los siguiente ficheros:
- styles-sintoniza.css - diseño de nuestra página
- video-js.min.css - estilos del player (botones, ventana, volumen, etc...)
- video-js.min.css - interacción js del player, tanto para recibir como para enviar video
- jquery-slim.min.js - dependencia de jquery por parte del js del player
obtención de los ficheros: styles-sintoniza.css los escribimos.
videojs: iremos a https://github.com/videojs/video.js/releases, bajaremos la última versión pero utilizaremos únicamente video-js.min.css
y video.min.js
. Si queremos traducciones también el directorio lang/
jquery : Bajaremos la última versión minimizada desde https://jquery.com/download/ y la renombraremos jquery-slim.min.js
Servir la nueva web con nginx
en este ejemplo asumimos que ya tienes los certificados creados con letsencrypt
En el fichero por defecto añadimos el siguiente codigo
/etc/nginx/sites-available/default
añade bajo el bloque 443 ssl
:
location /hls {
# Disable cache
add_header Cache-Control no-cache;
# CORS setup
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Expose-Headers' 'Content-Length';
# allow CORS preflight requests
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
}
Últimos pasos
En el servidor
- controla tu firewall y permite la entrada de trafico por el puerto 1935
- haz que
/var/www/html/live.sindominio.net/
y sus contenidos puedan ser leidos porwww-data
- comprueba y reinicia nginx
nginx -t
y luegonginx -s reload
En tu ordenador
ahora puedes instalarte OBS
apt install obs-studio
Envia el directo a rtmp://live.sindominio.net:1935/entrada/stream_key
y miralo en https://live.sindominio.net/#stream_key
Extra
/etc/nginx/nginx.conf
configuraciones en el bloque rtmp
-
Nginx te permite ajustar el HLS, instrucciones: https://nginx.org/en/docs/http/ngx_http_hls_module.html
-
Si quieres que la gente pueda recibir el stream directamente comenta la línea "deny play all;"
-
Puedes enviar el stream recibido directammente en
rtmp://live.sindominio.net/entrada/stream_name
a un servicio externo como youtube.com añadiendopush rtmp://a.rtmp.youtube.com/live2/stream_key;
-
Puedes enviar y recibir streams simultáneamente a otros lugares o páginas web añadiendo más bloques de
aplicacones
con diferentes nombres
Otras referencias
traducción de los mensajes de videojs
Al pie de index.html
o dónde tengas la llamada a
<script>
$(function() {
if (window.location.hash) {
...
} else {
...
}
});
</script>
añade este código js dentro de if (window.location.hash){ }
<script>
$(function() {
if (window.location.hash) {
//some code here ...
videojs.addLanguage("es",{
"You aborted the media playback": "Has interrumpido la reproducción del vídeo.",
"A network error caused the media download to fail part-way.": "Un error de red ha interrumpido la bajada del vídeo.",
"The media could not be loaded, either because the server or network failed or because the format is not supported.": "La emisión no está activa en este momento.",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "La reproducción del video se ha interrumpido debido a que el archivo estaba corrompido o por que tu navegador no soporta este formato.",
"No compatible source was found for this media.": "No se ha encontrado ningún origen para este medio."
});
videojs.addLanguage("ca",{
"You aborted the media playback": "Heu interromput la reproducció del vídeo.",
"A network error caused the media download to fail part-way.": "Un error de la xarxa ha interromput la baixada del vídeo.",
"The media could not be loaded, either because the server or network failed or because the format is not supported.": "La emissió està inactiva.",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "La reproducció de vídeo s'ha interrumput per un problema de corrupció de dades o bé perquè el vídeo demanava funcions que el vostre navegador no ofereix.",
"No compatible source was found for this media.": "No s'ha trobat cap font compatible amb el vídeo."
});
//some code here ...
} else {
//some code here ...
}
});
</script>
crear el stream de directos
Seguimos los pasos documentados en la trastienda https://sindominio.net/trastienda/tecnica/servicios/streamingdirecto/
Incluir index.html,video-js.css, video.js and jquery-slim.min.js y ya lo tienes.
Como hacer que jitsi haga stream en sintoniza
solucion 1: hackeando jitsi
estable y funciona desde hace un tiempo según su autor: https://github.com/jitsi/jitsi-meet/issues/2829#issuecomment-509712706
solución 2: con un script ffmpeg
solucion no intusiva con jitis y permite striming de cualquier fuents.
solución 3: simulcast a cualquier otra págia
permite enviar simultáneamente a muchos streamers https://community.jitsi.org/t/stream-to-any-or-multiple-rtmp-destinations-record-simultaneously/51943
solución 4: rtmp nginix video por exo/guifipedro
https://gitlab.com/guifi-exo/wiki/-/blob/master/howto/rtmp_streamer.md