requestAnimFrame выполняется несколько раз - PullRequest
Новая
       66

requestAnimFrame выполняется несколько раз

1 голос
/ 07 июля 2019

У меня запущено обнаружение эмоций с openCV.js для определения лица и tenorflow.js для классификации эмоций.Когда я запускаю обнаружение эмоций, я вызываю функцию requestAnimFrame (myProcessingLogic) и передаю свою логику обнаружения параметру обратного вызова.Моя логика обработки снова вызывает requestAnimFrame (myProcessingLogic).

При отключении обнаружения эмоций устанавливается глобальная переменная, которая затем отключает повторный вызов requestAnimFrame.Это прекрасно работает.

... но при каждой повторной активации обнаружения эмоций вызов requestAnimFrame вызывается еще раз дополнительно.Это вызывает проблемы с производительностью.

Я попытался сохранить возвращенный идентификатор requestAnimFrame () глобально, чтобы вызвать cancelAnimFrame (), когда обнаружение остановлено, но, похоже, это не сработало.

Сначала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;

}

Я взглянул на анализ времени выполнения Firefox и увидел, что при каждой повторной активации выполняется дополнительный вызов функции.

Image of runtime analysis

1 Ответ

0 голосов
/ 09 июля 2019

Нашел ошибку сам. Это не имеет ничего общего с кодом, размещенным выше. При каждом запуске отслеживания эмоций я добавлял EventListener к элементу video. EventListener с другой стороны выполнил startVideoProcessing. Так как эти EventListener стекаются друг на друга, они были выполнены несколько раз.

Для тех, кто сталкивается с той же проблемой, позаботьтесь о слушателях событий;)

...