- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我有一个情绪检测,使用 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 运行时分析,发现在每次重新激活时都会执行一个额外的函数调用。
最佳答案
我自己发现了错误。它与上面发布的代码无关。在每次开始情绪跟踪时,我都会向视频元素添加一个 EventListener。另一方面,EventListener 执行了 startVideoProcessing。由于这些事件监听器相互堆叠,因此它们被执行了多次。
对于面临相同问题的任何人,请照顾好您的事件监听器 ;)
关于javascript - requestAnimFrame 被多次执行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56921796/
我正在使用 javascript 构建自己的自定义引擎(不要问为什么) 我的代码工作正常,直到我添加了用于画线的 bline 算法(比使用递归函数快得多),然后突然这段代码崩溃了,我不完全确定为什么
如何计算渲染函数执行一次所需的时间?我想稍后将这段时间用于其他功能。目前我只收到 time_ elapsed = 0 。 function render() { window.requestA
我有一个情绪检测,使用 openCV.js 进行人脸检测,使用 tensorflow.js 进行情绪分类。当我开始情绪检测时,我调用 requestAnimFrame(myProcessingLogi
我遵循了使用 requestAnimFrame 绘制简单动画的最佳实践: http://jsfiddle.net/paul/XQpzU/2/light/ 不幸的是,即使在这个例子中(在 Chrome、
我有两个关于 Javascript/HTML5 中的 window.requestAnimFrame 的问题 window.requestAnimFrame 和 window.requestAnima
我将 Box2D 与 WebGL 结合使用。Box2D 需要恒定的帧速率(它的“世界”更新的时间步长)。 function update(time) {//update of box2d world
在编写脚本时,我注意到我的 ajax 比预期多了大约 10 倍,所以我放入了一个“fps 计数器”并注意到它不是每秒运行 10 次,因为预期的 chrome 每秒运行大约 130 次,即/ff/ope
我实际上正在尝试使用 Pixi.js 引擎开发一个小型浏览器游戏。 我希望它有一个真正的架构,所以我使用早午餐服务器(带有 CoffeeScript )。 我想重现示例 1 ( http://www.
我正在为此苦苦挣扎,似乎无法找到更多引用资料。 我正在使用由 Google 编写的 requestAnimFrame: requestAnimFrame = (function() { retur
哪个最适合 Canvas 动画? requestAnimFrame 或 setInterval ? 最佳答案 requestAnimationFrame 保证您的动画恰好在浏览器准备好绘制新帧时运行。
我目前无法尝试将此代码移植到 TypeScript。 if (typeof window !== 'undefined') { window.requestAnimFrame = (functio
我正在尝试将视频添加到 Fabric.js,我已经完成了。 但有一个问题: 如何停止或取消requestAnimFrame()? 示例: var canvas = new fabric.Canvas(
我最近使用 requestAnimFrame 创建了一个 Canvas 动画,并且对 Chrome 中的结果非常满意,但在 FF 中,看起来正在运行幻灯片。我不知道是什么导致了这个问题。 此外,当我将
我是一名优秀的程序员,十分优秀!