Cannot read properties of null (reading 'video') - reactjs

Question

I'm trying to make a emotion detection web app using React and face-api.js
I have a switch that turns on the webcam, loads in the face-api.js models and starts detecting the face and emotions. My problem is whenever I 'turn off' the switch or leave the Camera.jsx component, I get spammed in the console:
This is the code to the Camera.jsx component:
import React, { useEffect, useState, useRef } from 'react'
import * as face from 'face-api.js';
import Switch from '#mui/material/Switch';
import './Camera.css';
import Webcam from 'react-webcam';
const Camera = () => {
const camHeight = 720;
const camWidth = 1280;
const videoRef = useRef(null);
const canvasRef = useRef(null);
const displaySize = {
width: camWidth,
height: camHeight
}
const [checked, setChecked] = useState(false);
const handleChange = (event) => {
setChecked(event.target.checked);
};
useEffect(() => {
if (checked) {
const MODEL_URL = `/models`
const initModels = async () => {
Promise.all([
face.loadTinyFaceDetectorModel(MODEL_URL),
face.loadFaceLandmarkModel(MODEL_URL),
face.loadFaceRecognitionModel(MODEL_URL),
face.loadFaceExpressionModel(MODEL_URL)
]);
}
initModels();
}
}, [checked]);
const faceAnalysis = () => {
face.matchDimensions(canvasRef.current, displaySize);
setInterval(async () => {
const detections = await face.detectAllFaces(videoRef.current.video, new face.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceExpressions();
const resizedDetections = face.resizeResults(detections, displaySize);
canvasRef.current.getContext('2d').clearRect(0, 0, camWidth, camHeight);
face.draw.drawDetections(canvasRef.current, resizedDetections);
face.draw.drawFaceLandmarks(canvasRef.current, resizedDetections);
face.draw.drawFaceExpressions(canvasRef.current, resizedDetections);
}, 50);
}
return (
<div className="analysis">
<Switch
checked={checked}
onChange={handleChange}
inputProps={{ 'aria-label': 'controlled' }}
/>
{ checked ?
<div className="camera">
<Webcam
ref={videoRef}
videoConstraints={displaySize}
onUserMedia={faceAnalysis}
/>
<canvas ref={canvasRef} />
</div>
: null}
</div>
)
}
export default Camera;
Would this be a problem with the way I'm loading in the models for the emotion detection?

Answer 1

I found a solution by creating a function in the Camera.jsx component and surrounding it all with a try/catch block and clearing the interval in the catch like so:
const drawFaceInterval = () => {
setInterval(async () => {
try {
const detections = await face.detectAllFaces(videoRef.current.video, new face.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceExpressions();
const resizedDetections = face.resizeResults(detections, displaySize);
canvasRef.current.getContext('2d').clearRect(0, 0, camWidth, camHeight);
face.draw.drawDetections(canvasRef.current, resizedDetections);
face.draw.drawFaceLandmarks(canvasRef.current, resizedDetections);
face.draw.drawFaceExpressions(canvasRef.current, resizedDetections);
} catch (error) {
clearInterval(drawFaceInterval);
}
}, 50);
}
And calling it back in my faceAnalysis() function:
const faceAnalysis = () => {
face.matchDimensions(canvasRef.current, displaySize);
drawFaceInterval();
}