I am building a simple face recognition application.In the application the frames are captured live in webcam streaming and processed to detect face. but after a while browser freezes without any error. The source codes are given below. what might be the reason behind this
import './App.css';
import React, { useEffect, useRef,useState } from 'react';
import * as faceapi from 'face-api.js';
import axios from 'axios';
function App() {
const videoRef = useRef();
let isDetectionInProgress = false;
const loadModels = async () =>{
try{
await faceapi.nets.tinyFaceDetector.loadFromUri('/model')
}catch(error){
console.log(error)
}
}
useEffect(() => {
loadModels();
const init = async () => {
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
videoRef.current.srcObject = stream;
} catch (error) {
console.error('Error accessing webcam:', error);
}
};
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
init();
} else {
console.error('Error accessing webcam:');
}
const intervalId = setInterval(() => {
if (!isDetectionInProgress) {
emitFrame();
}
}, 500);
const hardRefreshIntervalId = setInterval(() => {
// This code will be executed every hour (3600000 milliseconds)
window.location.reload(true);
}, 3600000);
return () => {
if (videoRef.current.srcObject) {
const tracks = videoRef.current.srcObject.getTracks();
tracks.forEach((track) => track.stop());
videoRef.current.srcObject = null;
}
clearInterval(intervalId);
clearInterval(hardRefreshIntervalId)
console.log("App unmounted")
};
}, []);
const emitFrame = async () => {
isDetectionInProgress = true
if (videoRef.current?.srcObject?.getVideoTracks()[0]) {
let imageCapture = new ImageCapture(videoRef.current.srcObject.getVideoTracks()[0]);
if (faceapi.nets.tinyFaceDetector.isLoaded) {
let blob = null;
try {
blob = await imageCapture.takePhoto();
if ("size" in blob) {
let imageUrl = null;
let image = null;
try{
imageUrl = URL.createObjectURL(blob);
image = new Image();
image.src = imageUrl;
const faces = await faceapi.detectAllFaces(image, new faceapi.TinyFaceDetectorOptions({}));
if(faces && faces.length>0 && image){
const formData = new FormData();
formData.append('blob', blob, 'frame.png');
const now = new Date();
const isoFormattedTime = now.toISOString();
formData.append('isoFormattedTime', isoFormattedTime);
axios
.post('http://127.0.0.1:5000/backend/detect_face', formData,{
headers: {
'Content-Type': 'multipart/form-data',
},
})
.then((response) => {
if (response.status === 200) {
const speechUtterance = new SpeechSynthesisUtterance(response.data?.message);
window.speechSynthesis.speak(speechUtterance);
console.log(response.data?.message);
console.log(response.data?.request_time,response.data?.response_time);
} else {
console.log('No face Detected', response.data?.message);
}
})
.catch((error) => {
console.error('Error during api response :', error);
});
}
}catch(error){
console.log(error)
}
finally{
URL.revokeObjectURL(imageUrl);
image = null
}
}
} catch (error) {
console.log("imageCapture",imageCapture)
console.error('Error during face detection:', error);
} finally{
blob = null
}
}
imageCapture = null
}
isDetectionInProgress = false
};
return (
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
<h1 style={{ color: 'red', fontSize: '24px' }}>Ixora Solution Limited AI Front Desk Assistance</h1>
<video ref={videoRef} autoPlay></video>
</div>
);
}
export default App;
is the problem related to webcam streaming or any other issues?