Browser freezes while webcam live streaming in ReactJs

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?