Merge branch 'main' of https://github.com/BluemediaGER/nginx-live

Dockerfile

@@ -1,12 +1,14 @@
 # Base Image used to create this Image
-FROM debian:buster-slim
+FROM debian:bullseye-slim
 
 # Maintainer
-LABEL maintainer="oliver@traber-info.de"
+LABEL maintainer="hi@bluemedia.dev"
 
 ENV DEBIAN_FRONTEND noninteractive
 ENV RTMP_PORT 1935
 ENV HTTP_PORT 8080
+ENV HLS_FRAGMENT_LENGTH 3
+ENV HLS_PLAYLIST_LENGTH 20
 
 # Update and install packages
 RUN apt update -y && \

README.md

@@ -1,5 +1,23 @@
 # nginx-live
 
+<table>
+  <thead>
+    <tr>
+      <td align="left">
+        :warning: Notice
+      </td>
+    </tr>
+  </thead>
+
+  <tbody>
+    <tr>
+      <td align="left">
+        The docker image is now hosted as <code>git.bluemedia.dev/bluemedia/nginx-live</code>. The old registry name will continue to point to the current image for now, but may stop working at some point in the future.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
 nginx-live is a simple, lightweight, self-hosted video streaming service in a Docker container.  
 It allows you to securely stream video and audio from encoders such as OBS via RTMP or RTMPS. The stream is then converted to the HLS format so that it can be viewed by a larger number of viewers in their favorite browser.
 
@@ -10,7 +28,7 @@ It allows you to securely stream video and audio from encoders such as OBS via R
 If you want to try nginx-live, or test a configuration change, you can start the container without any environment variables. In this case the ingest is done unencrypted via RTMP. The necessary stream key is generated randomly and printed in the Docker log during the first start.
 
 ```shell
-docker run -d --name streaming -p 8080:8080 -p 1935:1935 repo.bluemedia.dev/bluemedia/nginx-live
+docker run -d --name streaming -p 8080:8080 -p 1935:1935 git.bluemedia.dev/bluemedia/nginx-live
 ```
 
 After launch, the web player should be available at `http://<hostname-or-ip>:8080/`.  
@@ -25,7 +43,7 @@ docker run -d --name streaming -p 8080:8080 -p 1935:1935 \
 -v /path/to/certs:/cert:ro \
 -e TLS_CERT=fullchain.cer \
 -e TLS_KEY=private.key \
-repo.bluemedia.dev/bluemedia/nginx-live
+git.bluemedia.dev/bluemedia/nginx-live
 ```
 
 You will now need to set the server url in your streaming software in the following format: `rtmps://<hostname-or-ip>:<rtmp-port>/live`. It is important that you specify the RTMP port.  
@@ -38,18 +56,20 @@ If you want to make the web player and the HLS files available via HTTPS, you ca
 - `TLS_CERT` - File name of the TLS certificate file in the /cert directory inside the container. If set, encrypted ingest will be enabled on the RTMP port.
 - `TLS_KEY` - File name of the private key that belongs to the TLS certificate.
 - `STREAM_KEY` - Stream key, which is needed to ingest stream data. If the variable is not set, the key is randomly generated at container startup.
+- `HLS_FRAGMENT_LENGTH` - Length of one HLS fragment in seconds. Defaults to `3`.
+- `HLS_PLAYLIST_LENGTH` - Length of the HLS playlist in seconds. Defaults to `20`.
 
 ## Built with
 - [NGINX](https://www.nginx.com/) High Performance Load Balancer, Web Server, & Reverse Proxy
 - [nginx-rtmp-module](https://github.com/arut/nginx-rtmp-module) NGINX-based Media Streaming Server
-- [voc-player](https://github.com/voc/voc-player) HTML5 Stream Player for MPEG-DASH and HLS
+- [Clappr](https://github.com/clappr/clappr) Extensible media player for the web
 
 ## Project structure / Directories
 - `config/` NGINX config files with various placeholders which will be replaced by the entrypoint script.
 - `frontend/` All frontend related files. These will be copied to the web root of nginx.
 
 ## Automated image builds
-The Docker image `repo.bluemedia.dev/bluemedia/nginx-live` is built an pushed every two days by a Jenkins instance. Builds are based on the current main branch of this repository.
+The Docker image `git.bluemedia.dev/bluemedia/nginx-live` is built an pushed every two days by a Jenkins instance. Builds are based on the current main branch of this repository.
 
 ## Contribution Guidelines
 

config/nginx-ssl.conf.skel

@@ -72,9 +72,10 @@ rtmp {
 
             # Turn on HLS
             hls on;
-            hls_path /var/www/html/hls/;
-            hls_fragment 3;
-            hls_playlist_length 20;
+            hls_path /tmp/hls;
+            hls_fragment_naming system;
+            hls_fragment {HLS_FRAGMENT_LENGTH};
+            hls_playlist_length {HLS_PLAYLIST_LENGTH};
         }
     }
 }
@@ -108,12 +109,17 @@ http {
             return 404;
         }
 
-        # Disable cache
-        add_header 'Cache-Control' 'no-cache';
+        # Serve HLS files from tempfs
+        location /hls {
+            root /tmp;
+            # Don't let browsers cache HLS files
+            add_header Cache-Control no-cache;
+        }
 
-        root /var/www/html/;
-        index index.html index.htm;
+        # Serve frontend
         location / {
+            root /var/www/html;
+            index index.html index.htm;
             try_files $uri $uri/ =404;
         }
     }

config/nginx.conf.skel

@@ -59,9 +59,10 @@ rtmp {
 
             # Turn on HLS
             hls on;
-            hls_path /var/www/html/hls/;
-            hls_fragment 3;
-            hls_playlist_length 20;
+            hls_path /tmp/hls;
+            hls_fragment_naming system;
+            hls_fragment {HLS_FRAGMENT_LENGTH};
+            hls_playlist_length {HLS_PLAYLIST_LENGTH};
         }
     }
 }
@@ -95,12 +96,17 @@ http {
             return 404;
         }
 
-        # Disable cache
-        add_header 'Cache-Control' 'no-cache';
+        # Serve HLS files from tempfs
+        location /hls {
+            root /tmp;
+            # Don't let browsers cache HLS files
+            add_header Cache-Control no-cache;
+        }
 
-        root /var/www/html/;
-        index index.html index.htm;
+        # Serve frontend
         location / {
+            root /var/www/html;
+            index index.html index.htm;
             try_files $uri $uri/ =404;
         }
     }

entrypoint

@@ -26,6 +26,8 @@ if [ ! -f /setup.lock ]; then
     sed -i "s/{RTMP_PORT}/$RTMP_PORT/g" /etc/nginx/nginx.conf
     sed -i "s/{STREAM_KEY}/$VALID_STREAM_KEY/g" /etc/nginx/nginx.conf
     sed -i "s/{HTTP_PORT}/$HTTP_PORT/g" /etc/nginx/nginx.conf
+    sed -i "s/{HLS_FRAGMENT_LENGTH}/$HLS_FRAGMENT_LENGTH/g" /etc/nginx/nginx.conf
+    sed -i "s/{HLS_PLAYLIST_LENGTH}/$HLS_PLAYLIST_LENGTH/g" /etc/nginx/nginx.conf
 
     # Touch setup lock
     touch /setup.lock

frontend/index.html

@@ -4,7 +4,12 @@
         <meta charset="UTF-8">
         <title>Livestream</title>
         <link rel="icon" href="assets/favicon.ico">
-        <link rel="stylesheet" href="assets/css/style.css">
+        <link rel="stylesheet" href="assets/style.css">
+        <script type="text/javascript" crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/clappr/dist/clappr.min.js"></script>
+        <script type="text/javascript" crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/clappr-stats/dist/clappr-stats.min.js"></script>
+        <script type="text/javascript" crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/clappr-nerd-stats/dist/clappr-nerd-stats.min.js"></script>
+        <script type="text/javascript" crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/clappr-pip-plugin/dist/clappr-pip-plugin.js"></script>
+</head>
     </head>
     <body>
         <div class="container">
@@ -14,23 +19,34 @@
             <div id="player"></div>
           </div>
     </body>
-    <script src="assets/js/player.js"></script>
     <script>
-        // expose Clappr to load additional plugins
-        window.Clappr = window.VOCPlayer
-    </script>
-    <script>
-        new VOCPlayer.Player({
+        new Clappr.Player({
 
             //** Standard clappr.io Options **
             // Use custom source
             sources: ["hls/live.m3u8"],
 
+            // Plugins
+            plugins: [ClapprNerdStats, ClapprStats, ClapprPIPPlugin],
+            clapprNerdStats: {
+                iconPosition: 'none'
+            },
+
+            // Disable m3u8 preload to prevent error on page load
+            hlsPlayback: {
+                preload: false
+            },
+
             // Set a custom poster
             poster: "assets/backdrop.jpg",
 
             // Assign parent by id
-            parentId: "#player"
-    })
+            parentId: "#player",
+
+            // Set dimensions and media control delay
+            height: "100%",
+            width: "100%",
+            hideMediaControlDelay: 1000
+        })
     </script>
 </html>