未处理的拒绝（TypeError）：无法设置未定义的属性“innerHTML”

Question

我正在使用 ReactJs 执行face-api-js 进行人脸识别。在控制台日志中，我得到了值，但它没有显示在实时视频中。

Unhandled Rejection (TypeError): Cannot set property 'innerHTML' of undefined这是我在handleVideoOnPlay函数下遇到的错误

我是 react 框架的新手，如果有人帮助我，那就太好了。

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


function App() {
  const videoHeight = 480;
  const videoWidth = 640;
  const [initializing, setIntializing] = useState(false);
  const videoRef = useRef();
  const canvasRef = useRef();

  useEffect(()=>{
    const loadModels = async() => {
      const MODEL_URL = process.env.PUBLIC_URL + './models';
      setIntializing(true);
      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),
        faceapi.nets.ageGenderNet.loadFromUri(MODEL_URL)
      ]).then(startVideo);
    }
    loadModels();
  },[])

  const startVideo =()=>{
    navigator.getUserMedia({
      video : {}
    }, stream => videoRef.current.srcObject = stream,  
     function(err) {
      console.log("The following error occurred: " + err.name);
   })
  }

  const handleVideoOnPlay =() =>{
    setInterval(async () =>{
      if(initializing){
        setIntializing(false);
      }
      canvasRef.current.innerHTML = faceapi.createCanvasFromMedia(videoRef.current);
      const displaySize ={
        width : videoWidth,
        height : videoHeight
      }
      faceapi.matchDimensions(canvasRef.current,displaySize);
      const detections = await faceapi.detectAllFaces(videoRef.current,new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceExpressions().withAgeAndGender();
      const resizedDetections = faceapi.resizeResults(detections,displaySize);
      canvasRef.current.getContext('2d').clearRect(0,0,videoWidth,videoHeight);
      faceapi.draw.drawDetections(canvasRef.current,resizedDetections);
      faceapi.draw.drawFaceLandmarks(canvasRef.current,resizedDetections);
      faceapi.draw.drawFaceExpressions(canvasRef.current,resizedDetections);
    //faceapi.draw.drawFaceExpressions(canvasRef.current,resizedDetections);

      
      console.log(detections)
    },1000)
  }
  return (
    <div className = "App">
      <span>{initializing ? 'initializing' : 'Ready'}</span>
      <div>
        <video ref ={videoRef} autoPlay muted height ={videoHeight} width={videoWidth} onPlay={handleVideoOnPlay}/>
        <canvas Ref={canvasRef} className="position-absolute"/>
        </div>
    </div>

  
  );
}

export default App;

我还有一个问题。 现在代码是使用网络摄像头如何将其更改为手机摄像头？

Answer 1

问题： Cannot set property 'innerHTML' of undefined
原因：canvasRef.current 变为未定义

在继续之前，我发现了一件事，这条线 <canvas Ref={canvasRef} className="position-absolute"/>有Ref，应该是ref

现在， 我想你应该如下使用useEffect()

useEffect(()=>{
...
...
},[canvasRef])

或 回调作为参考

<canvas ref={el => { console.log(el); canvasRef.current = el; }} // or setState(el)  
className="position-absolute"/>