Nginx installation
👉 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>The resolution of the HLS stream has some bearing on the overall FPS of the AI part. The smaller the resolution, the higher the FPS you get.
You can alter the resolution with the ffmpeg instruction in the /etc/rc.local file. At the end, you will find the statement.
$ sudo nano /etc/rc.local
#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 &
You may change it to
ffmpeg -input_format h264 -f video4linux2 -video_size 640x480 -framerate 20 -i /dev/video0 -c:v copy -an -f flv rtmp://localhost/live/rpi &
| Resolution | FPS |
|---|---|
| 1296 x 972 | 3.6 |
| 640 x 480 | 5.0 |
Don't fall into the 'over-framing' culprit. You must give the AI part some breathing space. You will see it on the CPU usage graph at the top of your screen. A fully filled 79%, without spikes, indicates an overflow in the frame buffer. It results in an incremental latency of up to 60 seconds. (max HLS buffer).
It can be the case if you stream at 640x480 @25 FPS. You will get a very nice AI FPS of 5.6, however, the time lag starts to build up.
And, after all, you will always detect the bear in the backyard, no matter if you have two or five frames per second.
