无法读取null属性(读取“视频”)

Question

我正在尝试用React和face-api.js制作一个情感检测应用程序。

我有一个开关，打开摄像头，加载脸-api.js模型，并开始检测脸和情绪。我的问题是，每当我“关闭”开关或离开Camera.jsx组件时，我就会在控制台中垃圾邮件：

​

​

这是Camera.jsx组件的代码：

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;

这会不会是我在情感检测模型中加载的方式的问题呢？

Answer 1

我通过在Camera.jsx组件中创建一个函数并在其周围设置一个try/catch块，并清除捕获中的间隔，找到了一个解决方案，如下所示：

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

并在我的faceAnalysis()函数中调用它：

    const faceAnalysis = () => {
        face.matchDimensions(canvasRef.current, displaySize);
        drawFaceInterval();
    }