Tracker: JavaScript

Events

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

Application 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("😐");

  }

}

Object Tracking Initialization

var option = {
  facemesh: 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+"%");  

  }

})