Add example hls.js player and update README.md. Updated static serving in nginx.conf.

alfg · alfg · commit 97128e7ca5f9 · 2021-02-16T20:57:31.000-08:00
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>

Original file line number	Diff line number	Diff line change
`@@ -41,6 +41,7 @@ rtmp {`
`41`	`41`	`}`
`42`	`42`
`43`	`43`	`http {`
	`44`	`+ root /www/static;`
`44`	`45`	`access_log /dev/stdout combined;`
`45`	`46`
`46`	`47`	`ssl_ciphers HIGH:!aNULL:!MD5;`
`@@ -80,15 +81,14 @@ http {`
`80`	`81`
`81`	`82`	`location /stat {`
`82`	`83`	`rtmp_stat all;`
`83`		`- rtmp_stat_stylesheet static/stat.xsl;`
	`84`	`+ rtmp_stat_stylesheet stat.xsl;`
`84`	`85`	`}`
`85`	`86`
`86`		`- location /static {`
`87`		`- alias /www/static;`
	`87`	`+ location /stat.xsl {`
	`88`	`+ root /www/static;`
`88`	`89`	`}`
`89`	`90`
`90`		`- location = /crossdomain.xml {`
`91`		`- root /www/static;`
	`91`	`+ location /crossdomain.xml {`
`92`	`92`	`default_type text/xml;`
`93`	`93`	`expires 24h;`
`94`	`94`	`}`