refactor some of: utils, jsfeat, Tracker

.eslintignore

@@ -0,0 +1 @@
+dist/*

js/Tracker.js

@@ -4,30 +4,29 @@ import EventEmitter from 'events';
 import numeric from 'numeric';
 
 // libs
-import MosseFilter from './utils/mosse.js';
-import MosseFilterResponses from './utils/mosseFilterResponses.js';
+import MosseFilter from './utils/mosse';
+import MosseFilterResponses from './utils/mosseFilterResponses';
 import JsfeatFace from './jsfeat/JsfeatFace';
-import webglFilter from './svmfilter_webgl.js';
-import svmFilter from './svmfilter_fft.js';
+import webglFilter from './svmfilter_webgl';
+import svmFilter from './svmfilter_fft';
 
 // filters
-import entire_face_filter from './filters/entire_face_filter.json';
-import left_eye_filter from './filters/left_eye_filter.json';
-import right_eye_filter from './filters/right_eye_filter.json';
-import nose_filter from './filters/nose_filter.json';
+// import entireFaceFilter from './filters/entire_face_filter.json';
+import leftEyeFilter from './filters/left_eye_filter.json';
+import rightEyeFilter from './filters/right_eye_filter.json';
+import noseFilter from './filters/nose_filter.json';
 
 
 import {
   requestAnimFrame,
   cancelRequestAnimFrame
-  // drawData
-} from './utils/canvasHelpers';
+} from './utils/anim';
 import { gpopt, gpopt2 } from './utils/meanshift';
 import procrustes from './utils/procrustes';
 
 
 const halfPI = Math.PI / 2;
-const HAS_MOSSE_FILTERS = MosseFilter && left_eye_filter && right_eye_filter && nose_filter;
+const HAS_MOSSE_FILTERS = MosseFilter && leftEyeFilter && rightEyeFilter && noseFilter;
 
 
 export default class Tracker extends EventEmitter {
@@ -189,13 +188,13 @@ export default class Tracker extends EventEmitter {
     if (this.model.hints && HAS_MOSSE_FILTERS) {
       //var mossef_lefteye = new MosseFilter({drawResponse : document.getElementById('overlay2')});
       this.mossef_lefteye = new MosseFilter();
-      this.mossef_lefteye.load(left_eye_filter);
+      this.mossef_lefteye.load(leftEyeFilter);
       //var mossef_righteye = new MosseFilter({drawResponse : document.getElementById('overlay2')});
       this.mossef_righteye = new MosseFilter();
-      this.mossef_righteye.load(right_eye_filter);
+      this.mossef_righteye.load(rightEyeFilter);
       //var mossef_nose = new MosseFilter({drawResponse : document.getElementById('overlay2')});
       this.mossef_nose = new MosseFilter();
-      this.mossef_nose.load(nose_filter);
+      this.mossef_nose.load(noseFilter);
     } else {
       console.log("MOSSE filters not found, using rough approximation for initialization.");
     }

js/utils/anim.js

@@ -0,0 +1,19 @@
+export const requestAnimFrame = (function () {
+  return window.requestAnimationFrame ||
+  window.webkitRequestAnimationFrame ||
+  window.mozRequestAnimationFrame ||
+  window.oRequestAnimationFrame ||
+  window.msRequestAnimationFrame ||
+  function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
+    return window.setTimeout(callback, 1000 / 60);
+  };
+})();
+
+export const cancelRequestAnimFrame = (function () {
+  return window.cancelAnimationFrame ||
+    window.webkitCancelRequestAnimationFrame ||
+    window.mozCancelRequestAnimationFrame ||
+    window.oCancelRequestAnimationFrame ||
+    window.msCancelRequestAnimationFrame ||
+    window.clearTimeout;
+})();

js/utils/canvas.js

@@ -0,0 +1,20 @@
+// function to draw pixeldata on some canvas, only used for debugging
+export const drawData = (canvasContext, data, width, height, transposed, drawX, drawY) => {
+  const psci = canvasContext.createImageData(width, height);
+  const pscidata = psci.data;
+  for (let j = 0; j < width * height; j++) {
+    let val;
+    if (!transposed) {
+      val = data[(j % width) + ((j / width) >> 0) * width];
+    } else {
+      val = data[(j % height) * height + ((j / height) >> 0)];
+    }
+    val = val > 255 ? 255 : val;
+    val = val < 0 ? 0 : val;
+    pscidata[j * 4] = val;
+    pscidata[(j * 4) + 1] = val;
+    pscidata[(j * 4) + 2] = val;
+    pscidata[(j * 4) + 3] = 255;
+  }
+  canvasContext.putImageData(psci, drawX, drawY);
+}

js/utils/video.js

@@ -0,0 +1,104 @@
+let VIDEO_EL;
+
+const getVideoEl = () => {
+  if (!VIDEO_EL) {
+    VIDEO_EL = document.createElement('video');
+  }
+  return VIDEO_EL;
+};
+
+
+export const supportsVideo = () => {
+  return !!getVideoEl().canPlayType;
+};
+
+
+export const supportsH264BaselineVideo = () => {
+  if (!supportsVideo()) {
+    return false;
+  }
+  return getVideoEl().canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
+};
+
+
+export const supportsOggTheoraVideo = () => {
+  if (!supportsVideo()) {
+    return false;
+  }
+  return getVideoEl().canPlayType('video/ogg; codecs="theora, vorbis"');
+};
+
+
+export const URL = (
+  window.URL || window.webkitURL || window.msURL || window.mozURL
+);
+
+
+export const getUserMedia = (
+  navigator.getUserMedia ||
+  navigator.webkitGetUserMedia ||
+  navigator.mozGetUserMedia ||
+  navigator.msGetUserMedia
+);
+
+
+export const supportsUserMedia = () => {
+  return !!getUserMedia;
+};
+
+
+export const supportsWebGL = () => {
+  let webGLContext;
+  let webGLTestCanvas = document.createElement('canvas');
+
+  if (!window.WebGLRenderingContext) {
+    return false;
+  }
+
+  webGLContext = (
+    webGLTestCanvas.getContext('webgl') ||
+    webGLTestCanvas.getContext('experimental-webgl')
+  );
+
+  if (!webGLContext || !webGLContext.getExtension('OES_texture_float')) {
+    webGLContext = null;
+  }
+
+  return webGLContext != null;
+};
+
+
+export const loadVideo = (cb) => {
+  if (!getUserMedia) {
+    cb(new Error('browser does not support getUserMedia'));
+    return;
+  }
+  // set up stream
+
+  let videoSelector = { video: true };
+  const appVersion = window.navigator.appVersion;
+  if (appVersion.match(/Chrome\/(.*?) /)) {
+    const chromeVersion = parseInt(
+      appVersion.match(/Chrome\/(\d+)\./)[1],
+      10
+    );
+    if (chromeVersion < 20) {
+      videoSelector = 'video';
+    }
+  };
+
+  getUserMedia(videoSelector, (stream) => {
+    cb(null, stream);
+  }, () => {
+    cb(new Error('problem trying to fetch video from your webcam'));
+  });
+};
+
+
+export const setVideoSrc = (videoEl, src) => {
+  if (videoEl.mozCaptureStream) {
+    videoEl.mozSrcObject = src;
+  } else {
+    videoEl.src = (URL && URL.createObjectURL(src)) || src;
+  }
+}