Add endpoint for returning stream status

handler.go

@@ -38,7 +38,6 @@ func (h *Handler) OnCreateStream(timestamp uint32, cmd *rtmpmsg.NetConnectionCre
 
 func (h *Handler) OnPublish(timestamp uint32, cmd *rtmpmsg.NetStreamPublish) error {
 	// log.Printf("OnPublish: %#v", cmd)
-
 	log.Println("Incoming stream connected.")
 
 	if cmd.PublishingName != configuration.VideoSettings.StreamingKey {
@@ -68,6 +67,8 @@ func (h *Handler) OnPublish(timestamp uint32, cmd *rtmpmsg.NetStreamPublish) err
 
 	go startFfmpeg(configuration)
 
+	streamConnected()
+
 	return nil
 }
 
@@ -164,4 +165,6 @@ func (h *Handler) OnClose() {
 	if h.flvFile != nil {
 		_ = h.flvFile.Close()
 	}
+
+	streamDisconnected()
 }

main.go

@@ -1,6 +1,7 @@
 package main
 
 import (
+	"encoding/json"
 	"net/http"
 	"strconv"
 
@@ -10,6 +11,7 @@ import (
 
 var ipfs icore.CoreAPI
 var configuration = getConfig()
+var online = false
 
 func main() {
 	checkConfig(configuration)
@@ -49,8 +51,28 @@ func startChatServer() {
 
 	// static files
 	http.Handle("/", http.FileServer(http.Dir("webroot")))
+	http.HandleFunc("/status", getStatus)
 
 	log.Printf("Starting public web server on port %d", configuration.WebServerPort)
 
 	log.Fatal(http.ListenAndServe(":"+strconv.Itoa(configuration.WebServerPort), nil))
 }
+
+func getStatus(w http.ResponseWriter, r *http.Request) {
+	status := Status{
+		Online: online,
+	}
+	json.NewEncoder(w).Encode(status)
+}
+
+type Status struct {
+	Online bool `json:"online"`
+}
+
+func streamConnected() {
+	online = true
+}
+
+func streamDisconnected() {
+	online = false
+}

webroot/index.html

@@ -6,6 +6,7 @@
     href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
     rel="stylesheet"
   />
+  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 
   <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
 
@@ -15,11 +16,13 @@
   <script data-main="js/main" src="vendor/require.js"></script>
 </head>
 
-<div
-  class="flex"
->
+<div>
+  <div class="flex">
     <div class="w-4/6">
       <video id="video" controls style="width: 100%;"></video>
+      <div id="app">
+        {{ streamStatus }}
+      </div>
     </div>
 
     <div class="w-2/6">
@@ -31,7 +34,11 @@
         <div data-bind="foreach: messages">
           <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
             <div class="flex items-center">
-            <img data-bind="attr:{src: image}" class="w-10 h-10 rounded-full mr-4 border-black-500" style="padding: 5px; background-color:#ececec;" />
+              <img
+                data-bind="attr:{src: image}"
+                class="w-10 h-10 rounded-full mr-4 border-black-500"
+                style="padding: 5px; background-color: #ececec;"
+              />
 
               <div class="text-sm">
                 <p class="text-700" data-bind="text:author"></p>
@@ -40,8 +47,6 @@
             </div>
           </div>
         </div>
-			
-				
       </div>
       <form
         class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
@@ -84,6 +89,7 @@
       </form>
     </div>
   </div>
+</div>
 
 <script>
   var video = document.getElementById("video");
@@ -116,3 +122,33 @@
     });
   }
 </script>
+
+<script>
+  var app = new Vue({
+    el: "#app",
+    data: {
+      streamStatus: "Hello Vue!",
+    },
+  });
+</script>
+
+<script>
+    setInterval(getStatus, 5000);
+
+  async function getStatus() {
+    let url = "/status";
+    try {
+      let response = await fetch(url);
+      let status = await response.json(); // read response body and parse as JSON
+          app.streamStatus = status.online
+      ? "Stream is online."
+      : "Stream is offline.";
+
+    } catch(e) {
+      app.streamStatus = "Stream server is offline."
+    }
+
+  }
+
+  getStatus();
+</script>