import React, { useRef, useState, useEffect } from 'react';
import * as faceapi from 'face-api.js';
function App() {
const videoRef = useRef(null);
const canvasRef = useRef(null);
useEffect(() => {
const loadModels = async () => {
try {
const MODEL_URL = '/models'
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),
]).then(startVideo())
} catch (error) {
console.error(error)
}
}
loadModels();
}, [])
const startVideo = async () => {
try {
let stream = null;
stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
videoRef.current.srcObject = stream;
} catch (error) {
console.error(error)
}
}
const handleVideoOnPlay = () => {
setInterval(async () => {
const detections = await faceapi.
detectAllFaces(videoRef.current, new faceapi.TinyFaceDetectorOptions())
.withFaceLandmarks()
.withFaceExpressions()
}, 100)
}
return (
<div className="App">
<video ref={videoRef} autoPlay muted onPlay={handleVideoOnPlay} height={640} width={640} />
<canvas ref={canvasRef} />
</div>
);
}
export default App;
Hi guys, this is my code, I followed a tutorial https://www.youtube.com/watch?v=EejpxMtDg8M
does anyone know whats the problem? I did everything as followed and I have no idea whats wrong, thanks so much for the help!
The erorr was videoRef.current was null, just need to wrap it in
if(videoRef.current){
}