I'm currently working on a project with the technology of Affectiva called Affdex. I'm currently part of an evaluation to test the SDK. I've build a simple website, but this HTML button doesn't seem to do nothing. Now, doing a few tests, I see the following:
-First attempt: Downloading the SDK locally as a JS file. The results are that in a web browser console, the button doesn't do anything, blank, but instead of doing the code of the SDK in a function and replacing with an JS alert, it works.
-Second attempt: Referencing remotely, I receive an error that says: "uncaught referenceerror onStart is not defined" which is weird for me because I can't figure out what is going on assuming that I tried changing referencing order.
So, I'm going to attach my code now: -HTML:
<!DOCTYPE html>
<html>
<head>
<title>HOME</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="affdex.js"></script>
<script type="text/javascript" src="detector.js"></script>
</head>
<body>
<button id="start" onclick="onStart()">Start</button>
</body>
</html>
Just in case the remote SDK should be:
<script src="https://download.affectiva.com/js/3.2/affdex.js"/>
And finally my JS file which should make the website do something at least in console in complement with the SDK:
var divRoot = $("#affdex_elements")[0];
var width = 640;
var height = 480;
var faceMode = affdex.FaceDetectorMode.LARGE_FACES;
var detector = new affdex.CameraDetector(divRoot, width, height, faceMode);
detector.detectAllExpressions();
detector.addEventListener("onInitializeSuccess", function() {
log('#logs', "The detector reports initialized");
$("#face_video_canvas").css("display", "block");
$("#face_video").css("display", "none");
});
function log(node_name, msg) {
$(node_name).append("<span>" + msg + "</span><br />")
}
function onStart() {
if (detector && !detector.isRunning) {
$("#logs").html("");
detector.start();
}
log('#logs', "Clicked the start button");
}
detector.addEventListener("onWebcamConnectSuccess", function() {
log('#logs', "Webcam access allowed");
});
detector.addEventListener("onWebcamConnectFailure", function() {
log('#logs', "webcam denied");
console.log("Webcam access denied");
});
detector.addEventListener("onStopSuccess", function() {
log('#logs', "The detector reports stopped");
$("#results").html("");
});