TUTOYA

Usabilidad para mejores practicas del uso de la tecnología.

Este tutorial te enseñara a como utilizar video.js como reproductor de una fuente de vídeo HLS, publicado a través de un servidor ...

USANDO HTML5 CON VIDEO.JS PARA REPRODUCIR HLS - SERVIDOR NGINX

By camilohuertas17 abril 30, 2019



Este tutorial te enseñara a como utilizar video.js como reproductor de una fuente de vídeo HLS, publicado a través de un servidor Nginx

1. Lo primero tener ya instalado y configurado el servidor Nginx con el modulo RTMP
2. El archivo de Nginx.conf debe tener la siguiente configuración:


#user  nobody;
worker_processes  1;
error_log  logs/rtmp_error.log debug;
pid        logs/nginx.pid;

events {
    worker_connections  1024;
}

http {
    server {
        listen       8080;
        server_name  localhost;

        location /hls {
            # Serve HLS fragments

            # 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;
            }
            root /tmp;
            add_header Cache-Control no-cache;
        }
    }
}

rtmp {
        server {
                listen 1935;
                chunk_size 8192;

                application hls {
                        live on;
                        meta copy;
                        hls on;
                        hls_path /tmp/hls;
        }

    }

}

3. Una vez que este guardado el archivo Nginx.conf, iniciar el servidor.
4. Lo siguiente sería enviar la fuente o emitir el Streaming (Obs, ffmpeg y Xsplit etc...) 
rtmp://ip_servidor/hls/live


5. Realizado este proceso simplemente se puede crear una página en html5 con la siguiente información:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Live Streaming</title>
    <link href="https://vjs.zencdn.net/7.3.0/video-js.css" rel="stylesheet">
    <script src="https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>
</head>
<body>
<video id="player" class="video-js vjs-default-skin" height="360" width="640" controls preload="none">
    <source src="http://ip-servidor:8080/hls/live.m3u8" type="application/x-mpegURL" />
</video>
<script>
    var player = videojs('#player');
</script>
</body>
</html>

Nota: Para esta practica solo se utilizo el formato .m3u8, por lo tanto los únicos navegadores que soportan ese formato nativamente son Safari y Microsoft Egde, si desea usar webm y mp4, respectivamente deberá configurar el archivo nginx.conf con salida de ese tipo de formatos.
Share This