Face Analyzer

Uses Affectiva to show emotions and mood. Made by Madhu Sharma and Kanishk Garg.

by Madhu22

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://download.affectiva.com/js/3.2.1/affdex.js"></script>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-8" id="affdex_elements" style="width:680px;height:480px;"></div>
      <div class="col-md-4">
        <div style="height:25em;">
          <strong>EMOTION TRACKING RESULTS</strong>
          <div id="results" style="word-wrap:break-word;"></div>
        </div>
        <div>
          <strong>DETECTOR LOG MSGS</strong>
        </div>
        <div id="logs"></div>
      </div>
    </div>
    <div>
      <button id="start" onclick="onStart()">Start</button>
      <button id="stop" onclick="onStop()">Stop</button>
      <button id="reset" onclick="onReset()">Reset</button>
      <h3>Face Analyzer</h3>
      <p>
        <strong>Instructions</strong>
        </br>
        Press the start button to start the detector.
        <br/> When a face is detected, the attention and mood are tracked using Affectivia API.
        <br/> Press the stop button to end the detector. This will also show the results of the average attention span and mood.
      </p>
    </div>
  </div>
</body>

JavaScript

// SDK Needs to create video and canvas nodes in the DOM in order to function
// Here we are adding those nodes a predefined div.
var divRoot = $("#affdex_elements")[0];
var width = 640;
var height = 480;
var faceMode = affdex.FaceDetectorMode.LARGE_FACES;
//Audio
var audio = new Audio('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3');
//Construct a CameraDetector and specify the image width / height and face detector mode.
var detector = new affdex.CameraDetector(divRoot, width, height, faceMode);

//Enable detection of all Expressions, Emotions and Emojis classifiers.
detector.detectAllEmotions();
detector.detectAllExpressions();

//Add a callback to notify when the detector is initialized and ready for runing.
detector.addEventListener("onInitializeSuccess", function() {
  log('#logs', "The detector reports initialized");
  //Display canvas instead of video feed because we want to draw the feature points on it
  $("#face_video_canvas").css("display", "block");
  $("#face_video").css("display", "none");
});

function log(node_name, msg) {
  $(node_name).append("<span>" + msg + "</span><br />")
}


function playAudio() {
  audio.play();
}

function pauseAudio() {
  audio.pause();
}
//function executes when Start button is pushed.
function onStart() {
  if (detector && !detector.isRunning) {
    $("#logs").html("");
    detector.start();
    //var audio = new Audio('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3');
    //audio.play();

  }
  log('#logs', "Clicked the start button");
}

//function executes when the Stop button is pushed.
function onStop() {
  log('#logs', "Clicked the stop button");
 	log('#logs', "Attention: " + Math.round(totalAttention/counter) + "%");
  log('#logs', "Mood: " + Math.round(totalMood/counter) + "%");
  pauseAudio();
  if (detector && detector.isRunning) {
    detector.removeEventListener();
    pauseAudio();
    detector.stop();
  }
};

//function executes when the Reset button is pushed.
function...