Unhandled Rejection (TypeError): Cannot set property 'innerHTML' of undefined

Question

I'm using ReactJs to execute face-api-js for face recognition. In the console log I'm getting the values but it is not displaying in the live video.

Unhandled Rejection (TypeError): Cannot set property 'innerHTML' of undefined this is the error I am getting under the function handleVideoOnPlay

I'm new to the react framework it would be great if someone helps me out.

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;

I have another question too. Right now the code is using a webcam how to change it to a phone camera ?

Answer 1

Problem: Cannot set property 'innerHTML' of undefined
Reason: canvasRef.current becomes undefined

Before continuing, I found one thing, the line <canvas Ref={canvasRef} className="position-absolute"/> has Ref, it should be ref

Now, I guess you should make use of useEffect() as follows

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

OR call-back as reference

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