-
Notifications
You must be signed in to change notification settings - Fork 0
Page 4 Stream your Desktop in HLS and watch it in a web page
Before continuing this wiki, make sure you followed previous instructions about how to stream your desktop on your own Nginx Server. If not, just take a look here.
How HLS works... With HLS, you make little video fragments, which are listed in a file usually called index.m3u8.
In this file are order listed the HLS fragments to make sure your player read them by order. It's totally transparent, you can't imagine that you're reading little video files of 5 seconds placed one after another.
These fragments are stored on your server, in a directory. And when you stop streaming, all these files are removed automatically. Also, HLS does not store all the files since beginning, the 1rst file is removed after a certain time laps, and the 1rst file becomes the 2nd and so on...
The index.m3u8 file is like a playlist in definitive.
You can adjust this playlist to store 30 seconds of video, in fragments of 5 seconds for example. You can adjust these parameters very easilly. I'll show you that in a little moment.
We need to create a directory to store these fragments to read them, in `my case, I created a directory in my root :
cd /
sudo mkdir HLS
sudo mkdir HLS/live
sudo mkdir video_recordings
Why I created a live sub-directory? Because this is the name of my Stream application in nginx.conf. Remember, previously we ran our stream in rtmp://server_IP:1935/live. You can got a lot of streaming applications to make more than one stream at the same time. You'll understand just after looking at nginx.conf file.
Make sure the new directories got 755 rights typing a ls -l command.
If not :
sudo chmod -R 755 HLS
If you want to store your streamings and make a little VOD (Video On Demand) service you must give all rights to that directory :
sudo chmod -R 777 video_recordings
Make a backup of your original or working nginx.conf
cd /usr/local/nginx/conf
sudo cp nginx.conf nginx.conf.back
Place this configuration in your nginx.conf file, and i will explain you some things about what I did. I use vim but you can also use nano :
cd /usr/local/nginx/conf
sudo vim nginx.conf
Replace all with this configuration :
# user nobody;
worker_processes 1;
error_log logs/error.log debug;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
server {
listen 80;
server_name localhost;
location /live {
types {
application/vnd.apple.mpegurl m3u8;
}
alias /HLS/live;
add_header Cache-Control no-cache;
}
location / {
root html;
index index1.html;
}
}
}
rtmp {
server {
listen 1935;
allow play all;
ping 30s;
notify_method get;
application live {
allow play all;
live on;
record off;
#record all;
#record_path /video_recordings;
#record_unique on;
hls on;
hls_nested on;
hls_path /HLS/live;
hls_fragment 3;
hls_playlist_length 5;
#deny play all;
}
application vod {
play /video_recordings;
}
}
}
For now, we are interested on the HTTP part, and principally on locations :
http {
include mime.types;
default_type application/octet-stream;
server {
listen 80;
server_name localhost;
location /live {
types {
application/vnd.apple.mpegurl m3u8;
}
alias /HLS/live;
add_header Cache-Control no-cache;
}
location / {
root html;
index index.html;
}
}
}
Here, we are talking about the HTTP part, or Web part...
listen 80 means that your web pages are reachable through the native HTTP port, so 80 (You can modify that port but I advise you not to).
Location /live and alias /HLS/live means that when you want to reach your index.m3u8 file to pull the stream into your HTML code typing http://IP-server/live/index.m3u8, the alias provides the shortcut to /HLS/live.
Location / means that when typing http://IP-server into your web browser, you reach your index web page (understand your root page...) which is index1.html in my case, through /usr/local/nginx/html/.
rtmp {
server {
listen 1935;
allow play all;
ping 30s;
notify_method get;
application live {
allow play all;
live on;
record off;
#record all;
#record_path /video_recordings;
#record_unique on;
hls on;
hls_nested on;
hls_path /HLS/live;
hls_fragment 3;
hls_playlist_length 5;
#deny play all;
}
application vod {
play /video_recordings;
}
}
}
This part talk about the RTMP-module provided by @arut (Thank to him)
listen 1935 means that that the RTMP port to Stream is the native RTMP port (1935 so...). That's the port you'll use to pull your Streams into your server (Just like previous tutorial).
hls_fragment is the lenght of a fragment, in seconds.
hls_playlist_lenght is the max fragment number which will be created
So in my case, there will be 5 fragments of 3 seconds created.
Uncomment the 3 #record and each time you make a stream, it will be saved in /video_recordings. You can watch your saved streams using VLC and typing http://server_IP/vod/saved_file_name
I did not explain application or live, because I did it on previous tutorial.
You can check https://github.com/arut/nginx-rtmp-module/wiki/Directives for more information about HLS and all available options. I think it's the best way to understand the rest of nginx.conf.
Now, stop and start your nginx server :
sudo /usr/local/nginx/sbin/nginx -s stop
sudo /usr/local/nginx/sbin/nginx
Actually you can stream into your server just like in the previous tutorial. Let start streaming your desktop into your nginx server (change the screen resolution adapted to your conf) :
ffmpeg -f x11grab -s 1920x1080 -r 30 -i :0.0 \
-f alsa -ac 2 -i pulse -vcodec libx264 \
-s 1920x1080 -strict -2 -acodec aac \
-ab 128k -ar 44100 -threads 0 \
-f flv "rtmp://server_IP:1935/live"
Here, I just changed the libmp3lame audio codec for aac because it wasn't supported by HLS. AAC is an "experimental" codec, so we need to add -strict -2 to run it.
Ok, the stream is on, let check what happens into our HLS directory : (by SSH into the server)
ls /HLS/live
You can see different files created, and index.m3u8. HLS is working well. Repeat the command after somme seconds, more files are created.
In our HTML code, these files will be reached using http://server_IP/live/index.m3u8.
You can make a test, using VLC to watch your stream with that URL :
http://server_IP/live/index.m3u8
Now, make a backup of your old index.html :
cd /usr/local/nginx/html
sudo cp index.html index.html.back
And copy all the following HTML code into index.html modifying into the JavaScript http://server_IP/live/index.m3u8 with the IP of your nginx server :
sudo vim /usr/local/nginx/html/index.html
<DOCTYPE! html>
<html>
<head>
<script src="//releases.flowplayer.org/7.0.0/flowplayer.min.js"></script>
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script>
</head>
<script language=JavaScript>
window.onload = function () {
flowplayer("#hlsjslive", {
splash: true,
embed: false,
ratio: 9/16,
clip: {
hlsjs: {
// slightly better behaviour for this problem stream
smoothSwitching: false
},
live: true,
sources: [
{ type: "application/x-mpegurl",
src: "http://server_IP/live/index.m3u8" }
]
}
});
};
</script>
<style>
body{ background-color:#EEE; }
H1, H2{
color:black;
line-height:40px;
padding:0px;
margin:0px;
}
#hlsjslive{position:absolute; top:50px; left:0px; right:0px; max-height:400px;}
.fp-player{width:100%; height:20px;}
.fp-engine{width:100%;}
.streaming{width:100%;}
.info{margin-top:500px;}
.fp-help, .fp-menu{
opacity:0;
}
.fp-ui{
dislpay:inline-block;
width:100%;
font-size:0px;
padding:10px;
margin:0px;
color:white;
z-index:99999;
}
.fp-ratio{
padding-top:0px !important;
}
.fp-play-rounded-fill{z-index:1; opacity:1;}
svg{position:absolute; margin:auto; top:-50px; height:40px;
padding:5px; display:block; right:10px; opacity:0;}
</style>
<body>
<div class="streaming">
<h2 id="live">Live Stream</h2>
<div id="hlsjslive"></div>
</div>
</body>
</html>
Choose Files
To make that code, I used the official Flowplayer web site to inspire myself : http://demos.flowplayer.org/api/hlsjs.html
I adapted it for me, and I had some help from friends who are better than me with HTML.
Now, open your web browser (it doesn't works with FireFox for now), I use Google Chrome, type the server IP address in the URL bar, and press play button on the top right side of the web page.
It works!
Now, you know how to configure Nginx for HLS, and watch your stream in a web page. It's a usefull tool for teaching for example, or help someone who are distant.
In a next tutorial, i'll show you how to make all this work, using a Docker Container, instead of using a Client and a Server. An all-in-one.
Thank you for attending this tutorial.
Best regards.
pixhub.