Nginx

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>