Refresh viewer counter every 20 seconds

web/static/js/viewersCounter.js

@@ -0,0 +1,18 @@
+function refreshViewersCounter() {
+    let xhr = new XMLHttpRequest()
+    xhr.open("GET", "/_stats/", true)
+    xhr.onload = function () {
+        console.log(xhr.response)
+        if (xhr.status === 200) {
+            let data = JSON.parse(xhr.response)
+            document.getElementById("connected-people").innerText = data.ConnectedViewers
+        }
+        else
+            console.log("WARNING: status code " + xhr.status + " was returned while fetching connected viewers.")
+    }
+    xhr.send()
+
+    setTimeout(refreshViewersCounter, 20000)
+}
+
+refreshViewersCounter()

web/template/viewer.html

@@ -17,6 +17,13 @@
       </svg>
       <code>rtmps://{{.Cfg.Hostname}}:1935/play/{{.Path}}</code>-->
 
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+        <g fill="#d7d7d7">
+          <path d="M10 11c-5.92 0-8 3-8 5v3h16v-3c0-2-2.08-5-8-5z"/>
+          <circle cx="10" cy="5.5" r="4.5"/>
+        </g>
+      </svg> <span id="connected-people">0</span>
+
       <svg id="connectionIndicator" width="1em" height="1em" viewBox="0 0 16 16" fill="#dc3545" xmlns="http://www.w3.org/2000/svg">
         <rect width="4" height="5" x="1" y="10" rx="1"/>
         <rect width="4" height="9" x="6" y="6" rx="1"/>
@@ -36,6 +43,7 @@
 
 <script src="/static/js/sideWidget.js"></script>
 <script src="/static/js/viewer.js"></script>
+<script src="/static/js/viewersCounter.js"></script>
 <script>
   const stunServers = [
     {{range $id, $value := .Cfg.STUNServers}}