Support local development of index.html

webroot/index.html

@@ -11,7 +11,7 @@
 
   <!-- Used for animating the scrolling of the chat div.  Can that be done other ways? -->
   <script src="vendor/jquery-2.1.4.min.js"></script>
-  
+
   <script src="vendor/autolink.js"></script>
 </head>
 
@@ -24,6 +24,7 @@
         autoplay
         controls
         style="width: 100%;"
+        src="https://ia800300.us.archive.org/17/items/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
       ></video>
       <div id="app">
         {{ streamStatus }} {{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.

webroot/js/app.js

@@ -26,7 +26,7 @@ function setupApp() {
     el: "#chatForm",
     data: {
       message: {
-        author: localStorage.author || "Viewer" + (Math.floor(Math.random() * 42) + 1),
+        author: "",//localStorage.author || "Viewer" + (Math.floor(Math.random() * 42) + 1),
         body: ""
       }
     },
@@ -47,7 +47,7 @@ function setupApp() {
 
 
 async function getStatus() {
-  let url = "/status";
+  let url = "https://util.real-ity.com:8042/status";
 
   try {
     let response = await fetch(url);
@@ -67,7 +67,7 @@ async function getStatus() {
 
 function setupWebsocket() {
   const protocol = location.protocol == "https:" ? "wss" : "ws"
-  var ws = new WebSocket(protocol + "://" + location.host + "/entry")
+  var ws = new WebSocket("wss://util.real-ity.com:8042/entry")
   
   ws.onmessage = (e) => {
     var model = JSON.parse(e.data)
@@ -99,37 +99,40 @@ function setupWebsocket() {
 setupApp()
 getStatus()
 setupWebsocket()
-setInterval(getStatus, 5000)
+// setInterval(getStatus, 5000)
 
 // HLS Video setup
-var video = document.getElementById("video")
-var videoSrc = "hls/stream.m3u8"
-if (Hls.isSupported()) {
-  var hls = new Hls()
-  hls.loadSource(videoSrc)
-  hls.attachMedia(video)
-  hls.on(Hls.Events.MANIFEST_PARSED, function () {
-    video.play()
-  });
-}
-// hls.js is not supported on platforms that do not have Media Source
-// Extensions (MSE) enabled.
-//
-// When the browser has built-in HLS support (check using `canPlayType`),
-// we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video
-// element through the `src` property. This is using the built-in support
-// of the plain video element, without using hls.js.
-//
-// Note: it would be more normal to wait on the 'canplay' event below however
-// on Safari (where you are most likely to find built-in HLS support) the
-// video.src URL must be on the user-driven white-list before a 'canplay'
-// event will be emitted; the last video event that can be reliably
-// listened-for when the URL is not on the white-list is 'loadedmetadata'.
-else if (video.canPlayType("application/vnd.apple.mpegurl")) {
-  video.src = videoSrc
-  video.addEventListener("loadedmetadata", function () {
-    video.play()
-  });
+function setupVideo() {
+  var video = document.getElementById("video")
+  var videoSrc = "hls/stream.m3u8"
+  if (Hls.isSupported()) {
+    var hls = new Hls()
+    hls.loadSource(videoSrc)
+    hls.attachMedia(video)
+    hls.on(Hls.Events.MANIFEST_PARSED, function () {
+      video.play()
+    });
+  }
+  
+  // hls.js is not supported on platforms that do not have Media Source
+  // Extensions (MSE) enabled.
+  //
+  // When the browser has built-in HLS support (check using `canPlayType`),
+  // we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video
+  // element through the `src` property. This is using the built-in support
+  // of the plain video element, without using hls.js.
+  //
+  // Note: it would be more normal to wait on the 'canplay' event below however
+  // on Safari (where you are most likely to find built-in HLS support) the
+  // video.src URL must be on the user-driven white-list before a 'canplay'
+  // event will be emitted; the last video event that can be reliably
+  // listened-for when the URL is not on the white-list is 'loadedmetadata'.
+  else if (video.canPlayType("application/vnd.apple.mpegurl")) {
+    video.src = videoSrc
+    video.addEventListener("loadedmetadata", function () {
+      video.play()
+    });
+  }
 }
 
 function scrollSmoothToBottom(id) {