The Jeeliz GlanceTracker API is a Javascript library that lets us detect if the user is looking towards his/her screen. The library uses our custom made deep learning framework to analyse the video stream coming from the user’s webcam in real time. Let us see together how to use it.

Adding the script to our project

We’ll firstly need to clone the repository. We will then add the library script in the head of our index.html file – the script is located in the /dist folder in the project we just cloned:

<script src=dist/jeelizGlanceTracker.js></script>

Nice, we can now start using the library.

Running the library

We now need to add the canvas element that will display the video feedback. In our body, we add:

<canvas id=glanceTrackerCanvas></canvas>

We initialize the GlanceTracker API:

GLANCETRACKERAPI.init({
    callbackTrack: function(isWatching){
        if (isWatching){
            console.log('Watching');
        } else {
            console.log('Not watching');
        }
    },
    callbackReady: function(error, spec){
        if (error){
            console.log('AN ERROR happened', error);
            return;
        }
        console.log('All is well :)');
    },
    // id of the  HTML element
    canvasId: 'glanceTrackerCanvas'
});

Great, we can now test our little app.

Testing our project

Let us reload the page. We can now see the canvas filled with the video feedback from the webcam. When we look away, our Not watching message is logged in the console. Success! Find out more on the GlanceTracker API on the Github repository.