使用 NGINX + nginx-rtmp-module 架設 HLS live streaming server

請先參考之前的文章： [CentOS7] nginx rtmp 伺服器架設，架設好基本的 rtmp 伺服器之後，只要更改下列組態就可以啟用 HLS live streaming server：

worker_processes  auto;
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 /xxx/hls/;
            hls_fragment 3;
            hls_playlist_length 60;
            # disable consuming the stream from nginx as rtmp
            deny play all;
        }
    }
}

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

    server {
        listen 8080;

        location / {
            # 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 /xxx/;
        }
    }
}

上面的 xxx 就改變成你的路徑。然後一樣直接 stream 到 rtmp://xxxxx/live/xxx，在 /xxx/hls 下面就會有 xxx.m3u8 及一堆 xxx-xxx.ts 這樣就可以透過 videojs 或 hls 在網頁上播放，範例如下：

<!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.min.css" rel="stylesheet">
    <script src="https://vjs.zencdn.net/7.3.0/video.min.js"></script>
</head>
<body>
<video id="player" class="video-js vjs-default-skin" controls preload="none">
    <source src="http://xxxx:8080/hls/xxx.m3u8" type="application/x-mpegURL" />
</video>
<script>
    var player = videojs('#player');
</script>
</body>
</html>

Leave a Reply