requestAnimFrame is executed multiple times

Question

I have an emotion detection running with openCV.js for the face detection and tensorflow.js for the emotion classification. When I start the emotion detection I call the requestAnimFrame(myProcessingLogic) function and pass my detection logic to the callback parameter. My processing logic calls the requestAnimFrame(myProcessingLogic) again.

When disabling the emotion detection a global variable is set which then disables the recurisve call to requestAnimFrame. This works fine.

...but on each reactivation of the emotion detection the requestAnimFrame call is called once more additionally. This causes performance issues.

I tried to save the returned id of requestAnimFrame() globally to call cancelAnimFrame() when the detection is stopped but this did not seem to have an effect.

First call:

function startVideoProcessing() {
    if (!streaming) {
        console.warn("Please startup your webcam");
        return;
    }

    canvasInput = document.createElement('canvas');
    canvasInput.width = videoWidth;
    canvasInput.height = videoHeight;
    canvasInputCtx = canvasInput.getContext('2d');

    canvasBuffer = document.createElement('canvas');
    canvasBuffer.width = videoWidth;
    canvasBuffer.height = videoHeight;
    canvasBufferCtx = canvasBuffer.getContext('2d');

    srcMat = new cv.Mat(videoHeight, videoWidth, cv.CV_8UC4);
    grayMat = new cv.Mat(videoHeight, videoWidth, cv.CV_8UC1);

    requestAnimId = requestAnimationFrame(processVideo);
}

ProcessingLogic

function processVideo() {
    if(!streaming) {
        return;
    }

    /*
    logic removed to simplify
    */

    requestAnimId = requestAnimationFrame(processVideo);
}

function stopEmotionTracking() {
    stopCamera();
    cancelAnimationFrame(requestAnimId);
    requestAnimId = null;

}

I took a look in the firefox runtime analysis and saw that on each reactivation an additional function call is performed.

Answer 1

Found the bug myself. It had nothing to do with the code posted above. On each start of the emotion tracking I was adding an EventListener to the video element. The EventListener on the other hand executed startVideoProcessing. Since those eventlistener stack on each other they were executed multiple times.

For anyone facing the same problem, take care of your event listeners ;)