Stream da OBS diretto su pagina HTML5 con RTMP - NGINX

Puo' capitare di voler fornire dei feed audio/video direttamente su una propria pagina web, magari registrando anche il flusso video e trasmettere contemporaneamente al proprio canale youtube.

La cosa piu' semplice in questo caso sarebbe di fare lo streaming direttamente verso youtube e poi includere direttamente il player di YouTube nella pagina html. Ma cosi' son boni tutti e noi vogliamo fare i piu' fighissimi.

Questo e' quello che faremo:

Dobbiamo installare NGINX (pacchetti della propria distro, docker, compilazione... come piu' vi aggrada) e poi dobbiamo andar a modificare il file di configurazione /etc/nginx/nginx.conf in questo modo:

#user  nobody;
worker_processes  2;

#error_log  logs/error.log;
#pid        logs/nginx.pid;

events {
    worker_connections  8192;
}

rtmp {
    server {
            listen 1935;
            chunk_size 4096;
           # ora definisco una application per ogni servizio che voglio implementare
           # live per mandare a youtube, test per il live feed che useremo nella nostra pag web

            application live {
                    live on;
                    record off;
        push rtmp://a.rtmp.youtube.com/live2/<la vostra chiave>;
            }

            # test lo useremo poi come base per lo stream da OBS
    application test {
        live on;
        record off;
                    # hls serve per salvare su disco la nostra playlit m3u8
                    # il nome lo prendera' dalla chiave che passa obs allo stream
                    # se tipo faro' stream verso http://10.0.0.20/test e come chiave usero' per esempio antani
                    # verra' creato nel path definito sotto, una playlist chiamata antani.m3u8 che andro'
                    # a caricare nella pagina html
        hls on;
        hls_path /usr/local/nginx/html/srv/hls/;
        hls_fragment 3;
        hls_playlist_length 60;
    }
#   Macchina da cui e' permesso lo stream
# Se non  lo mettiamo, chiunque potrebbe usare il server per streammare   
allow publish 10.0.0.30;
deny publish all;
    }
}

# con la direttiva http, diciamo ad nginx di fare anche da web server.
# In altrernativa, se preferiamo apache, possiamo non metterlo
http {
include mime.types;
server {
            # metto una porta alta per ruzzare, solitamente per http si usa 80 o 443 per https
    listen 29000;
    location / {
                   # qui definisco la root del servizio web
        root /usr/local/nginx/html/;
        index index.html;
        add_header Cache-Control no-cache; # Disable cache
    }
}
}

A questo punto riavviamo nginx il quale offrira' 2 servizi: il server rtmp per lo streaming e il server http.

Ora configuriamo OBS per trasmettere verso il nostro server:

• 
• 

Apriamo OBS, una volta definito il nostro layout, clicchiamo su SETTINGS e impostiamo il servizio a custom, inseriamo i parametri del server rtmp come abbiamo definito nel file di conf di nginx.

Salviamo e poi premiamo su Start Streaming. In questo modo OBS stara' trasmettendo verso il nostro server rtmp. Possiamo verificare che nel percorso che abbiamo definito nella configurazione hls_path /usr/local/nginx/html/srv/hls/; stara' iniziando a creare i file per la nostra playlist. Ora non resta che configurare la parte html/js per poter mostrare lo stream.

• 
• 

Qui potete vedere una pag html dove ci sono sia il flusso video rtmp che Youtube, oppure una pagina con il solo flusso video.

A questo link potete scaricare i file html/js da poter usare nel vostro server web.

file supporto articolo OBS RTMP