add all changes

package.json

@@ -14,6 +14,7 @@
     "@types/node": "^20.11.16",
     "@types/react": "^18.2.52",
     "@types/react-dom": "^18.2.18",
+    "@types/socket.io-client": "^3.0.0",
     "agora-rtc-react": "2.0.0-beta.0",
     "agora-rtc-sdk-ng": "4.18.2",
     "axios": "^1.6.8",
@@ -24,6 +25,7 @@
     "react-scripts": "5.0.1",
     "react-toastify": "^10.0.4",
     "react-webcam": "^7.2.0",
+    "socket.io-client": "^4.7.5",
     "sweetalert2": "^11.11.0",
     "typescript": "5.1.6",
     "web-vitals": "^3.5.2"

src/Components/MeetingLayout/MeetingLayout.tsx

 import React, { useEffect, useRef, useState } from 'react'
 import { Box } from '@mui/material'
-import { useTheme, type Theme } from '@mui/material/styles'
+import { useTheme, Theme } from '@mui/material/styles'
 import { useRemoteUsers, usePublish, useRTCClient, useClientEvent } from 'agora-rtc-react'
 import SymmetricGrid from '../SymmetricGrid/SymmetricGrid'
 import PinnedGrid from '../PinnedGrid/PinnedGrid'
@@ -10,6 +10,7 @@ import type {
   IMicrophoneAudioTrack,
 } from 'agora-rtc-sdk-ng'
 import ControlCenter from '../ControlCenter/ControlCenter'
+import { useSocketContext } from '../../context/SocketContext'
 
 interface Props {
   setJoined: (x: boolean) => void
@@ -19,6 +20,7 @@ interface Props {
 
 const MeetingLayout = ({ setJoined, localCameraTrack, localMicrophoneTrack }: Props) => {
   const theme: Theme = useTheme()
+  const { prediction } = useSocketContext()
 
   const agoraEngine = useRTCClient()
   usePublish([localMicrophoneTrack, localCameraTrack])
@@ -100,8 +102,13 @@ const MeetingLayout = ({ setJoined, localCameraTrack, localMicrophoneTrack }: Pr
             backgroundColor: '#363739',
             borderRadius: '20px',
             marginRight: '20px',
+            display: 'flex',
+            alignItems: 'center',
+            color: 'white',
           }}
-        ></Box>
+        >
+          {prediction}
+        </Box>
       )}
       <Box sx={{ height: '10%', width: '100%', display: 'flex', marginBottom: '40px' }}>
         <ControlCenter

src/Services/AgoraManager/AgoraManager.tsx

-import React, { createContext, useContext, useEffect } from 'react'
+import React, { createContext, useContext, useEffect, useRef, useState } from 'react'
 import { useJoin, useLocalCameraTrack, useLocalMicrophoneTrack } from 'agora-rtc-react'
 import type { IMicrophoneAudioTrack, ICameraVideoTrack } from 'agora-rtc-sdk-ng'
 import { Box } from '@mui/material'
-import { useTheme, type Theme } from '@mui/material/styles'
+import { useTheme, Theme } from '@mui/material/styles'
 import MeetingLoading from '../../Components/MeetingLoading/MeetingLoading'
 import MeetingLayout from '../../Components/MeetingLayout/MeetingLayout'
 import { useParams } from 'react-router-dom'
+import { useSocketContext } from '../../context/SocketContext'
 
 interface AgoraContextType {
   localCameraTrack: ICameraVideoTrack | null
@@ -58,10 +59,38 @@ export const AgoraManager = ({
   const { isLoading: isLoadingCam, localCameraTrack } = useLocalCameraTrack()
   const { isLoading: isLoadingMic, localMicrophoneTrack } = useLocalMicrophoneTrack()
 
+  const { socket } = useSocketContext()
+
   useEffect(() => {
     localStorage.setItem('myUid', uid.toString())
   }, [uid])
 
+  useEffect(() => {
+    const sendFrames = () => {
+      if (localCameraTrack) {
+        const canvas = document.createElement('canvas')
+        const video = document.createElement('video')
+
+        video.srcObject = new MediaStream([localCameraTrack.getMediaStreamTrack()])
+        video.onloadedmetadata = () => {
+          canvas.width = video.videoWidth
+          canvas.height = video.videoHeight
+
+          const ctx = canvas.getContext('2d')
+          ctx?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight)
+          const frame = canvas.toDataURL('image/jpeg', 0.5)
+
+          socket.emit('predictionVideo', frame)
+        }
+      }
+    }
+
+    if (localCameraTrack) {
+      const intervalId = setInterval(sendFrames, 2000)
+      return () => clearInterval(intervalId)
+    }
+  }, [localCameraTrack, socket])
+
   useEffect(() => {
     return () => {
       localCameraTrack?.close()

src/context/SocketContext.tsx

+import React, { createContext, useContext, useEffect, useState } from 'react'
+import { io, Socket } from 'socket.io-client'
+
+interface SocketContextType {
+  socket: Socket
+  prediction: string
+}
+
+const SocketContext = createContext<SocketContextType | null>(null)
+
+export const SocketProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const socket: Socket = io('http://127.0.0.1:5000')
+  const [prediction, setPrediction] = useState('')
+
+  useEffect(() => {
+    socket.on('predictionVideo', (predictedVal: string) => {
+      setPrediction(predictedVal)
+    })
+
+    return () => {
+      socket.off('predictionVideo')
+    }
+  }, [socket])
+
+  return <SocketContext.Provider value={{ socket, prediction }}>{children}</SocketContext.Provider>
+}
+
+export const useSocketContext = () => {
+  const context = useContext(SocketContext)
+  if (!context) throw new Error('useSocketContext must be used within a SocketProvider')
+  return context
+}

src/index.tsx

@@ -3,12 +3,15 @@ import ReactDOM from 'react-dom/client'
 import './index.css'
 import App from './App'
 import { BrowserRouter } from 'react-router-dom'
+import { SocketProvider } from './context/SocketContext'
 
 const root = ReactDOM.createRoot(document.getElementById('root') ?? document.body)
 root.render(
   <React.StrictMode>
     <BrowserRouter>
+      <SocketProvider>
         <App />
+      </SocketProvider>
     </BrowserRouter>
   </React.StrictMode>,
 )