Uncaught (in promise) Error: toNetInput - expected media to be of type HTMLVideoElement

[eze-villegas]

Hi, my name is Ezequiel and I am a student therefore I am new to programming. I am trying to make a system with face-api that recognizes a face on the webcam and compares it with that of an image. But when I try to print by console const detections = await faceapi.detectSingleFace(video.current) it returns the following result:

My code:

import React from 'react';
import * as faceapi from 'face-api.js';
import {useRef, useEffect} from 'react';

function IdBiometrica(){

  const video = useRef()

  useEffect(() => {
    const getUserMedia = async () => {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({video: true});
        video.current.srcObject = stream;
      } catch (err) {
        console.log(err);
      }
    };
    getUserMedia();
  }, []);

  Promise.all([
    faceapi.nets.ssdMobilenetv1.loadFromUri('/models'),
    faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
    faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
    faceapi.nets.faceLandmark68Net.loadFromUri('/models')


  ]).then(recognition())
      
  function recognition(){
    setInterval(async () => {
      const detections = await faceapi.detectSingleFace(video.current)
      console.log(detections)
    }, 10000)
  }
      return(
        <div>
          <video ref={video} id='video' width="480" height="240" autoPlay={true} muted></video>
        </div>
      )
  }

  export default IdBiometrica

This is an app component created with Create-React-App. I don't understand why throw an error but after throwing a correct result. Does anyone have any idea of what the problem is? Thanks for help!

[randy-aguirre]

Following the API documentation, the detectSingleFace method is expecting a TMediaElement type. I have the same issue by using react-webcam and capturing the reference of the component with useRef.

https://justadudewhohacks.github.io/face-api.js/docs/globals.html#tmediaelement

You might consider to use a DOM query selector just like the example in the High Level Api section of the face-api readme.

https://github.com/justadudewhohacks/face-api.js/#high-level-api