HLS Y HTTP, MANDANDO VÍDEO A IOS Y WEB

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.

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.

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.

  1. worker_processes  3;
  2.  
  3. events {
  4.     worker_connections  1024;
  5. }
  6.  
  7.  
  8. # RTMP configuration
  9. rtmp {
  10.     server {
  11.         listen 1935; # Listen on standard RTMP port
  12.         chunk_size 4000;
  13.  
  14.         application live {
  15.             live on;
  16.             # Turn on HLS
  17.             hls on;
  18.             hls_path /nginx/hls;
  19.             #hls_fragment 3;
  20.             #hls_playlist_length 60;
  21.             # disable consuming the stream from nginx as rtmp
  22.             #deny play all;
  23.             #hls_sync 200ms;
  24.         }
  25.     }
  26. }
  27.  
  28. http {
  29.     sendfile off;
  30.     tcp_nopush on;
  31.     directio 512;
  32.     default_type application/octet-stream;
  33.  
  34.     server {
  35.         listen 8080;
  36.  
  37.         location /hls {
  38.             # Disable cache
  39.             add_header 'Cache-Control' 'no-cache';
  40.  
  41.             # CORS setup
  42.             add_header 'Access-Control-Allow-Origin' '*' always;
  43.             add_header 'Access-Control-Expose-Headers' 'Content-Length';
  44.  
  45.             # allow CORS preflight requests
  46.             if ($request_method = 'OPTIONS') {
  47.                 add_header 'Access-Control-Allow-Origin' '*';
  48.                 add_header 'Access-Control-Max-Age' 1728000;
  49.                 add_header 'Content-Type' 'text/plain charset=UTF-8';
  50.                 add_header 'Content-Length' 0;
  51.                 return 204;
  52.             }
  53.  
  54.             types {
  55.                 application/dash+xml mpd;
  56.                 application/vnd.apple.mpegurl m3u8;
  57.                 video/mp2t ts;
  58.             }
  59.  
  60.             root /nginx;
  61.         }
  62.     }
  63. }

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.:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>Video jsdemo</title>
  5.     <link href="https://vjs.zencdn.net/7.2.4/video-js.css" rel="stylesheet">
  6.  
  7.   <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  8.   <script src="https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>
  9.  
  10. </head>
  11. <body>
  12.     <video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
  13.     <source src="/hls/stream.m3u8" type="application/x-mpegURL">
  14.       <p class="vjs-no-js">
  15.       To view this video please enable JavaScript, and consider upgrading to a web browser that
  16.       <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
  17.     </p>
  18.   </video>
  19.  
  20.   <script src="https://vjs.zencdn.net/7.2.4/video.js"></script>
  21. </body>
  22. </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 en el editor HTML.:

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

Y obtendremos este resultado:

REPRODUCIR CON IOS,  VLC Y OTROS PLUGINS

Para reproducir con VLC tendríamos que ir a MEDIOS / UBICACIÓN DE RED y añadir la siguiente dirección.:

http://tudirecciónip:8080/hls/stream.m3u8

Cabe la posibilidad que quieras usar algún tipo de plugin para wordpress, este te pedirá que añadas la dirección HLS para añadir el vídeo.

Deja un comentario

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