Completed Week 3

by RolloRallo

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/lib/assets/handsfree.css">
<script src="https://unpkg.com/[email protected]/build/lib/handsfree.js"></script>
<div id="container">

  <h1>tracker</h1>

  <div id="main">

    <video id="player" crossOrigin="anonymous" src="https://ocadu.goodcodeclub.com/video/?path=https://player.vimeo.com/external/574179217.sd.mp4?s=11708fce84996c1ce1d602f965daf16e5536bbc1&profile_id=164&oauth2_token_id=57447761" controls loop muted></video>
    <div id="emoji">😐</div>

  </div>

  <div id="nav">

    <button id="start">Start</button>
    <button id="detect">Detect Emotion</button>

  </div>

  <textarea id="log"></textarea>

  <div id="debug"></div>

</div>

CSS

#container {
  width: 300px;
  margin: 20px auto;
  text-align: center;
  font-family: "Helvetica"
}

#player {
  width: 100%;
  height: auto;
}

#main {
  position: relative;
  overflow: hidden;
}

#emoji {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 10%;
  margin-top: -10%;
}

#nav {
  margin: 10px 0px;
}

#nav button {
  font-size: 16px;
  background-color: white;
  border: 1px solid #000;
}

#log {
  height: 50px;
  width: 298px;
  padding: 0;
  margin: 0;
  border: 1px solid #000;
}

#debug {
  margin-top: 10px;
  background-color: #ccc;
  transform: scaleX(-1);
}

JavaScript

// EVENT

$(document).on("click", "#start", start);
$(document).on("click", "#detect", detect);


// FUNCTIONS

function start() {

  handsfree.start();
  handsfree.showDebugger();
  $("#debug").append(handsfree.debug.$wrap);

  setInterval(detect, 1000);

}

function detect() {

  var url = $(".handsfree-canvas-video")[0].toDataURL();
  

  var payload = {
    image: url
  };

  $.ajax({
    url: "https://ocadu.goodcodeclub.com/sentiment/send.php",
    type: "POST",
    data: payload,
    success: emote
  });

}

function emote(data) {

  $("#emoji").empty();
  $("#log").text(data);

  if (data.indexOf("sorrow") > -1) {

    $("#emoji").append("😭");

  }

  if (data.indexOf("anger") > -1) {

    $("#emoji").append("😡");

  }

  if (data.indexOf("joy") > -1) {

    $("#emoji").append("🥰");

  }

  if (data.indexOf("surprise") > -1) {

    $("#emoji").append("😱");

  }

  if (data == "") {

    $("#emoji").text("😐");

  }

}

var option = {
  facemesh: true,
  pose: true,
  setup: {
    video: {
      $el: document.querySelector("#player")
    }
  }
}

var handsfree = new Handsfree(option);

handsfree.use("logger", data => {

  if (typeof data.facemesh != "undefined" && typeof data.facemesh.multiFaceLandmarks != "undefined") {

    var position = data.facemesh.multiFaceLandmarks[0][0];
    var json = JSON.stringify(position);

    var x = position.x * 100;
    var y = position.y * 100;

    $("#emoji").css("left", x + "%");
    $("#emoji").css("top", y + "%");

  }

})