do something when detecting happy face

bsherifi · Aug 5, 2020 · dae99d8 · dae99d8
1 parent 6f2208d
commit dae99d8
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -32,19 +32,13 @@ <h2>Emotion Detector Ahead!</h2>
         <p>Turn on the camera, and let it see your face</p>
       </div>
 
-      <script>
-      function myFunction() {
-        var x = document.getElementById("myTopnav");
-        if (x.className === "topnav") {
-          x.className += " responsive";
-        } else {
-          x.className = "topnav";
-        }
-      }
-      </script>
+    <button id="snap" onclick="snap()">Snap Photo</button>
+    <a id="downloadLnk" download="YourFileName.jpg">Download as image</a>
+
     <div class="video-panel">
         <video id="video" width="720" height="560" autoplay muted></video>
     </div>
+    <canvas id="canvas" width="640" height="480"></canvas>
 
     <div class="footer">
       <div class="fitem-1">
@@ -99,7 +93,42 @@ <h2>Our app soon available</h2>
       </div>
 
 
-      </div>  <!--footer ends here-->
+    </div>  <!--footer ends here-->
+
+    <script>
+        //code below used to only take a screenshot of the video not the expressions
+        // var videol=document.querySelector('video');
+        // var canvast=document.querySelector('canvas');
+        // var context=canvast.getContext('2d');
+        // var w,h,ratio;
 
+        // videol.addEventListener('loadedmetadata', function() {
+        //     ratio = videol.videoWidth/videol.videoHeight;
+        //     w = video.videoWidth-100;
+        //     h = parseInt(w/ratio,10);
+        //     canvast.width = w;
+        //     canvast.height = h;
+        // },false);
+
+        // function snap() {
+        //     context.fillRect(0,0,w,h);
+        //     context.drawImage(videol,0,0,w,h);
+        // }
+
+        // function download() {
+        //     var dt = canvast.toDataURL('image/jpeg');
+        //     this.href = dt;
+        // };
+        // downloadLnk.addEventListener('click', download, false);
+
+        function myFunction() {
+          var x = document.getElementById("myTopnav");
+          if (x.className === "topnav") {
+            x.className += " responsive";
+          } else {
+            x.className = "topnav";
+          }
+        }
+    </script>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -19,6 +19,7 @@ video.addEventListener('play', () => {
     const canvas = faceapi.createCanvasFromMedia(video);
     const mydiv = document.querySelector(".video-panel")
     mydiv.appendChild(canvas)
+
     const displaySize = { width: video.width, height: video.height }
     faceapi.matchDimensions(canvas, displaySize)
     setInterval(async () => {
@@ -30,5 +31,11 @@ video.addEventListener('play', () => {
         faceapi.draw.drawDetections(canvas, resizedDetections)
         faceapi.draw.drawFaceLandmarks(canvas, resizedDetections)
         faceapi.draw.drawFaceExpressions(canvas, resizedDetections)
+
+        if (resizedDetections.length > 0 && resizedDetections[0].detection.score > 0.7 && resizedDetections[0].expressions.happy > 0.5){
+            alert('happy')
+            //or play a music or something
+        }
     }, 100)
+
 })