Live web streaming with Nginx

---

title: Live web streaming with Nginx permalink: /Live_web_streaming_with_Nginx/

Overview

This guide explains how to embed RTMP and/or HLS stream protocols coming from UltraGrid inside a web page.

Setting up

UltraGrid

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

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:

nginx.conf

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;    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 /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 -f 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 -f flv rtmp://127.0.0.1/media_server/stream_low;        }    } }

Notes:

1. to check path and permissions to properly serve from and use temporary folder
2. more and different quality outputs can be defined
3. ffmpeg can be executed inside nginx or externally as shown next:

FFMPEG

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 source

RTSP uri:

rtsp://<ultragrid_ip>:8554/ultragrid

SDP source

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

HTML

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:

`  ` `  ` <title> UltraGrid live web streaming with Nginx · Live stream </title> `  ` `  ` <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://`](rtmp://)`/media_server"` `   };` `   flowplayer(function (api) {` `    api.bind("load", function (e, api, video) {` `     $("#vtype").text(video.type);` `    });` `   });` `  ` </script> `  

UltraGrid live web streaming with Nginx · Live stream

` `   

` `    ` `     /media_server/stream.m3u8">` `     ` `    ` `   

` `  ` ` `

Streaming

UltraGrid

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 --rtsp-server -P``  <dest.IP>

Notes:

1. To use ffmpeg with SDP source it is required to specify the destination port and IP to transmit to.
2. If RTSP protocol is used as input, then destination port ant IP are not required.
3. It is important to use a 420 subsampling in order to achieve maximum device compatibility when decoding video.

FFMPEG

In order to use ffmpeg as a transcoder tool to reach RTMP and HLS support the recommended command is as follows (similar as showed previously inside nginx.conf example file):

ffmpeg -i SOURCE   -c:v libx264 -g 25 -preset fast -b:v 4096k -c:a libfdk_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 libfdk_aac -ar 44100 -f flv rtmp://127.0.0.1/media_server/stream_low

Notes:

1. More stream qualities can be added.
2. ffmpeg can be executed inside nginx as a static executable or externally (recommended for testing purposes or temporary live streaming).

Troubleshooting

Due to performance issues, ffmpeg may suffer RTP missed packets. If it's the case, is is strongly recommended to use a lower x264 preset (i.e.: ultrafast, superfast,...) in order to decrease computational cost.

If more troubleshooting are of interest to be added don't hesitate on contacting us.