Update templates/index.html

templates/index.html

@@ -13,7 +13,7 @@
       margin: 0;
       flex-direction: column;
     }
-    
+
     #camera-box {
       width: 640px;
       height: 480px;
@@ -24,23 +24,21 @@
       align-items: center;
       position: relative;
     }
-    
+
     video {
       width: 100%;
       height: 100%;
       object-fit: cover;
-      transform: scaleX(-1);
+      transform: scaleX(1); /* Start without mirroring for back camera */
     }
-    
+
     #prediction-box {
       margin-top: 10px;
       text-align: center;
     }
 
-    #switch-camera-btn {
-      margin-top: 10px;
-      padding: 5px 10px;
-      font-size: 16px;
+    #switch-camera {
+      margin-top: 20px;
     }
   </style>
 </head>
@@ -52,41 +50,40 @@
   <div id="prediction-box">
     <p>Prediction: <span id="prediction">N/A</span></p>
   </div>
-
-  <button id="switch-camera-btn">Switch Camera</button>
+  <button id="switch-camera">Switch Camera</button>
 
   <script>
     const video = document.getElementById('video');
     const predictionElem = document.getElementById('prediction');
-    const switchCameraBtn = document.getElementById('switch-camera-btn');
+    const switchCameraBtn = document.getElementById('switch-camera');
 
-    let currentStream = null;
-    let useFrontCamera = true; // Default to the front (selfie) camera
+    let useFrontCamera = true; // Start with front-facing camera
 
-    // Function to start the video stream
-    function startStream() {
-      if (currentStream) {
-        currentStream.getTracks().forEach(track => track.stop()); // Stop current stream if it exists
-      }
-
-      const constraints = {
+    // Function to start the camera stream
+    function startCamera() {
+      navigator.mediaDevices.getUserMedia({
         video: {
-          facingMode: useFrontCamera ? 'user' : 'environment' // 'user' for front cam, 'environment' for back cam
+          facingMode: useFrontCamera ? 'user' : 'environment' // 'user' for front-facing, 'environment' for back camera
         }
-      };
-
-      navigator.mediaDevices.getUserMedia(constraints)
-        .then(stream => {
-          currentStream = stream;
-          video.srcObject = stream;
-        })
-        .catch(err => {
-          console.error("Error accessing the camera:", err);
-        });
+      })
+      .then(stream => {
+        video.srcObject = stream;
+        // Flip the video if using the front-facing camera
+        video.style.transform = useFrontCamera ? 'scaleX(-1)' : 'scaleX(1)';
+      })
+      .catch(err => {
+        console.error("Error accessing the camera:", err);
+      });
     }
 
-    // Call startStream initially to load the front camera by default
-    startStream();
+    // Start the camera with the front camera by default
+    startCamera();
+
+    // Switch camera button event listener
+    switchCameraBtn.addEventListener('click', () => {
+      useFrontCamera = !useFrontCamera; // Toggle camera mode
+      startCamera(); // Restart camera with the new mode
+    });
 
     // Capture a frame every second and send it to the backend
     setInterval(() => {
@@ -95,14 +92,11 @@
       canvas.height = video.videoHeight;
       const context = canvas.getContext('2d');
       context.drawImage(video, 0, 0, canvas.width, canvas.height);
-      context.translate(canvas.width, 0);
-      context.scale(-1, 1);
-      context.drawImage(video, 0, 0, canvas.width, canvas.height);
-      
+
       // Convert the image to base64
       const imageData = canvas.toDataURL('image/jpeg');
 
-      // Send the image to the server
+      // Send the image to the server for prediction
       fetch('/predict', {
         method: 'POST',
         headers: {
@@ -116,12 +110,6 @@
       })
       .catch(err => console.error('Error:', err));
     }, 1000);
-
-    // Switch camera button functionality
-    switchCameraBtn.addEventListener('click', () => {
-      useFrontCamera = !useFrontCamera; // Toggle between front and back cameras
-      startStream(); // Restart the stream with the new camera
-    });
   </script>
 </body>
 </html>