nginx

NGINIX WINDOWS

NGINX WINDOWS | HLS Y HTTP, MANDANDO VÍDEO A IOS Y WEB

NGINX WINDOWS . Hola a todos, después de un largo tiempo de ausencia voy a retomar mis labores en el blog y en el canal de YouTube. Y que mejor manera que hacerlo con una petición de un suscriptor que me  pidió la forma de configurar NGINX para servir contenido HLS. Este servidor streaming está bajo la plataforma de windows 10 aunque se que Linux hubiera tenido un rendimiento muy bueno el desempeño que le voy a dar será meramente de aprendizaje. NGINX WINDOWS.

Antes de nada os tengo que decir que no soy nada bueno con la programación pero hago mis pinitos y me defiendo como puedo. Para lo que necesito voy servido así que si tengo algún fallo sed benevolentes conmigo.

Aquí os dejo el vídeo que realicé como apoyo.:

EL ARCHIVO NGINX.CONF
Pues bien, para empezar os dejo el contenido del archivo nginx.conf con la configuración necesaria para crear el servidor HTTP. Es decir ahora además de recibir y servir protocolo rtmp además nuestro NGINX podrá servir protocolo HLS.

worker_processes  3;

events {
    worker_connections  1024;
}

# RTMP configuration
rtmp {
    server {
        listen 1935; # Listen on standard RTMP port
        chunk_size 4000;

        application live {
            live on;
            # Turn on HLS
            hls on;
            hls_path /nginx/hls;
            #hls_fragment 3;
            #hls_playlist_length 60;
            # disable consuming the stream from nginx as rtmp
            #deny play all;
			#hls_sync 200ms;
        }
    }
}

http {
    sendfile off;
    tcp_nopush on;
    directio 512;
    default_type application/octet-stream;

    server {
        listen 8080;

        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/dash+xml mpd;
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }

            root /nginx;
        }
    }
}

EL PLAYER

Para conseguir visualizar nuestro streaming en un player solo vamos a invocar medianto un archivo HTML un player ya creado en una web de un tercero.

Crearemos el archivo .html en la carpeta /html de nuestro nginx con el siguiente código.:

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Video jsdemo</title>
	<link href="https://vjs.zencdn.net/7.2.4/video-js.css" rel="stylesheet">

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <script src="https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>

</head>
<body>
    <video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
		<video preload="none">
     <source type="application/vnd.apple.mpegurl" src="/hls/stream.m3u8">
     <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>
  
  <script src="https://vjs.zencdn.net/7.2.4/video.js"></script>
</body>
</html>

Una vez configurado tanto NGINX y el player ya debería funcionar por lo menos en LOCAL apuntando a las IPs de los equipos. Si lo que queréis crear un servidor público que pueda recibir y servir streams desde el exterior tendréis que redirigir los puertos en vuestro router.

Para embeber este player a una web o una entrada de wordpres basta con usar la etiqueta IFRAME de la siguiente manera.:

<iframe src="https://www.danielcanto.es/video/embebido.html" name="iframe" width="670" height="320" align="center" scrolling="auto" frameborder="0" id="iframes" allowtransparency="true" border="0" ></iframe>

El resultado sería este.:

También puedes ver aquí un tutorial sobre como realizar un envío a varias plataformas al mismo tiempo en este enlace.

7 comentarios en “NGINX WINDOWS | Servidor HLS y Player muy sencillo.

  1. Gracias, pero creo que faltó algo, no dices que frase, dirección y stream key debemos poner en software como OBS para transmitir desde ahí

    1. En OBS tienes que construir de la siguiente manera suponiendo que lo hacemos igual que con el código del post.:

      rtmp://localhost/live/stream

      Esto suponiendo que el OBS está en la misma máquina que el servidor. Si estuviera en una máquina remota tendrás que poner su ip seguido de dos puntos y el puerto donde atacar.:

      rtmp://xxx.xxx.xxx.xxx:yyyy/live/stream

      En el stream puedes poner lo que quieras aquí pero tendrás que acordarte si luego quieres aprovechar el RTMP.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *