Help wanted - Hide video, overlay, feedback box, gaze dot

[galal27]

Is it possible to hide the video, face overlay, feedback box and the gaze dot and still have webgazer work in the background, assuming camera access has been granted by client?

I've tried the following, but all seem to stop the data collection:

• comment out webgazer.params.showVideoPreview = true;
• set webgazer.params.showVideoPreview = false;
• using jQuery to hide the elements: $("#webgazerVideoFeed").hide(); $("#webgazerFaceOverlay").hide(); $("#webgazerFaceFeedbackBox").hide();
• overwriting the style tags via css/js

If I rerun the webgazer.begin(), it introduces new DOM elements with all video elements showing, which works but defeats the purpose. I have been making these edits to www/js/main.js

[TabeaW]

I managed this through webgazer.showPredictionPoints(false); webgazer.showVideo(false); webgazer.showFaceOverlay(false); webgazer.showFaceFeedbackBox(false); after you started the webgazer with webgazer.begin().

[RobinReborn]

Despite it's name the jQuery function sets the css display property to none, you want to set the css visibility property to hidden - like so

document.getElementById('webgazerVideoFeed').style.visibility = 'hidden'

[galal27]

Awesome, that worked, thanks!

[daisydorothy]

Thanks for this -- I had the same issue, and implemented the above suggestions. However, I've had reports that the feedback box etc. is still visible for some users. The problem seems to occur when using Chrome on Windows. Is there any additional fix that might remedy this?

[galal27]

I created a function called hideVideoElements() and nested the window.onload = async function() into a function called startGazer(). When needed, I call startGazer() followed by hideVideoElements(). That seems to hide everything accordingly.

function hideVideoElements(){
    webgazer.showPredictionPoints(false); 
    webgazer.showVideo(false); 
    webgazer.showFaceOverlay(false); 
    webgazer.showFaceFeedbackBox(false);
    //webgazer.showGazeDot(false);
};

[daisydorothy]

thanks for your response @galal27. I tried this, and unfortunately it still seems to be an issue. Unfortunately I'm not able to replicate it as for me the box is always hidden.

[galal27]

Have you tried having the box showing to begin and then calling the hiding functions to ensure that they work? Any steps to reproduce the bug. Only thing I can think of is that somewhere in your script, after you hide the box, you show the box again and that's why your users see it.

[daisydorothy]

thanks for these suggestions, @galal27. Just to clarify my earlier comment that the box is always hidden (for me) - I have participants complete a calibration similar to that of the Webgazer demo to begin with, where they are able to see the box in order to make sure their face is close enough/being tracked by the face detection algorithm. After this calibration phase, the box should be hidden. For me, this works, in that it disappears, but for some users, the box doesn't get hidden at this stage.

Your comment about showing the box again makes me wonder, though -- for performance reasons, I generally pause webgazer anytime I don't need data being collected (e.g., between the end of one trial and the start of another). When resuming webgazer, I call the hideVideo function again, but I wonder if there is something in the webgazer.resume() function (or elsewhere in webgazer.js) that is causing the box to display again on resume. Food for thought -- I'll look into this, thanks!