Nginx RTMP模塊接收x.264，輸出HLS直播流

Question

目標：使用OBS從PC流式傳輸，使用Nginx RTMP模塊接收流並輸出到觀看者，以便他們可以在PC和移動設備上查看實時流 。 為此，Nginx必須使用HLS輸出實時流。

我的伙伴已經設置了以下Nginx文件，但沒有發生任何事情（這是從stackoverflow - > 答案后的答案）

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;


    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       8080;
        server_name  localhost;

        location / {
            root   html;
            index  index.html index.htm;
        }

    location /stat {
            rtmp_stat all;
            rtmp_stat_stylesheet stat.xsl;
        }

    location /stat.xsl {
            # you can move stat.xsl to a different location
            root /usr/build/nginx-rtmp-module;
        }

        # rtmp control
        location /control {
            rtmp_control all;
        }

        # Client (VLC etc.) can access HLS here.
        location /hls {
           # Serve HLS fragments
           types {
             application/vnd.apple.mpegurl m3u8;
             video/mp2t ts;
           }
           root /tmp;
           add_header Cache-Control no-cache;
         }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

}

rtmp {
        server {
                listen 1935;
                chunk_size 4096;

                application live {
                        live on;
                        record off;
                }

                application directo {
                        live on;
                        record off;
                }

                # You should send x.264/aac RTMP Stream via ffmpeg to this application
                 application hls {
                   allow play all;
                   live on;
                   hls on;
                   hls_path /tmp/hls;
                 }
        }
}

這是對OBS流配置的捕獲：

PC可以很好地查看流，但移動設備不能。

感謝任何人可能提供的任何輸入。

Answer 1

首先，您必須通過RTMP選項將編碼器指向服務器的IP地址，這將是第一件事。 然后，在此之后，您必須向剛剛發布的配置文件添加指令，例如：

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

    # This application is to accept incoming stream
    application live {
        live on; # Allows live input

        # Once receive stream, transcode for adaptive streaming
        # This single ffmpeg command takes the input and transforms
        # the source into 4 different streams with different bitrate
        # and quality. P.S. The scaling done here respects the aspect
        # ratio of the input.
        exec ffmpeg -i rtmp://localhost/$app/$name -async 1 -vsync -1
                    -c:v libx264 -c:a libvo_aacenc -b:v 256k -b:a 32k -vf "scale=480:trunc(ow/a/2)*2" -tune zerolatency -preset veryfast -crf 23 -f flv rtmp://localhost/show/$name_low
                    -c:v libx264 -c:a libvo_aacenc -b:v 768k -b:a 96k -vf "scale=720:trunc(ow/a/2)*2" -tune zerolatency -preset veryfast -crf 23 -f flv rtmp://localhost/show/$name_mid
                    -c:v libx264 -c:a libvo_aacenc -b:v 1024k -b:a 128k -vf "scale=960:trunc(ow/a/2)*2" -tune zerolatency -preset veryfast -crf 23 -f flv rtmp://localhost/show/$name_high
                    -c:v libx264 -c:a libvo_aacenc -b:v 1920k -b:a 128k -vf "scale=1280:trunc(ow/a/2)*2" -tune zerolatency -preset veryfast -crf 23 -f flv rtmp://localhost/show/$name_hd720
                    -c copy -f flv rtmp://localhost/show/$name_src;
    }

    # This application is for splitting the stream into HLS fragments
    application show {
        live on; # Allows live input from above
        hls on; # Enable HTTP Live Streaming

        # Pointing this to an SSD is better as this involves lots of IO
        hls_path /mnt/hls/;

        # Instruct clients to adjust resolution according to bandwidth
        hls_variant _low BANDWIDTH=288000; # Low bitrate, sub-SD resolution
        hls_variant _mid BANDWIDTH=448000; # Medium bitrate, SD resolution
        hls_variant _high BANDWIDTH=1152000; # High bitrate, higher-than-SD resolution
        hls_variant _hd720 BANDWIDTH=2048000; # High bitrate, HD 720p resolution
        hls_variant _src BANDWIDTH=4096000; # Source bitrate, source resolution
    }
}
}

http {

# This optimizes the server for HLS fragment delivery
sendfile off;
tcp_nopush on;
aio on;
directio 512;

# HTTP server required to serve the player and HLS fragments
server {
    listen 80;

    location / {
        root /path/to/web_player/;
    }

    location /hls {
        types {
            application/vnd.apple.mpegurl m3u8;
        }

        root /mnt/;
        add_header Cache-Control no-cache; # Prevent caching of HLS fragments
        add_header Access-Control-Allow-Origin *; # Allow web player to access our playlist
    }
}
}

Answer 2

我測試過ubuntu 16.04 LTS，它可以按照以下說明操作：

cd $HOME
git clone https://github.com/arut/nginx-ts-module.git
wget https://nginx.org/download/nginx-1.13.8.tar.gz
git clone https://github.com/sergey-dryabzhinsky/nginx-rtmp-module.git
sudo apt-get install build-essential libpcre3 libpcre3-dev libssl-dev
tar -xf nginx-1.13.8.tar.gz 
cd nginx-1.13.8/
sudo apt update
sudo apt install autoconf automake build-essential libpcre3 libpcre3-dev libssl-dev
./configure --with-http_ssl_module --add-module=../nginx-rtmp-module --with-http_stub_status_module --add-module=../nginx-ts-module
make
sudo make install

然后你需要更新.conf文件：

cd /usr/local/nginx/conf/
sudo nano nginx.conf

配置文件：

worker_processes  auto;
events {
    worker_connections  1024;
}

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

        application show {
            live on;
            # Turn on HLS
            hls on;
            hls_path /mnt/hls/;
            hls_fragment 3;
            hls_playlist_length 60;
            # disable consuming the stream from nginx as rtmp
            deny play all;
    # Instruct clients to adjust resolution according to bandwidth
            hls_variant _low BANDWIDTH=512000; # Low bitrate, sub-SD resolution
            hls_variant _mid BANDWIDTH=1024000; # Medium bitrate, SD resolution
            hls_variant _hd720 BANDWIDTH=2048000; # High bitrate, HD 720p resolution
        }

    }
}

http {
    sendfile off;
    tcp_nopush on;
    #aio 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;
            }
        location /stats {
        stub_status;
        }


            root /mnt/;
        }

要啟動你的nginx服務器（首先殺死它然后啟動它）：

sudo /usr/local/nginx/sbin/nginx -s stop
sudo /usr/local/nginx/sbin/nginx

查看nginx服務器的統計信息：服務器的公共IP在哪里。

http://<ip_of_your_nginx_server>:8080/stats

從您的編碼器，如OBS：Stream到您的nginx服務器與該地址：

rtmp：/// show / stream_hd720以2500kbps的速度運行1280x720，以128kbps的速率運行1個音頻立體聲

如果要在VLC上查看流：打開網絡流，然后粘貼：

http://<ip_of_your_nginx_server>:8080/hls/stream.m3u8

你應該看到你的流。

如果您想托管HLS播放器，觀眾可以免費觀看您的視頻流：

sudo apt install screen

將您的http服務器放在屏幕會話中：

screen -dmS httpSTREAM

訪問您的屏幕：

screen -r httpSTREAM

然后啟動你的服務器：

python -m SimpleHTTPServer 7788

使用Hls播放器創建您的html頁面：

touch player.html
sudo nano player.html

並粘貼：使用正確的ip hls.loadSource('http://<ip_of_your_nginx_server>:8080/hls/stream.m3u8');更改該行hls.loadSource('http://<ip_of_your_nginx_server>:8080/hls/stream.m3u8'); 滿足您的需求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>CHAN.1</title>

    <!-- Bootstrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
<body>

<h1>CHAN 2018 - STREAM.1</h1>

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<div class="well">
<div class="embed-responsive embed-responsive-16by9">
   <video id="video" width=720 class="video-js vjs-default-skin" controls></video>
 </div>
</div>
<script>
  if(Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.loadSource('http://163.172.128.64:8080/hls/stream.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 }
</script>

<div id="footer">
      <font size="2">&nbsp;&copy; Ekla Ingenierie - 2018 <a href="http://www.ekla.tv">www.ekla.tv</a></font>
</div>

</body>
</html>
obe@scw-eklaingenierie-c2:~$ cat player.html 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>CHAN.1</title>

    <!-- Bootstrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
<body>

<h1>My Stream</h1>

<div class="well">
<div class="embed-responsive embed-responsive-16by9">
   <video id="video" width=720 class="video-js vjs-default-skin" controls></video>
 </div>
</div>
<script>
  if(Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.loadSource('http://<ip_of_your_nginx_server>:8080/hls/stream.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 }
</script>

<div id="footer">
      <font size="2">&nbsp;&copy; MyStreaming - 2018</font>
</div>

</body>
</html>

然后從Chrome瀏覽器訪問您的播放器並粘貼該鏈接：

http://<ip_of_your_nginx_server>:7788/player.html

現在你做一個完整的流媒體！

Nginx RTMP模塊接收x.264，輸出HLS直播流

問題描述

2 個解決方案

解決方案1
1 2017-06-21 20:38:54

解決方案2
1 2018-01-08 08:34:13

Nginx RTMP模塊接收x.264，輸出HLS直播流

問題描述

2 個解決方案

解決方案1 1 2017-06-21 20:38:54

解決方案2 1 2018-01-08 08:34:13

解決方案1
1 2017-06-21 20:38:54

解決方案2
1 2018-01-08 08:34:13