Load opencv differently, add text

prouast · Sep 5, 2019 · 91731bf · 91731bf
1 parent f514655
commit 91731bf
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 22 deletions.
diff --git a/heartbeat.js b/heartbeat.js
@@ -1,4 +1,3 @@
-
 const RESCAN_INTERVAL = 1000;
 const DEFAULT_FPS = 30;
 const LOW_BPM = 42;
@@ -14,8 +13,10 @@ const MIN_DISTANCE = 10;
 // Simple rPPG implementation in JavaScript
 // - Code could be improved given better documentation available for opencv.js
 export class Heartbeat {
-  constructor(webcamId, targetFps, windowSize, rppgInterval) {
+  constructor(webcamId, canvasId, classifierPath, targetFps, windowSize, rppgInterval) {
     this.webcamId = webcamId;
+    this.canvasId = canvasId,
+    this.classifierPath = classifierPath;
     this.streaming = false;
     this.faceValid = false;
     this.targetFps = targetFps;
@@ -90,10 +91,10 @@ export class Heartbeat {
       this.face = new cv.Rect();  // Position of the face
       // Load face detector
       this.classifier = new cv.CascadeClassifier();
-      let faceCascadeFile = 'haarcascade_frontalface_alt.xml';
-      await this.createFileFromUrl(faceCascadeFile, faceCascadeFile);
+      let faceCascadeFile = "haarcascade_frontalface_alt.xml";
       if (!this.classifier.load(faceCascadeFile)) {
-        console.log("Face Cascade not loaded");
+        await this.createFileFromUrl(faceCascadeFile, this.classifierPath);
+        this.classifier.load(faceCascadeFile)
       }
       this.scanTimer = setInterval(this.processFrame.bind(this),
         MSEC_PER_SEC/this.targetFps);
@@ -153,7 +154,7 @@ export class Heartbeat {
         [0, 255, 0, 255]);
       // Apply overlayMask
       this.frameRGB.setTo([255, 0, 0, 255], this.overlayMask);
-      cv.imshow('canvas', this.frameRGB);
+      cv.imshow(this.canvasId, this.frameRGB);
     } catch (e) {
       console.log("Error capturing frame:");
       console.log(e);
@@ -474,24 +475,22 @@ export class Heartbeat {
       new cv.Point(this.face.x, this.face.y - 10),
       cv.FONT_HERSHEY_PLAIN, 1.5, [255, 0, 0, 255], 2);
   }
-  // TODO
+  // Clean up resources
   stop() {
-    console.log("stop" + this.timer);
     clearInterval(this.rppgTimer);
     clearInterval(this.scanTimer);
-    this.frameRGB.delete();
-    this.lastFrameRGB.delete();
-    this.frameGray.delete();
-    this.overlayMask.delete();
-    this.faceHist.delete();
-
     if (this.webcam) {
       this.webcamVideoElement.pause();
       this.webcamVideoElement.srcObject = null;
     }
     if (this.stream) {
       this.stream.getVideoTracks()[0].stop();
     }
+    this.invalidateFace();
     this.streaming = false;
+    this.frameRGB.delete();
+    this.lastFrameGray.delete();
+    this.frameGray.delete();
+    this.overlayMask.delete();
   }
 }
diff --git a/index.html b/index.html
@@ -5,13 +5,14 @@
   <title>Heartbeat</title>
 </head>
 <body>
-  <h1>Heartbeat dev</h1>
+  <h1>Heartbeat demo</h1>
+  </br>
+  <p>This demo runs a simple variant of rPPG directly in your browser to measure your heart rate based on subtle changes in skin color.</p>
+  <p>For best results, try in a constantly well lit space with minimal device and subject motion.</p>
+  </br>
   <div>
     <video hidden id="webcam" width="640" height="480"></video>
     <canvas id="canvas" width="640" height="480"></canvas>
   </div>
-  <!--<script src="opencv.js"></script>-->
-  <script src="https://docs.opencv.org/master/opencv.js"></script>
   <script type="module" src="index.js"></script>
-  <!--<script type="module" src="heartbeat.js"></script>-->
 </body>
diff --git a/index.js b/index.js
@@ -1,7 +1,32 @@
 import {Heartbeat} from './heartbeat.js';
 
-cv['onRuntimeInitialized'] = () => {
-  let demo = new Heartbeat("webcam", 30, 6, 250);
-  // To start
-  demo.init();
+const OPENCV_URI = "https://docs.opencv.org/master/opencv.js";
+const HAARCASCADE_URI = "haarcascade_frontalface_alt.xml"
+
+// Load opencv when needed
+async function loadOpenCv(uri) {
+  return new Promise(function(resolve, reject) {
+    console.log("starting to load opencv");
+    var tag = document.createElement('script');
+    tag.src = uri;
+    tag.async = true;
+    tag.type = 'text/javascript'
+    tag.onload = () => {
+      cv['onRuntimeInitialized'] = () => {
+        console.log("opencv ready");
+        resolve();
+      }
+    };
+    tag.onerror = () => {
+      throw new URIError("opencv didn't load correctly.");
+    };
+    var firstScriptTag = document.getElementsByTagName('script')[0];
+    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+  });
 }
+
+let demo = new Heartbeat("webcam", "canvas", HAARCASCADE_URI, 30, 6, 250);
+var ready = loadOpenCv(OPENCV_URI);
+ready.then(function() {
+  demo.init();
+});