Javascript 无法读取属性'；长度'；face-api.js中未定义的 import React，{useRef，useState，useffect}来自'React'； 从“face api.js”导入*作为faceapi； 函数App（）{ const videoRef=useRef（空）； const canvasRef=useRef（null）； useffect（（）=>{ const loadModels=async（）=>{ 试一试{ const MODEL_URL='/models' 我保证([ faceapi.nets.tinyFaceDetector.loadFromUri（模型URL）， faceapi.nets.faceLandmark68Net.loadFromUri（模型URL）， faceapi.nets.faceRecognitionNet.loadFromUri（模型URL）， faceapi.nets.faceExpressionNet.loadFromUri（模型URL）， ]).然后（startVideo（）） }捕获（错误）{ 控制台错误（错误） } } loadModels（）； }, []) const startVideo=async（）=>{ 试一试{ 让stream=null； stream=Wait navigator.mediaDevices.getUserMedia（{audio:true，video:true}）； videoRef.current.srcObject=流； }捕获（错误）{ 控制台错误（错误） } } const handleVideoOnPlay=（）=>{ setInterval（异步（）=>{ const detections=等待faceapi。 detectAllFaces（videoRef.current，new faceapi.TinyFaceDetectorOptions（）） .withFaceLandmarks（） .withFaceExpressions（） }, 100) } 返回( ); } 导出默认应用程序；

大家好，这是我的代码，我遵循了一个教程

我得到这个错误信息：

---

有人知道问题出在哪里吗？我做了所有的事情，我不知道怎么了，非常感谢你的帮助

erorr是videoRef。当前值为空，只需将其包装进去即可

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;

---

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

当使用faceapi.detectAllFaces时，您应该这样做

const detections=wait faceapi.detectAllFaces（videoRef.current）.withFaceLandmarks（）.withFaceDescriptors（）.withFaceExpressions（）

必须包括.withFaceDescriptors（）

请注意，它是。withFaceDescriptor（）而不是。withFaceDescriptor（）

如果要检测所有面并删除一个面，则应添加s

if(videoRef.current){
}