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

Posted 2023-02-25

【中文标题】未处理的拒绝（TypeError）：无法设置未定义的属性“innerHTML”

【英文标题】：Unhandled Rejection (TypeError): Cannot set property 'innerHTML' of undefined

【发布时间】：2021-05-27 05:03:59

【问题描述】：

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

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

【问题讨论】：

使用 ref 代替 Ref 画布。错字。

这个<canvas Ref

@TusharShahi 是的工作

@somallg 谢谢它的工作你能告诉我如何将视频输入从网络摄像头更改为手机摄像头

【参考方案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"/>

【讨论】：

谢谢你能告诉我如何将网络摄像头的输入更改为手机摄像头

@Doubtcoder 如果此答案有效，请将其设为正确答案（打勾）。让它对其他人也有用。你也会得到积分！

@Doubtcoder - 对于第二个问题，我建议在新帖子中提出。当您分别提出每个问题时，得到您的问题的机会很高。