Update templates/index.html

templates/index.html

@@ -177,28 +177,46 @@
         //   });
 
 
-      document.addEventListener("DOMContentLoaded", function() {
-          var xhr = new XMLHttpRequest();
-          xhr.open('GET', "{{ url }}", true);
-          xhr.setRequestHeader('Cache-Control', 'no-cache');
-          xhr.responseType = 'arraybuffer';
-        
-          var image = document.getElementById("feed");
-          var boundary = null; // You'll need to get this from the server's response header
-        
-          xhr.onload = function(e) {
-            if (xhr.status == 200) {
-              // Parse and display the image
-              var arrayBufferView = new Uint8Array(this.response);
-              var blob = new Blob([arrayBufferView], { type: "image/jpeg" });
-              var urlCreator = window.URL || window.webkitURL;
-              var imageUrl = urlCreator.createObjectURL(blob);
-              image.src = imageUrl;
+     document.addEventListener("DOMContentLoaded", function() {
+        var xhr = new XMLHttpRequest();
+        xhr.open('GET', "{{ url }}", true);
+        xhr.setRequestHeader('Cache-Control', 'no-cache');
+        xhr.responseType = 'arraybuffer';
+      
+        var image = document.getElementById("feed");
+        image.src = "{{ url_for('static', filename='loading.gif') }}"; // Display loading image initially
+      
+        var boundary = "--MOBOTIX_Fast_Serverpush"; // Update based on the server's Content-Type header
+      
+        var buffer = new ArrayBuffer(0);
+      
+        xhr.onprogress = function(e) {
+          var arrayBuffer = new Uint8Array(buffer.byteLength + e.loaded);
+          arrayBuffer.set(new Uint8Array(buffer), 0);
+          arrayBuffer.set(new Uint8Array(xhr.response), buffer.byteLength);
+      
+          // Parse buffer to find the boundary and extract JPEG images
+          while (true) {
+            var start = arrayBuffer.indexOf(boundary);
+            var end = arrayBuffer.indexOf(boundary, start + boundary.length);
+      
+            if (start === -1 || end === -1) {
+              break;
             }
-          };
-        
-          xhr.send();
-        });
+      
+            var blob = new Blob([arrayBuffer.slice(start + boundary.length, end)], { type: "image/jpeg" });
+            var urlCreator = window.URL || window.webkitURL;
+            var imageUrl = urlCreator.createObjectURL(blob);
+            image.src = imageUrl;
+      
+            arrayBuffer = arrayBuffer.slice(end);
+          }
+      
+          buffer = arrayBuffer;
+        };
+      
+        xhr.send();
+});
     </script>
 </body>