无法读取 face-api.js 中未定义的 属性 'length' 反应

Question

import React, { useRef, useState, useEffect } from 'react';
import * as faceapi from 'face-api.js';


function App() {
  const videoRef = useRef(null);
  const canvasRef = useRef(null);
  useEffect(() => {
    const loadModels = async () => {
      try {
        const MODEL_URL = '/models'
        Promise.all([
          faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL),
          faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL),
          faceapi.nets.faceRecognitionNet.loadFromUri(MODEL_URL),
          faceapi.nets.faceExpressionNet.loadFromUri(MODEL_URL),
        ]).then(startVideo())
      } catch (error) {
        console.error(error)
      }

    }
    loadModels();

  }, [])
  const startVideo = async () => {
    try {
      let stream = null;
      stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
      videoRef.current.srcObject = stream;
    } catch (error) {
      console.error(error)
    }
  }

  const handleVideoOnPlay = () => {
    setInterval(async () => {
      const detections = await faceapi.
        detectAllFaces(videoRef.current, new faceapi.TinyFaceDetectorOptions())
        .withFaceLandmarks()
        .withFaceExpressions()
    }, 100)
  }
  return (
    <div className="App">
      <video ref={videoRef} autoPlay muted onPlay={handleVideoOnPlay} height={640} width={640} />
      <canvas ref={canvasRef} />
    </div>
  );
}

export default App;

大家好，这是我的代码，我遵循了教程https://www.youtube.com/watch?v=EejpxMtDg8M

我收到此错误消息：

有人知道问题出在哪里吗？我按照以下步骤做了所有事情，但我不知道哪里出了问题，非常感谢您的帮助！

Answer 1

错误是videoRef.current为空，只需要将其包裹在

if(videoRef.current){
}

Answer 2

我找到了解决这个问题的方法

使用faceapi.detectAllFaces时，应该这样

const detections = await faceapi.detectAllFaces(videoRef.current).withFaceLandmarks().withFaceDescriptors().withFaceExpressions()

.withFaceDescriptors() 必须包含在内。

注意是 .withFaceDescriptors() 不是 .withFaceDescriptor()

如果您要检测所有面孔，则应添加 s，并针对一张面孔将其移除