Update Frontend/scripts.js

Frontend/scripts.js

@@ -1,12 +1,32 @@
 const video = document.querySelector("#videoElement");
+let currentFacingMode = "user"; // "user" = front, "environment" = back
+let stream = null;
 
-navigator.mediaDevices.getUserMedia({ video: true })
-  .then((stream) => {
-    video.srcObject = stream;
-  })
-  .catch((err) => {
-    console.error("Error accessing camera: ", err);
-  });
+// Initialize camera with given facing mode
+function startCamera(facingMode = "user") {
+  if (stream) {
+    stream.getTracks().forEach(track => track.stop());
+  }
+
+  navigator.mediaDevices.getUserMedia({ video: { facingMode } })
+    .then((newStream) => {
+      stream = newStream;
+      video.srcObject = stream;
+    })
+    .catch((err) => {
+      console.error("Error accessing camera: ", err);
+      alert("Camera access failed. Please allow camera permissions.");
+    });
+}
+
+// Flip between front and back camera
+function toggleCamera() {
+  currentFacingMode = currentFacingMode === "user" ? "environment" : "user";
+  startCamera(currentFacingMode);
+}
+
+// Call this on page load
+startCamera();
 
 function captureAndSend() {
   const canvas = document.createElement('canvas');
@@ -16,10 +36,10 @@ function captureAndSend() {
   context.drawImage(video, 0, 0, canvas.width, canvas.height);
   const dataUrl = canvas.toDataURL("image/jpeg");
 
-  fetch("https://prime810-facefeel.hf.space/process_image", {
-  method: "POST",
-  headers: { "Content-Type": "application/json" },
-  body: JSON.stringify({ image: dataUrl })
+  fetch("https://prime810--facefeel.hf.space/process_image", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ image: dataUrl })
   })
     .then(response => response.json())
     .then(data => {