fix

js/stream.mjs

@@ -19,6 +19,7 @@ export const streamWebCamVideo = (isFrontCamera = true) => {
       const capabilities = track.getCapabilities();
       const settings = track.getSettings();
 
+
       const input = document.querySelector('input[type="range"]');
 
       // Check whether zoom is supported or not.
@@ -32,13 +33,15 @@ export const streamWebCamVideo = (isFrontCamera = true) => {
       input.step = capabilities.zoom.step;
       input.value = settings.zoom;
 
-      document.querySelector(".zoom-multiplier").textContent = "0x    0.25x    0.75x    10x"
+      document.querySelector(".zoom-multiplier").textContent = `${capabilities.zoom.min
+        } ${(capabilities.zoom.max + 3 * capabilities.zoom.min) / 4} ${(3 * capabilities.zoom.max + capabilities.zoom.min) / 4} ${capabilities.zoom.max}`
+
       console.log("min:", capabilities.zoom.min)
       console.log("max:", capabilities.zoom.max)
       console.log("step:", capabilities.zoom.step)
       console.log("value:", settings.zoom)
 
-      
+
 
       input.oninput = function (event) {
         track.applyConstraints({ advanced: [{ zoom: event.target.value }] });

style.css

@@ -209,14 +209,15 @@ video.flip {
     inset-block-start: 75vh;   
     display: flex;
     justify-content: center;
+    word-spacing: 15px;
     visibility: hidden;
 }
 .zoom-multiplier{
     position: absolute;
     inline-size: max-content;
     color: #fff;
     font-size: 10px;
-    translate: 0 20px;
+    translate: 0 18px;
 }
 .range-container img{
     position: absolute;