update all pages to buffer better, show live seekbar

add viewer script for viewers.html
update nginx confs

nginx/rtmp.conf

@@ -12,14 +12,14 @@ rtmp {
 			#dash
 			dash on;
 			dash_path /tmp/dash;
-			dash_fragment 4;
-			dash_playlist_length 30;
+			dash_fragment 5;
+			dash_playlist_length 60;
 			#hls
 			hls on;
 			hls_fragment_naming system;
 			hls_path /tmp/hls;
-			hls_fragment 4;
-			hls_playlist_length 30;
+			hls_fragment 5;
+			hls_playlist_length 60;
 			#rtmp
 			on_publish http://127.0.0.1:7069/forms/stream;
 			live on;

nginx/stream.conf

@@ -24,6 +24,7 @@ server {
 	location /stat.html {
 		rtmp_stat all;
 		rtmp_stat_stylesheet /stat.xsl;
+		add_header Refresh "3; $request_uri";
 	}
 
 	location /stat.xsl {

nginx/www/stream/dash.html

@@ -33,7 +33,7 @@ a,a:visited {color:unset;}
 				class="video-js vjs-default-skin"
 				controls
 				preload="auto"
-				style="max-width:100%;max-height:100%;display: flex;margin: 0 auto;"
+				style="max-width:100%;max-height:100%;display: flex;margin: 0 auto;width: 100%;height: 100%;"
 				data-setup='{}'>
 			</video>
 			<iframe id="chat"
@@ -43,14 +43,14 @@ a,a:visited {color:unset;}
 			</iframe>
 		</div>
 		<div id="footer">
+			<small>
+				Want a stream key? Join #general and ask ➔ 
+			</small>
 			<div>
-				<a href='http://stream.loki/hls.html'>HLS</a> (<a href='http://stream.loki/hls/tom.m3u8'>m3u8</a>)
+				<a href='/hls.html'>HLS</a> (<a href='/hls/tom.m3u8'>m3u8</a>) / <b><a href='/dash.html'>DASH</a></b> (<a href='/dash/tom.mpd'>mpd</a>) / <a href='rtmp://stream.loki/live/tom'>RTMP</a>
 			</div>
 			<div>
-				<b><a href='http://stream.loki/dash.html'>DASH</a></b> (<a href='http://stream.loki/dash/tom.mpd'>mpd</a>)
-			</div>
-			<div>
-				RTMP (<a href='rtmp://stream.loki/live/tom'>rtmp://</a>)
+				<a href='/stat.html'>Stream List</a>
 			</div>
 		</div>
 		<script>
@@ -69,17 +69,23 @@ document
 const chat = document.getElementById('chat');
 chat.src = chat.src.replace('@tom', `@${source}`);
 window.HELP_IMPROVE_VIDEOJS = false;
+videojs.Hls.GOAL_BUFFER_LENGTH_RATE = 2;
+videojs.Hls.GOAL_BUFFER_LENGTH = 60;
+videojs.Hls.MAX_GOAL_BUFFER_LENGTH = 120;
 const player = videojs('video', {
 	html5: {
 		vhs: {
-			experimentalBufferBasedABR: true
+			experimentalBufferBasedABR: false
+			handlePartialData: true,
+			allowSeeksWithinUnsafeLiveWindow: true,
 		}
 	},
+	liveui: true,
 	autoplay: 'any',
 });
 player.src({
-	src: `http://stream.loki/dash/${source}.m3u8`,
-	type: 'application/',
+	src: `/dash/${source}.mpd`,
+	type: 'application/dash+xml',
 });
 player.play();
 /*setInterval(() => {

nginx/www/stream/hls.html

@@ -33,7 +33,7 @@ a,a:visited {color:unset;}
 				class="video-js vjs-default-skin"
 				controls
 				preload="auto"
-				style="max-width:100%;max-height:100%;display: flex;margin: 0 auto;"
+				style="max-width:100%;max-height:100%;display: flex;margin: 0 auto;width: 100%;height: 100%;"
 				data-setup='{}'>
 			</video>
 			<iframe id="chat"
@@ -43,14 +43,14 @@ a,a:visited {color:unset;}
 			</iframe>
 		</div>
 		<div id="footer">
+			<small>
+				Want a stream key? Join #general and ask ➔ 
+			</small>
 			<div>
-				<b><a href='http://stream.loki/hls.html'>HLS</a></b> (<a href='http://stream.loki/hls/tom.m3u8'>m3u8</a>)
+				<b><a href='/hls.html'>HLS</a></b> (<a href='/hls/tom.m3u8'>m3u8</a>) / <a href='/dash.html'>DASH</a> (<a href='/dash/tom.mpd'>mpd</a>) / <a href='rtmp://stream.loki/live/tom'>RTMP</a>
 			</div>
 			<div>
-				<a href='http://stream.loki/dash.html'>DASH</a> (<a href='http://stream.loki/dash/tom.mpd'>mpd</a>)
-			</div>
-			<div>
-				RTMP (<a href='rtmp://stream.loki/live/tom'>rtmp://</a>)
+				<a href='/stat.html'>Stream List</a>
 			</div>
 		</div>
 		<script>
@@ -72,13 +72,17 @@ window.HELP_IMPROVE_VIDEOJS = false;
 const player = videojs('video', {
 	html5: {
 		vhs: {
-			experimentalBufferBasedABR: true
-		}
+			experimentalBufferBasedABR: true,
+			liveRangeSafeTimeDelta: 10,
+			handlePartialData: true,
+			allowSeeksWithinUnsafeLiveWindow: true,
+		},
 	},
+	liveui: true,
 	autoplay: 'any',
 });
 player.src({
-	src: `http://stream.loki/hls/${source}.m3u8`,
+	src: `/hls/${source}.m3u8`,
 	type: 'application/vnd.apple.mpegurl',
 });
 player.play();

nginx/www/stream/stat.xsl

@@ -212,7 +212,6 @@
                     <th>Id</th>
                     <th>State</th>
                     <th>Address</th>
-                    <th>Flash version</th>
                     <th>Page URL</th>
                     <th>SWF URL</th>
                     <th>Dropped</th>
@@ -304,25 +303,16 @@
         </xsl:attribute>
         <td><xsl:value-of select="id"/></td>
         <td><xsl:call-template name="clientstate"/></td>
+        <td><xsl:value-of select="address"/></td>
         <td>
             <a target="_blank">
                 <xsl:attribute name="href">
-                    https://bgp.he.net/ip/<xsl:value-of select="address"/>
+                    http://stream.loki/?<xsl:value-of select="../name"/>
                 </xsl:attribute>
-                <xsl:attribute name="title">whois</xsl:attribute>
-                <xsl:value-of select="address"/>
+				http://stream.loki/?<xsl:value-of select="../name"/>
             </a>
         </td>
-        <td><xsl:value-of select="flashver"/></td>
-        <td>
-            <a target="_blank">
-                <xsl:attribute name="href">
-                    <xsl:value-of select="pageurl"/>
-                </xsl:attribute>
-                <xsl:value-of select="pageurl"/>
-            </a>
-        </td>
-        <td><xsl:value-of select="swfurl"/></td>
+        <td>rtmp://stream.loki/live/<xsl:value-of select="../name"/></td>
         <td><xsl:value-of select="dropped"/></td>
         <td><xsl:value-of select="timestamp"/></td>
         <td><xsl:value-of select="avsync"/></td>

nginx/www/stream/viewers.html

@@ -0,0 +1 @@
+<!DOCTYPE html><html><body>👁️ 1</body></html>

viewers.sh

@@ -0,0 +1,14 @@
+#!/bin/bash
+
+timestamp_now=$(date +'%s')
+timestamp_prev=$(date -d '1 min ago' +'%s')
+lf_now=$(date +'%b %d %H:%M:' -d @$timestamp_now)
+lf_prev=$(date +'%b %d %H:%M:' -d @$timestamp_prev)
+viewers=`tail -n 10000 /var/log/haproxy.log \
+    | grep -E 'GET /(hls|dash)/' \
+    | grep -E "${lf_now}|${lf_prev}" \
+    | awk '{print $6}' \
+    | sort \
+    | uniq \
+    | wc -l`
+echo "<!DOCTYPE html><html><body>👁️ $viewers</body></html>" > /var/www/stream/viewers.html