1

我有一个情绪检测，使用 openCV.js 进行面部检测，使用 tensorflow.js 进行情绪分类。当我开始情绪检测时，我调用 requestAnimFrame(myProcessingLogic) 函数并将我的检测逻辑传递给回调参数。我的处理逻辑再次调用 requestAnimFrame(myProcessingLogic)。

当禁用情绪检测时，会设置一个全局变量，然后禁用对 requestAnimFrame 的递归调用。这工作正常。

...但是在情绪检测的每次重新激活时，都会再次调用 requestAnimFrame 调用。这会导致性能问题。

我尝试在检测停止时全局保存 requestAnimFrame() 的返回 id 以调用 cancelAnimFrame() ，但这似乎没有效果。

第一次调用：

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);
}

处理逻辑

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

    /*
    logic removed to simplify
    */

    requestAnimId = requestAnimationFrame(processVideo);
}

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

}

我查看了 firefox 运行时分析，发现每次重新激活时都会执行一个额外的函数调用。

运行时分析图

4

1 回答 1

0

自己发现了错误。它与上面发布的代码无关。在每次情绪跟踪开始时，我都在视频元素中添加了一个 EventListener。另一方面，EventListener 执行 startVideoProcessing。由于这些事件监听器相互堆叠，因此它们被执行了多次。

对于面临同样问题的任何人，请照顾好您的事件侦听器；）

于 2019-07-09T08:19:56.257 回答