☰

NGINX rtmp 到 hls 设置，使用 video.js 缓冲

tag-icon • tag-icon linux nginx ubuntu rtmp
NGINX rtmp 到 hls 设置，使用 video.js 缓冲

我正在尝试为当地一所学校设置一个在其本地网络上运行的流媒体服务器。我在虚拟机上设置了 Ubuntu 18.04，并在服务器上为其提供了自己的专用 1 Gigabit 连接。它有 4 个处理核心和 8GB 内存。学校里的所有交换机都是 1 Gigabit。我使用 GoPro 通过 RTMP 将 480p 视频发送到服务器（运行 NGINX 和 rtmp 模块）。在同一台服务器上，我配置了 video.js 来查看流。

当我们运行 5-10 个浏览器并保持流式传输时，一切似乎都很好。今天他们打开了 50-60 个，这大约是我们见过的最大值。当我们这样做时，一些浏览器慢慢开始“缓冲”，并会反复缓冲。几乎每 2 秒就会缓冲一次，速度非常快。

我检查了服务器，发现 CPU、内存、磁盘甚至网络都没有受到限制。尽管 VMware 确实显示服务器速度达到约 120mbps 并达到峰值。

这就是我的 nginx.conf 的样子。我该怎么做才能让它发挥作用。我不知道这是否只是带宽太多，或者是新打开的播放器试图从播放列表中播放并阻碍了 RTMP 到 HLS 的转换过程。希望这种思路有意义。

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 /var/stream;
        }
}
rtmp {
        server {
                listen 1935;
                chunk_size 4096;

                application live {

                        record off;
                        live on;
                        # Turn on HLS
                        hls on;
                        hls_path /var/stream/hls/;
                        hls_fragment 3;
                        hls_playlist_length 60;
                        # disable consuming the stream from nginx as rtmp
                        deny play all;

                   }
        }

}

以下是播放器的 HTML：

<video-js id="live_stream" class="video-js vjs-fluid vjs-default-skin vjs-big-play-centered" controls preload="auto" autoplay="true" width="auto" height="auto" poster="http://192.168.5.8/poster.jpg">
<source src="http://192.168.5.8:8080/hls/.m3u8" type="application/x-mpegURL">
    <p class='vjs-no-js'>
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
    </p>
</video-js>

答案1

这最终归结为带宽问题。GoPro 向 RTMP 服务器传输的视频分辨率为 480p。每个连续流占用大约 3Mbps 的带宽。我最终使用 FFMPEG 将视频转码为 500Kbps 的流。质量略有下降，但仍然非常实用。在会话数量相同（60）的情况下，服务器仅使用大约 8Mbps 的带宽。我还要补充一点，FFMPEG 转码会在浏览器中开始流之前增加大约 45-60 秒的延迟。我相信这个问题可以得到纠正，我只是没有那么深入，因为对于我的情况来说这并不重要。

这是我的 nginx.conf 文件的 RTMP 部分：

rtmp {
        server {
                listen 1935;
                chunk_size 4096;

                application live {

                        record off;
                        live on;
                        # Turn on HLS
                        hls on;
                        hls_path /var/stream/hls/;
                        hls_fragment 3;
                        hls_playlist_length 60;
                        # disable consuming the stream from nginx as rtmp
                        allow play all;

                        exec ffmpeg -i rtmp://192.168.1.75/$app/$name -acodec copy -c:v libx264 -preset veryfast -profile:v baseline -vsync cfr -s 640x360 -b:v 400k -maxrate 500k -bufsize 500k -threads 0 -r 30 -f flv rtmp://192.168.1.75/mobile/$;
                   }

                application mobile {
                        allow play all;
                        live on;
                        hls on;
                        hls_nested on;
                        hls_path /var/stream/hls-mobile/;
                        hls_fragment 10s;
                }
        }

}

然后在我的 HTML5 查看器中我使用以下代码：

    <video-js id="live_stream" class="video-js vjs-fluid vjs-default-skin vjs-big-play-centered" controls preload="auto" autoplay="true" width="auto" height="auto" poster="http://192.168.5.8/poster.jpg">
<source src="http://192.168.5.8:8080/hls-mobile/index.m3u8" type="application/x-mpegURL">
    <p class='vjs-no-js'>
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
    </p>
</video-js>

相关内容