add update res slider

static/index.js

@@ -1,4 +1,6 @@
 var video_facing_mode = "user"
+var res_h = 1200
+var res_w = 720
 var video = document.getElementById("webcam")
 var outputImage=document.getElementById("output_image")
 const canvasElement = document.getElementById("middleware_canvas");
@@ -38,8 +40,8 @@ function load_camera() {
   const constraints = {
       video: {
           facingMode: video_facing_mode,
-          width: { ideal: 1280 },
-        height: { ideal: 720 } 
+          width: { ideal: res_w },
+        height: { ideal: res_h } 
       }
   };
   // Activate the webcam stream.
@@ -107,5 +109,25 @@ document.body.appendChild(span);
       console.error('Error:', error);
   });
 }
+function updateResolution() {
+    const value = this.value;
+    const resolutionK = value / 1000;
+    const aspectRatio = 16 / 9;
+    let width, height;
 
+    if (resolutionK > 0) {
+        width = resolutionK * 1000;
+        height = Math.round(width / aspectRatio);
+    } else {
+        width = 0;
+        height = 0;
+    }
+
+    // Update the displayed resolution
+    document.getElementById('currentResolution').innerText = `${width} x ${height} (${resolutionK}K)`;
+    res_w=width
+    res_h=height
+}
+
+document.getElementById('resolution').addEventListener('input', updateResolution);
 

templates/index.html

@@ -14,5 +14,8 @@
     <button id="switch-camera">switch_cam</button>
     <button id="take-pic">take_pic</button>
     <button id="clear-pic" style="display:none">clear_pic</button>
+    <input type="range" id="resolution" min="0" max="4000" step="100" value="0">
+    <p>Current Resolution: <span id="currentResolution">0 x 0 (0K)</span></p>
+
     </body>
 </html>