Q:

Stop a function after getting one image

This is an extension to my previous question available at Count number of faces using javascript.  Here my requirement is once an image with one face is detected, the process should be stopped, but in my case it is a never ending loop. 

1  is the length
1 face detected

I tried the below codes. 
    tracker.on('track', function(event) {
                context.clearRect(0, 0, canvas.width, canvas.height);
                console.log(event.data.length + "\t is the length");
                if (event.data.length == 1) {
                    console.log('1 faces detected');
                    return;
                } else {
                    console.log('Multiple faces detected');
                }    
            });

The above code doesn't have any impact on the output(The loop never ends). 
But instead I used a break as follows. 
tracker.on('track', function(event) {
            context.clearRect(0, 0, canvas.width, canvas.height);
            console.log(event.data.length + "\t is the length");
            if (event.data.length == 1) {
                console.log('1 face detected');
                break;
            } else {
                console.log('Multiple faces detected');
            }
        });

But the above code gives me an exception as Uncaught SyntaxError: Illegal break statement, I know that break is supposed to be used only for loops or if, thought that in my current scenario, it is looping, I used it. 
Here is my code. 
   window.onload = function() {
            var video = document.getElementById('video');
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');

            var tracker = new tracking. ObjectTracker('face');
            tracker.setInitialScale(4);
            tracker.setStepSize(2);
            tracker.setEdgesDensity(0.1);

            tracking.track('#video', tracker, {
                camera : true
            });

            tracker.on('track', function(event) {
                context.clearRect(0, 0, canvas.width, canvas.height);
                console.log(event.data.length + "\t is the length");
                if (event.data.length == 1) {
                    console.log('1 face detected');
                    tracking.track('#video', tracker).stop();
                } else {
                    console.log('Multiple faces detected');
                }
                
            });
        };

Going through the documentation I saw that there is a stop() method, I used it, but still it doesn't stop.  Can someone please let me know where am I going wrong and how can I stop further looping after getting 1 image. 
I'm using the same trackingjs.js and the method I found is available at https://trackingjs.com/docs.html#trackers
Thanks

A:

You can removeListener from tracker. 
window.onload = function() {
    var video = document.getElementById('video');
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    var tracker = new tracking. ObjectTracker('face');
    tracker.setInitialScale(4);
    tracker.setStepSize(2);
    tracker.setEdgesDensity(0.1);

    tracking.track('#video', tracker, {
        camera : true
    });
    function trackListener(event) {
        context.clearRect(0, 0, canvas.width, canvas.height);
        console.log(event.data.length + "\t is the length");
        if (event.data.length == 1) {
            console.log('1 face detected');
            tracker.removeListener('track', trackListener);
        } else {
            console.log('Multiple faces detected');
        }

    }
    tracker.on('track', trackListener);
};

or use once method
tracker.once('track', trackListener);

