NGINX rtmp 到 hls 設置與 video.js 緩衝
我正在嘗試為在本地網路上執行的本地學校設置流媒體伺服器。我在虛擬機上設置了 Ubuntu 18.04,並在伺服器上為其提供了自己的專用 1 Gigabit 連接。它有 4 個處理核心和 8GB 記憶體。學校所有的交換機都是1G的。我使用 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>
這最終成為頻寬問題。到 RTMP 伺服器的 GoPro 饋送是 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>