下面是我的相关Javascript代码--
useEffect(()=> {
Promise.all([
faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
faceapi.nets.faceRecognitionNet.loadFromUri("/models"),
faceapi.nets.faceExpressionNet.loadFromUri('/models')
]).then(()=> {
if(navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices
.getUserMedia({ audio:false, video:true })
.then((stream) => {
console.log(stream)
const video = document.getElementById("video");
videoRef.current.srcObject = stream;
console.log("video is " + video)
video.play();
setisLoaded(true);
addEvent();
})
.catch((e) => {
console.log(e);
});
}
});
}, []);
const addEvent = () => {
console.log("Inside")
const video = document.getElementById("video");
video.addEventListener("play", () => {
const canvas = faceapi.createCanvas(video);
canvas.id = "canvas";
document.querySelector("#video").append(canvas);
document.body.append(canvas);
const displaySize = { width:width, height:height };
faceapi.matchDimensions(canvas, displaySize);
setInterval(async () => {
const detections = await faceapi.detectAllFaces('video', new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceExpressions();
const resizedDetections = faceapi.resizeResults(detections, displaySize);
canvas
.getContext("2d")
.clearRect(0, 0, canvas.width, canvas.height);
faceapi.draw.drawFaceExpressions(canvas, resizedDetections);
if(resizedDetections[0].expressions && tracking) {
setData(arr => [...arr, resizedDetections[0].expressions]);
}
}, 100);
})
}
setInterval函数中的if语句总是将跟踪状态变量求值为false。跟踪变量最初被设置为false,但我后来将状态更改为true(在一个未显示的函数中)。然而,setInterval函数仍然将跟踪变量求值为false。
有什么方法可以确保setInterval函数知道变量或状态何时更改?
我尝试使用localStorage变量,甚至useRef react钩子,但得到了相同的结果。我也尝试使用useInterval钩子,但没有工作。
1条答案
按热度按时间p5fdfcr11#
如果你的useEffect还没有满,那么查看完整的示例会很有帮助。我没有看到依赖项。你确定
tracking
是useEffect
依赖项的一部分吗?一般来说,useEffect不会更新不属于dependencies数组的变量的值。这很可能是这里的问题。
值得一提的是,将
tracking
添加为依赖项列表的一部分将导致您在更改时重新加载模型。因此您需要添加额外的检查或重构此useEffect。您可能还需要调用video.removeEventListener
进行清理文件:https://react.dev/reference/react/useEffect