change to nodejs buffer and base64

api/index.js

@@ -27,18 +27,18 @@ function send_events_to_clients(data) {
 
 function send_image_data_to_clients(frameData) {
   sse_clients.forEach((client) => {
-    // Create a Blob from the frame data
-    const blob = new Blob([frameData], { type: "image/jpeg" });
+    // Create a Buffer from the frame data
+    const buffer = Buffer.from(frameData);
 
     // Set the SSE event name as 'message'
     client.response.write("event: message\n");
 
-    // Create an object URL from the Blob
-    const objectURL = URL.createObjectURL(blob);
+    // Convert the Buffer to a base64-encoded string
+    const base64Data = buffer.toString("base64");
 
-    // Set the SSE event data as the object URL
+    // Set the SSE event data as the base64-encoded string
     client.response.write(
-      "data: " + JSON.stringify({ image: objectURL }) + "\n\n"
+      "data: " + JSON.stringify({ image: base64Data }) + "\n\n"
     );
   });
 }

api/views/index.ejs

@@ -14,7 +14,7 @@
     <div class="video">
         <div class="mainvideo">
             <p>Camera view:</p>
-            <img id="msg" style="border: 1px solid blue; width: 960px;"></img>
+            <img id="result-video" style="border: 1px solid blue; width: 960px;"></img>
             <div id="connectedbuttons">
                 <div id="connectedstatus">
                     <p id="connectedlabel">Connected: <%- api_connected %></p>
@@ -61,6 +61,21 @@
 <script>
     var update_status = setInterval(update_status, 1000);
     assign_button_callbacks();
+
+    // Helper function to decode base64 image and set it as source of <img> element
+    function decodeBase64Image(base64Data, imgElement) {
+        const img = new Image();
+
+        img.onload = function () {
+            // Once the image has loaded, set it as the source of the <img> element
+            imgElement.src = this.src;
+            console.log("set image data src")
+        };
+
+        // Set the base64-encoded image data as the source of the image
+        img.src = 'data:image/jpeg;base64,' + base64Data;
+    }
+
     window.onload = function () {
         const events = new EventSource("/events");
 
@@ -74,14 +89,14 @@
 
             // Check if the event contains image data
             if (eventData.image) {
-                const imageURL = eventData.image;
+                const base64Data = eventData.image;
 
-                // Process the received image URL
-                // For example, you can set it as the source of an <img> element
-                const imgElement = document.getElementById('image-element');
-                imgElement.src = imageURL;
+                // Get the <img> element
+                const imgElement = document.getElementById('result-video');
+
+                // Decode the base64 image and set it as the source of the <img> element
+                decodeBase64Image(base64Data, imgElement);
             }
-            // console.log(parsedData);
         }
     };