-
Notifications
You must be signed in to change notification settings - Fork 0
Nginx
Q-engineering edited this page Aug 9, 2022
·
5 revisions
👉 If you use our image it's already installed.
However, if you want to install it on another RPi, here are the steps.
Note the use of the dev/shm
folder for storing the HLS fragments.
The folder resides in RAM, so there is no writing to the SD card.
$ sudo apt-get install libpcre3-dev libssl-dev libomxil-bellagio-dev
$ sudo apt-get install nginx
$ sudo apt-get install libnginx-mod-rtmp
$ sudo chmod a+rwx /var/www/
$ sudo chmod a+rwx /var/www/html
$ sudo chmod a+rwx /etc/nginx/
$ sudo mkdir -p /dev/shm/hls/
$ sudo ln -s /dev/shm/hls /var/www/html/hls
$ sudo nano /etc/nginx/nginx.conf
In nginx.conf
the next text
user www-data;
worker_processes 1;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;
events {
worker_connections 256;
# multi_accept on;
}
rtmp {
server {
listen 1935;
application live {
live on;
hls on;
hls_path /var/www/html/hls;
hls_fragment 3;
hls_playlist_length 60;
deny play all;
}
}
}
http {
##
# Basic Settings
##
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
# server_tokens off;
# server_names_hash_bucket_size 64;
# server_name_in_redirect off;
include /etc/nginx/mime.types;
default_type application/octet-stream;
server {
listen 80;
server_name localhost;
location /hls {
add_header 'Cache-Control' 'no-cache';
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Expose-Headers' 'Content-Length';
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Max-Age' 2592000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
types {
application/dash+xml mpd;
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
root /var/www/html;
}
}
##
# SSL Settings
##
ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
ssl_prefer_server_ciphers on;
##
# Logging Settings
##
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
##
# Gzip Settings
##
gzip on;
# gzip_vary on;
# gzip_proxied any;
# gzip_comp_level 6;
# gzip_buffers 16 8k;
# gzip_http_version 1.1;
# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
##
# Virtual Host Configs
##
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
}
Once nginx.conf is ready you can test it with sudo nginx -t
Now we have to make some folders used for HLS streaming.
$ sudo mkdir -p /var/lib/streaming
$ sudo nano /var/lib/streaming/setup_streaming.sh
In setup_streaming.sh
# /var/lib/streaming/setup_streaming.sh
mkdir -p /dev/shm/hls
if [ ! -e /var/www/html/hls ]; then
ln -s /dev/shm/hls /var/www/html/hls
fi
Make setup_streaming.sh
executable and edit rc.local
$ sudo chmod +x /var/lib/streaming/setup_streaming.sh
$ sudo nano /etc/rc.local
At the end of rc.local, just before exit 0 place
# Streaming Shared Memory Setup
if [ -f /var/lib/streaming/setup_streaming.sh ]; then
/bin/bash /var/lib/streaming/setup_streaming.sh|| true
fi
#start streaming (notice the & at the end)
ffmpeg -input_format h264 -f video4linux2 -video_size 1296x972 -framerate 15 -i /dev/video0 -c:v copy -an -f flv rtmp://localhost/live/rpi &
We must make recordings possible and use a script $ sudo nano /usr/local/bin/MkRecDir.sh
#!/bin/sh
if [ ! -e $1 ]; then
sudo mkdir -p $1
sudo chown -R www-data:www-data $1
sudo chmod -R a+rwx $1
fi
And make it executable again with $ sudo chmod 755 /usr/local/bin/MkRecDir.sh
The last action is the /var/www/html/index.html
page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.responsive {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<video id="my-video" alt="Nature" class="responsive" width="auto" height="auto" autoplay controls></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
if ( Hls.isSupported() ) {
var video = document.getElementById('my-video');
var hls = new Hls();
hls.attachMedia(video);
hls.on(Hls.Events.MEDIA_ATTACHED, function () {
console.log('video and hls.js are now bound together !');
hls.loadSource('/hls/rpi.m3u8');
// hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8');
hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
console.log('manifest loaded, found ' + data.levels.length + ' quality level');
video.muted = true; // without this line it's not working although I have "muted" in HT
video.crossOrigin = 'anonymous';
video.play();
});
});
}
</script>
</body>
</html>