Add example hls.js player and update README.md. Updated static servin…

…g in nginx.conf.
alfg · Feb 17, 2021 · 97128e7 · 97128e7
1 parent 19265b1
commit 97128e7
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -62,7 +62,10 @@ volumes:
 * Stream Key: `hello`
 
 ### Watch Stream
-* In Safari, VLC or any HLS player, open:
+* Load up the example hls.js player in your browser:
+http://localhost:8080/player/?url=http://localhost:8080/live/hello.m3u8
+
+* Or in Safari, VLC or any HLS player, open:
 ```
 http://localhost:8080/live/$STREAM_NAME.m3u8
 ```

diff --git a/nginx-cuda.conf b/nginx-cuda.conf
@@ -41,6 +41,7 @@ rtmp {
 }
 
 http {
+    root /www/static;
     access_log /dev/stdout combined;
 
     ssl_ciphers         HIGH:!aNULL:!MD5;
@@ -80,15 +81,14 @@ http {
 
         location /stat {
             rtmp_stat all;
-            rtmp_stat_stylesheet static/stat.xsl;
+            rtmp_stat_stylesheet stat.xsl;
         }
 
-        location /static {
-            alias /www/static;
+        location /stat.xsl {
+            root /www/static;
         }
 
-        location = /crossdomain.xml {
-            root /www/static;
+        location /crossdomain.xml {
             default_type text/xml;
             expires 24h;
         }

diff --git a/nginx.conf b/nginx.conf
@@ -41,6 +41,7 @@ rtmp {
 }
 
 http {
+    root /www/static;
     access_log /dev/stdout combined;
 
     ssl_ciphers         HIGH:!aNULL:!MD5;
@@ -80,15 +81,14 @@ http {
 
         location /stat {
             rtmp_stat all;
-            rtmp_stat_stylesheet static/stat.xsl;
+            rtmp_stat_stylesheet stat.xsl;
         }
 
-        location /static {
-            alias /www/static;
+        location /stat.xsl {
+            root /www/static;
         }
 
-        location = /crossdomain.xml {
-            root /www/static;
+        location /crossdomain.xml {
             default_type text/xml;
             expires 24h;
         }

diff --git a/static/player/index.html b/static/player/index.html
@@ -0,0 +1,52 @@
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>hls.js Player</title>
+    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
+    <style>
+        .container {
+            width: 80%;
+            margin: 0 auto;
+        }
+
+        .video-wrapper {
+            padding-top: 20px;
+            height: 80%;
+            margin: 0 auto;
+        }
+
+        video {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+        <h1>hls.js player</h1>
+        <a href="https://github.com/video-dev/hls.js">github.com/video-dev/hls.js</a>
+        <div class="video-wrapper">
+            <video id="video" controls muted></video>
+        </div>
+    </div>
+
+    <script>
+    var params = new URLSearchParams(window.location.search);
+    var url = params.get('url');
+    if (Hls.isSupported()) {
+        var video = document.getElementById('video');
+        var hls = new Hls();
+        hls.attachMedia(video);
+        hls.on(Hls.Events.MEDIA_ATTACHED, function () {
+            hls.loadSource(url);
+            hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
+                video.play();
+            });
+        });
+    }
+    </script>
+  </body>
+</html>