Camera access modal

wmodes · Dec 23, 2023 · 20a3d48 · 20a3d48
1 parent 24535c2
commit 20a3d48
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 11 deletions.
diff --git a/eye/css/eye.css b/eye/css/eye.css
@@ -91,3 +91,39 @@
   height: 100vh; 
   border: solid 1px orange;
 }
+
+#modal {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;  
+  background-color: rgba(255,255,255,0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#modal .content {
+  width: 40%;
+  height: 40%;
+  min-width: 200px;
+  min-height: 200px;
+  background-color: white;
+  border: solid 1px black;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.5em;
+  text-align: center; 
+}
+
+#modal .content p {
+  margin: 0 0 0.5em 0;
+}
+
+#modal .content .title {
+  font-size: 2em;
+  font-weight: bold;
+}
diff --git a/eye/index.html b/eye/index.html
@@ -27,5 +27,12 @@
             <canvas id="canvas"></canvas>
         </div>
     </div>
+    <div id="modal">
+        <div class="content">
+            <p><span class="title">The Eye</span><br>
+                would like to access<br>your camera.</p> 
+                <p>Your compliance will<br>make this easier.</p>
+        </div>
+    </div>
 </body>
 </html>
diff --git a/eye/js/eye2.js b/eye/js/eye2.js
@@ -65,7 +65,7 @@ class Faces {
     this.displaySize = { width: $(this.canvasEl).width(), height: $(this.canvasEl).height() };
     this.currentFaces = [];
     // Timestamp of the last face update
-    this.lastFaceUpdate = 0;
+    this.lastFaceUpdate = 0;  
   }
 
   run() {
@@ -82,11 +82,17 @@ class Faces {
   }
 
   async startVideo() {
-    // Start video stream
-    navigator.getUserMedia({ video: {} },
-      stream => this.videoEl.srcObject = stream,
-      err => console.error(err)
-    );
+    this.showCameraAccessModal(); // Show the modal before requesting camera access
+
+    // Request camera access
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+      this.videoEl.srcObject = stream;
+      this.hideCameraAccessModal(); // Hide the modal on successful access
+    } catch (err) {
+      console.error("Camera access was denied or an error occurred:", err);
+      // Handle the error, maybe update the modal with an error message
+    }
   }
 
   async onPlay() {
@@ -99,7 +105,7 @@ class Faces {
     // Detect faces and landmarks
     const detections = await faceapi.detectAllFaces(this.videoEl, new faceapi.TinyFaceDetectorOptions());
     const now = Date.now();
-    
+
     if (detections.length) {
       // Clear the current faces
       this.currentFaces = [];
@@ -185,6 +191,18 @@ class Faces {
     this.ctx.rect(topLeftX, topLeftY, faceRecord.width, faceRecord.height);
     this.ctx.stroke();
   }
+
+  // Method to show the camera access modal
+  showCameraAccessModal() {
+    // Assuming you have a modal with a specific ID or class
+    $("#modal").show();
+  }
+
+  // Method to hide the camera access modal
+  hideCameraAccessModal() {
+    $("#modal").hide();
+  }
+
 }
 
 /**
@@ -483,16 +501,14 @@ class Eye {
 }
 
 // Document ready
-// $(document).ready(function() {
+$(document).ready(function() {
 
   const faceApp = new Faces();
   faceApp.run();
 
-  // Usage
   const eyeApp = new Eye(faceApp);
   eyeApp.run();
-  // myEye.moveIrisRandomly();
-// });
+});