NGINX rtmp to hls setup with video.js buffering
Solution 1:
This ended up being a matter of bandwidth. The GoPro feed is 480p to the RTMP server. Each consecutive stream was drawing about 3Mbps of bandwidth. What I ended up doing was using FFMPEG to transcode the video to a 500Kbps stream. The quality drops a little bit, but it is still very useable. With the same number of sessions going (60) the server is only using about 8Mbps of bandwidth. I will also add that the FFMPEG transcoding adds about 45-60 seconds of delay before the stream starts in the browser. I am sure this can be corrected, I just haven't taken it that far because for my scenario it doesn't matter.
Here is the RTMP section of my nginx.conf file:
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;
}
}
}
Then in my HTML5 viewer I use this code:
<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>