Affdex JavaScript SDK集成后HTML按钮无响应问题求助

Let's break down your problems one by one and fix them step by step:

1. Fixing the "uncaught referenceerror onStart is not defined" (Remote SDK Import) #

The immediate culprit here is your self-closing <script> tag for the remote Affdex SDK:

<script src="https://download.affectiva.com/js/3.2/affdex.js"/>

In HTML, script tags cannot be self-closed — browsers often fail to parse them correctly, which breaks the loading of subsequent scripts (like your detector.js). Since detector.js never loads properly, the onStart function isn't defined, hence the error.

Fix it by using a full closing tag:

<script src="https://download.affectiva.com/js/3.2/affdex.js"></script>

2. Fixing Unresponsive Button (Local SDK & General Setup) #

When you replaced SDK code with alert() and it worked, that confirms onStart is being called — the issue lies in your detector initialization logic. Let's spot the key problems:

Missing DOM Element for Detector #

Your code tries to grab a DOM element with $("#affdex_elements")[0], but your HTML doesn't contain any element with the ID affdex_elements. This means divRoot is undefined, and creating the CameraDetector will fail silently (since you don't have an onInitializeFailure listener), leaving your detector in a broken state where start() does nothing.

Add the missing container to your HTML <body>:

<div id="affdex_elements" style="position: relative; width: 640px; height: 480px;"></div>
<button id="start" onclick="onStart()">Start</button>

Initialize Detector After DOM is Ready #

Right now, your detector.js runs immediately when the script loads, but the DOM might not be fully rendered yet. This can cause $("#affdex_elements")[0] to return null even if you add the element later. Wrap your detector initialization code in a jQuery $(document).ready() block to ensure the DOM is ready first:

$(document).ready(function() {
    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();

    // Add this listener to catch initialization errors
    detector.addEventListener("onInitializeFailure", function(error) {
        log('#logs', "Detector initialization failed: " + error);
        console.error("Initialization error:", error);
    });

    detector.addEventListener("onInitializeSuccess", function() {
        log('#logs', "The detector reports initialized");
        // Note: Remove these lines if #face_video_canvas and #face_video don't exist in your HTML
        $("#face_video_canvas").css("display", "block");
        $("#face_video").css("display", "none");
    });

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

    // Explicitly attach to window to avoid scope issues
    window.onStart = function() {
        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("");
    });
});

Add Logs Container #

Your log() function tries to append to #logs, but that element doesn't exist in your HTML either. Add it to see debug messages:

<div id="logs" style="margin-top: 20px;"></div>

Final Checks #

• For local SDK testing: Ensure affdex.js is in the same directory as your HTML file, or use the correct relative path.
• Webcam permissions: Test your page using http://localhost instead of file:// URLs — most browsers block webcam access for local files.

内容的提问来源于stack exchange，提问作者gangrelg