0

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

2 Answers 2

0

Looks like you may be basing this off the camera feed demo. if so, you may need to include your script (detector.js) after the html body tag instead of in the head.

You will need to use the hosted version of the SDK <script src="https://download.affectiva.com/js/3.2/affdex.js"/>.

0

Ok, so this is how I pretty much fixed a little bit of the demo. I figured out that you must use the SDK remotely and not hosting it by your own because of dependencies.

Somehow the documentation is forgetting about the closing tag for their SDK. Well at least thats how it worked for me.

Hope this helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.