Update Frontend/scripts.js

Frontend/scripts.js

@@ -8,14 +8,36 @@ function startCamera(facingMode = "user") {
     stream.getTracks().forEach(track => track.stop());
   }
 
-  navigator.mediaDevices.getUserMedia({ video: { facingMode } })
+  const constraints = {
+    video: {
+      facingMode: { exact: facingMode }
+    }
+  };
+
+  navigator.mediaDevices.getUserMedia(constraints)
     .then((newStream) => {
       stream = newStream;
       video.srcObject = stream;
+
+      // ✅ iOS fix: playsinline and manual play
+      video.setAttribute("playsinline", true);
+      video.play().catch(err => console.warn("Autoplay issue:", err));
     })
     .catch((err) => {
-      console.error("Error accessing camera: ", err);
-      alert("Camera access failed. Please allow camera permissions.");
+      console.warn("Exact facingMode failed, trying fallback. Error:", err);
+
+      // Fallback if iOS/older browser doesn’t support exact
+      navigator.mediaDevices.getUserMedia({ video: true })
+        .then((fallbackStream) => {
+          stream = fallbackStream;
+          video.srcObject = stream;
+          video.setAttribute("playsinline", true);
+          video.play().catch(err => console.warn("Autoplay issue:", err));
+        })
+        .catch((error) => {
+          console.error("Error accessing camera:", error);
+          alert("Camera access failed. Please allow camera permissions.");
+        });
     });
 }
 
@@ -32,7 +54,6 @@ function captureAndSend() {
     return;
   }
 
-  // Create a canvas to capture the frame
   const canvas = document.createElement('canvas');
   canvas.width = video.videoWidth;
   canvas.height = video.videoHeight;
@@ -40,13 +61,10 @@ function captureAndSend() {
   const context = canvas.getContext('2d');
   context.drawImage(video, 0, 0, canvas.width, canvas.height);
 
-  // Convert canvas to data URL (JPEG)
   const dataUrl = canvas.toDataURL("image/jpeg");
 
-  // Show captured image preview in <img>
   document.getElementById("snapshotImage").src = dataUrl;
 
-  // Send captured image to backend
   fetch("https://prime810-facefeel.hf.space/process_image", {
     method: "POST",
     headers: { "Content-Type": "application/json" },
@@ -54,16 +72,15 @@ function captureAndSend() {
   })
   .then(response => response.json())
   .then(data => {
-    // Display returned emoji and emotion
     document.getElementById("emojiDisplay").innerHTML =
       `<img src="${data.emoji}" style="width:200px; border-radius:10px;">`;
     document.getElementById("emotionText").textContent =
       `Emotion: ${data.emotion}`;
-    // Show download button for emoji image
+    
     const link = document.getElementById("downloadEmoji");
     link.href = data.emoji;
     link.style.display = "inline-block";
-    // Play emoji sound if available
+
     const sound = document.getElementById("emojiSound");
     if (sound) sound.play();
   })
@@ -72,5 +89,6 @@ function captureAndSend() {
     alert("Failed to get emoji. Is your backend running?");
   });
 }
-// Start camera automatically on page load
-startCamera();
+
+// ✅ Start camera automatically on page load
+startCamera();