chnages for final demo

mayankagg9722 · May 15, 2019 · 45a1fa4 · 45a1fa4
1 parent 70e688f
commit 45a1fa4
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 19 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/camera.html b/camera.html
@@ -2,7 +2,7 @@
 <html>
 
 <head>
-    <title>PoseNet - Camera Feed Demo</title>
+    <title>SmartGym</title>
     <style>
     .footer {
         position: fixed;
@@ -40,15 +40,27 @@
         -o-transform: scaleX(-1);
         -webkit-transform: scaleX(-1);
         transform: scaleX(-1);
-        display: none;
-        " src='.\shivamplank.mp4' autoplay="true" loop="true" muted>
+        display: none;">
         </video>
-        <canvas id="output" style="transform: rotate(90deg);"/>
+        <canvas id="output" style="/* transform: rotate(90deg); */left: 58px;/* position: absolute; */"/>
 
     </div>
     <div>
       <br/><br/><br/><br/>
-      <p id="score"> </p>
+      <p id="score" style="
+      border: 3px solid black;
+      color: black;
+      margin: 5px;
+      text-align: center;
+      padding: 10px;
+      font-size: 59px;
+      color: green;
+      transform: rotate(90deg);
+      position: absolute;
+      left: 435px;
+      top: 418px;
+  "> </p>
+      <div style="width: 600px;margin: 0 auto;transform: rotate(90deg);"><span style="border: 3px solid black;color: black;margin: 5px;text-align: center;padding: 5px;font-size: 72px;color: red;transform: rotate(90deg);" id="suggestion">Suggestion</span></div>
     </div>
     <!-- <video id="video2" src="" autoplay="true"></video>
     <div class="footer">
@@ -62,6 +74,7 @@
     </div> -->
     <canvas id='cv2' style="display: none"/>
     <script src="camera.js"></script>
+    <audio src="hipsdown.mp4" id='hipsdownaudio'></audio>
 </body>
 
 </html>
diff --git a/camera.js b/camera.js
@@ -53,22 +53,23 @@ async function setupCamera() {
   // video.style.cssText = "transform: rotateY(90deg);";
 
 
-  // const mobile = isMobile();
-  // const stream = await navigator.mediaDevices.getUserMedia({
-  //   'audio': false,
-  //   'video': {
-  //     facingMode: 'user',
-  //     width: mobile ? undefined : videoWidth,
-  //     height: mobile ? undefined : videoHeight,
-  //   },
-  // });
+  const mobile = isMobile();
+  const stream = await navigator.mediaDevices.getUserMedia({
+    'audio': false,
+    'video': {
+      facingMode: 'user',
+      width: mobile ? undefined : videoWidth,
+      height: mobile ? undefined : videoHeight,
+    },
+  });
   // video.src = '.\IMG_1164.MOV';
+  video.srcObject = stream;
 
   return new Promise((resolve) => {
-    // video.onloadedmetadata = () => {
-    //   resolve(video);
-    // };
-    resolve(video);
+    video.onloadedmetadata = () => {
+      resolve(video);
+    };
+    // resolve(video);
   });
 }
 
@@ -195,7 +196,7 @@ function setupFPS() {
   stats.showPanel(0);  // 0: fps, 1: ms, 2: mb, 3+: custom
   document.body.appendChild(stats.dom);
 }
-
+let accuracies = [];
 /**
  * Feeds an image to posenet to estimate poses - this is where the magic
  * happens. This function loops with a requestAnimationFrame method.
@@ -270,6 +271,22 @@ function detectPoseInRealTime(video, net) {
       });
       console.log(pose.keypoints)
       let angle = calculateAngles(keypointLocations)
+      let accuracy = angle / 180
+      accuracies.push(accuracy);
+      console.log("length ", accuracies.length)
+      if (accuracies.length > 30) {
+        let sum = accuracies.reduce((previous, current) => current += previous);
+        let avg = sum / accuracies.length;
+        if (avg < .85) {
+          let hipsaudio = document.getElementById('hipsdownaudio');
+          hipsaudio.play();
+          accuracies = [];
+          document.getElementById('suggestion').innerHTML = "Poor";
+        } else {
+          document.getElementById('suggestion').innerHTML = "Good";
+        }
+        accuracies = []
+      }
       document.getElementById('score').innerHTML = "Accuracy = " + angle / 180
       console.log(angle)
     }
@@ -380,3 +397,5 @@ navigator.getUserMedia = navigator.getUserMedia ||
   navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
 // kick off the demo
 bindPage();
+
+// aud = document.getElementById('hipsdownaudio')