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.

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 por www-data
• comprueba y reinicia nginx nginx -t y luego nginx -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ñadiendo push 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

• https://c3voc.de/wiki/distributed-conference

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.

https://community.jitsi.org/t/how-do-i-change-youtube-live-stream-to-another-rtmp-server-url/24817/7?u=lodopidolo

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