-
Notifications
You must be signed in to change notification settings - Fork 59
Live web streaming with Nginx
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 trough the RTSP server module.
To enable standard RTP protocols live555 library is required (e.g.: sudo apt-get install liblivemedia-dev) before configuring UltraGrid.
Nginx requires nginx-rtmp-module to work as a media streaming server. Follow the steps to build nginx as a media streaming server.
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:
worker_processes 1;
events {
worker_connections 1024;
}
# HTTP server
http {
include mime.types;
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 /home/user/tmp;
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 /home/user/tmp/media_server;
hls_nested on;
hls_variant _low BANDWIDTH=640000;
hls_variant _hi BANDWIDTH=2140000;
# ffmpeg static execution
exec_static /usr/local/bin/ffmpeg -i SOURCE -c:v libx264 -g 50 -preset fast -b:v 4096k -c:a libfdk_aac -ar 44100 -flv rtmp://127.0.0.1/media_server/stream_hi -c:v libx264 -g 50 -preset fast -b:v 1024k -c:a libfdk_aac -ar 44100 -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
- 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 two ffmpeg SOURCE input parameter cases for UltraGrid stream:
RTSP uri:
rtsp://<ultragrid_ip>:8554/ultragrid
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">`
If you have any technical or non-technical question or suggestion please feel free to contact us at