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

问题描述

我正在使用 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,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;

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）