Live web streaming with Nginx - CESNET/UltraGrid GitHub Wiki
This guide explains how to embed RTMP and/or HLS stream protocols coming from UltraGrid inside a web page.
To use UltraGrid as a source for live streaming inside a web page it is required to use the standard RTP protocols for audio (u-law, A-law or OPUS) and video (H.264) that are implemented and can be used either with the RTSP server module or SDP transmission protocol.
To enable RTSP, live555 library is required (e.g.: sudo apt-get install liblivemedia-dev) before configuring UltraGrid. SDP is currently available in a development branch.
Nginx requires nginx-rtmp-module to work as a media streaming server. Follow the steps to build nginx as a media streaming server.
Alternatively, you may just install distribution packages, eg. for Ubuntu:
sudo apt install nginx-core libnginx-mod-rtmp
sudo ln -s /usr/share/nginx/modules-available/mod-rtmp.conf /etc/nginx/modules-enabled/50-mod-rtmp.conf
Once you have build your environment, before starting nginx server it is required to configure nginx.conf file properly:
This example of nginx configuration file shows how to enable HTTP, RTMP and HLS at same time, in order to be able to present RTMP and HLS protocols:
include /etc/nginx/modules-enabled/*.conf;
worker_processes 1;
events {
worker_connections 1024;
}
# HTTP server
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
location / {
root html;
index index.html index.htm;
}
# path to HLS application service
location /media_server {
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
root /tmp/rtmp;
add_header Cache-Control no-cache;
}
# redirect server error pages to the static page /50x.html
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
# RTMP media server
rtmp {
server {
listen 1935;
chunk_size 4000;
# Transcoding (ffmpeg needed)
application media_server {
live on;
hls on;
hls_path /tmp/rtmp/media_server;
hls_nested on;
hls_variant _low BANDWIDTH=640000;
hls_variant _hi BANDWIDTH=2140000;
# ffmpeg static execution
exec_static ffmpeg -protocol_whitelist tcp,udp,http,rtp,file -i SOURCE -c:v libx264 -g 50 -preset fast -b:v 4096k -c:a aac -ar 44100 -f flv rtmp://127.0.0.1/media_server/stream_hi -c:v libx264 -g 50 -preset fast -b:v 1024k -c:a aac -ar 44100 -f flv rtmp://127.0.0.1/media_server/stream_low;
}
}
}
Notes:
-
to check path and permissions to properly serve from and use temporary folder
-
more and different quality outputs can be defined
-
once finished restart nginx
sudo systemctl restart nginx # or for systems without systemctl sudo nginx -s reload -
ffmpeg can be executed inside nginx or externally as shown next:
Latest snapshot of ffmpeg is highly recommended. Before installing on system it is required to add RTMP and codec library dependences.
There are three ffmpeg SOURCE input parameter cases for UltraGrid stream:
RTSP uri:
rtsp://<ultragrid_ip>:8554/ultragrid
Note: Requires current UltraGrid.
SDP uri:
http://<ultragrid_ip>:8554/ug.sdp
Manual setup.
SDP file:
o=- 1411472302457842 1 IN IP4 0.0.0.0
s=UltraGrid RTSP server
i=UltraGrid RTSP server enabling standard transport
t=0 0
a=tool:LIVE555 Streaming Media
a=type:broadcast
a=control:*
a=range:npt=0-
a=x-qt-text-nam:UltraGrid RTSP server
a=x-qt-text-inf:UltraGrid RTSP server enabling standard transport
m=audio 5006 RTP/AVP 97
c=IN IP4 0.0.0.0
b=AS:384
a=rtpmap:97 PCMU/48000/1
a=control:track1
m=video 5004 RTP/AVP 96
c=IN IP4 0.0.0.0
b=AS:5000
a=rtpmap:96 H264/90000
a=control:track2
Flowplayer is the web page video player selected, with RTMP and HLS support. The following HTML code example shows how to embed the streams inside the browser:
<html>
<head>
<meta charset="utf-8">
<title>UltraGrid live web streaming with Nginx · Live stream </title>
<link rel="stylesheet" href="//releases.flowplayer.org/5.5.0/skin/minimalist.css">
<style>
.flowplayer {
background: #777;
margin-bottom: 20px;
}
</style>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//releases.flowplayer.org/5.5.0/flowplayer.min.js"></script>
<script>
flowplayer.conf = {
live: true, // mandatory with live streams
rtmp: "rtmp://<ffmpeg_with_nginx_server_IP>/media_server"
};
flowplayer(function (api) {
api.bind("load", function (e, api, video) {
$("#vtype").text(video.type);
});
});
</script>
</head>
<body>
<h1>UltraGrid live web streaming with Nginx - Live stream</h1>
<div class="flowplayer play-button fixed-controls">
<video preload="none">
<source type="application/vnd.apple.mpegurl" src="http://<ffmpeg_with_nginx_server_IP>/media_server/stream.m3u8">
<source type="video/flash" src="stream_low">
</video>
</div>
</body>
</html>
Notes:
- RTMP stream has an address rtmp://<ffmpeg_with_nginx_server_IP>/media_server/stream_hi
Start UltraGrid process with audio and video compression supported for standard RTP transmission:
uv -t <your_video_source> -c libavcodec:codec=H.264:subsampling=420 -s <your_audio_source> --audio-codec u-law --protocol rtsp|sdp -P <port> <dest.IP>
Notes:
- To use ffmpeg with SDP source it is required to specify the destination port and IP to transmit to.
- If RTSP protocol is used as input, then destination port and IP is not required.
- It is important to use a 420 subsampling in order to achieve maximum device compatibility when decoding video.
- SDP protocol and --protocol keyword are available in newer UG, use --audio-protocol and --video-protocol in earlier versions.
In order to use ffmpeg as a transcoder tool to reach RTMP and HLS support the recommended command is as follows (similar as shown previously inside nginx.conf example file):
ffmpeg -protocol_whitelist tcp,udp,http,rtp,file -i SOURCE
-c:v libx264 -g 25 -preset fast -b:v 4096k -c:a aac -ar 44100 -f flv rtmp://127.0.0.1/media_server/stream_hi
-c:v libx264 -g 50 -preset fast -b:v 1024k -c:a aac -ar 44100 -f flv rtmp://127.0.0.1/media_server/stream_low
Notes:
- More stream qualities can be added.
- ffmpeg can be executed inside nginx as a static executable or externally (recommended for testing purposes or temporary live streaming).
Due to performance issues, ffmpeg may suffer RTP missed packets. If it's the case, is strongly recommended to use a lower x264 preset (i.e.: ultrafast, superfast,...) in order to decrease computational cost.
To reduce FFmpeg input latency, an option -probesize may be considered, see here for more details.
If more troubleshooting is of interest to be added don't hesitate on contacting us.
You may also want to disable video transcoding and keep UltraGrid stream (using -c:v copy) or use at least zero-latency tune (-tune zerolatency).
Also option that might be set is a -buffer_size for the transcoding FFmpeg. A good starting value is something like 100000.