feat: initialize agora

.eslintrc.json

@@ -35,8 +35,8 @@
         "@typescript-eslint/no-confusing-void-expression": "off",
         "@typescript-eslint/consistent-indexed-object-style": "warn",
         "@typescript-eslint/await-thenable": "off",
-        "@typescript-eslint/consistent-type-imports": "warn",
-        "no-restricted-imports": ["warn", { "patterns": ["../*"] }]
+        "@typescript-eslint/consistent-type-imports": "warn"
+        // "no-restricted-imports": ["warn", { "patterns": ["../*"] }]
     },
     "settings": {
       "react": {

package.json

@@ -13,10 +13,13 @@
     "@types/node": "^20.11.16",
     "@types/react": "^18.2.52",
     "@types/react-dom": "^18.2.18",
+    "agora-rtc-react": "2.0.0-beta.0",
+    "agora-rtc-sdk-ng": "4.18.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.1",
     "react-scripts": "5.0.1",
+    "react-toastify": "^10.0.4",
     "typescript": "5.1.6",
     "web-vitals": "^3.5.2"
   },

src/App.tsx

 import React from 'react'
 import './App.css'
+import { ThemeProvider } from '@mui/material/styles'
 import { Routes, Route } from 'react-router-dom'
-import VideoCall from './Pages/VideoCall'
-import JoinRoom from './Pages/JoinRoom'
-import CreateRoom from './Pages/CreateRoom'
+
+import VideoCall from './Pages/VideoCall/VideoCall'
+
+import { theme } from './Services/Utils/theme'
 
 function App() {
   return (
-    <div className='App'>
-      <Routes>
-        <Route path='/' element={<VideoCall />} />
-        <Route path='/join' element={<JoinRoom />} />
-        <Route path='/create' element={<CreateRoom />} />
-      </Routes>
-    </div>
+    <ThemeProvider theme={theme}>
+      <div className='App'>
+        <Routes>
+          <Route path='/' element={<VideoCall />} />
+        </Routes>
+      </div>
+    </ThemeProvider>
   )
 }
 

src/Pages/CreateRoom/index.tsx

-import React from 'react'
-
-const index = () => {
-  return <div>Create Room</div>
-}
-
-export default index

src/Pages/JoinRoom/index.tsx

-import React from 'react'
-
-const index = () => {
-  return <div>Join Room</div>
-}
-
-export default index

src/Pages/VideoCall/VideoCall.tsx

+import { useState } from 'react'
+import AgoraRTC from 'agora-rtc-sdk-ng'
+import { AgoraRTCProvider, useRTCClient } from 'agora-rtc-react'
+import { AgoraManager } from '../../Services/AgoraManager/AgoraManager'
+
+const VideoCall = () => {
+  const agoraEngine = useRTCClient(AgoraRTC.createClient({ codec: 'vp8', mode: 'rtc' }))
+  const [joined, setJoined] = useState(false)
+
+  const handleJoinClick = () => {
+    setJoined(true)
+  }
+
+  const handleLeaveClick = () => {
+    setJoined(false)
+  }
+
+  const renderActionButton = () => {
+    return joined ? (
+      <button onClick={handleLeaveClick}>Leave</button>
+    ) : (
+      <button onClick={handleJoinClick}>Join</button>
+    )
+  }
+
+  return (
+    <div>
+      <h1>Get Started with Video Calling</h1>
+      {renderActionButton()}
+      {joined && (
+        <AgoraRTCProvider client={agoraEngine}>
+          <AgoraManager>
+            <div>asas</div>
+          </AgoraManager>
+        </AgoraRTCProvider>
+      )}
+    </div>
+  )
+}
+
+export default VideoCall

src/Pages/VideoCall/index.tsx

-import React from 'react'
-
-const index = () => {
-  return <div>index</div>
-}
-
-export default index

src/Services/AgoraManager/AgoraManager.tsx

+import {
+  LocalVideoTrack,
+  RemoteUser,
+  useJoin,
+  useLocalCameraTrack,
+  useLocalMicrophoneTrack,
+  usePublish,
+  useRTCClient,
+  useRemoteUsers,
+  useClientEvent,
+} from 'agora-rtc-react'
+
+import React, { createContext, useContext, useEffect } from 'react'
+import type { IMicrophoneAudioTrack, ICameraVideoTrack } from 'agora-rtc-sdk-ng'
+
+interface AgoraContextType {
+  localCameraTrack: ICameraVideoTrack | null
+  localMicrophoneTrack: IMicrophoneAudioTrack | null
+  children: React.ReactNode
+}
+
+const AgoraContext = createContext<AgoraContextType | null>(null)
+
+export const AgoraProvider: React.FC<AgoraContextType> = ({
+  children,
+  localCameraTrack,
+  localMicrophoneTrack,
+}) => (
+  <AgoraContext.Provider value={{ localCameraTrack, localMicrophoneTrack, children }}>
+    {children}
+  </AgoraContext.Provider>
+)
+
+export const useAgoraContext = () => {
+  const context = useContext(AgoraContext)
+  if (!context) throw new Error('useAgoraContext must be used within an AgoraProvider')
+  return context
+}
+
+export const AgoraManager = ({ children }: { children: React.ReactNode }) => {
+  const agoraEngine = useRTCClient()
+  const { isLoading: isLoadingCam, localCameraTrack } = useLocalCameraTrack()
+  const { isLoading: isLoadingMic, localMicrophoneTrack } = useLocalMicrophoneTrack()
+  const remoteUsers = useRemoteUsers()
+
+  usePublish([localMicrophoneTrack, localCameraTrack])
+
+  useJoin({
+    appid: '3af4648782de46ddbf90005f7a68f206',
+    channel: 'test',
+    token: null,
+    uid: null,
+  })
+
+  useClientEvent(agoraEngine, 'user-joined', (user) => {
+    console.log('The user', user.uid, ' has joined the channel')
+  })
+
+  useClientEvent(agoraEngine, 'user-left', (user) => {
+    console.log('The user', user.uid, ' has left the channel')
+  })
+
+  useClientEvent(agoraEngine, 'user-published', (user, mediaType) => {
+    console.log('The user', user.uid, ' has published media in the channel')
+  })
+
+  useEffect(() => {
+    return () => {
+      localCameraTrack?.close()
+      localMicrophoneTrack?.close()
+    }
+  }, [])
+
+  // Check if devices are still loading
+  const deviceLoading = isLoadingMic || isLoadingCam
+  if (deviceLoading) return <div>Loading devices...</div>
+
+  // Render the AgoraProvider and associated UI components
+  return (
+    <AgoraProvider localCameraTrack={localCameraTrack} localMicrophoneTrack={localMicrophoneTrack}>
+      {children}
+      <div id='videos'>
+        {/* Render the local video track */}
+        <div className='vid' style={{ height: 300, width: 600 }}>
+          <LocalVideoTrack track={localCameraTrack} play={true} />
+        </div>
+        {/* Render remote users' video and audio tracks */}
+        {remoteUsers.map((remoteUser) => (
+          <div className='vid' style={{ height: 300, width: 600 }} key={remoteUser.uid}>
+            <RemoteUser user={remoteUser} playVideo={true} playAudio={true} />
+          </div>
+        ))}
+      </div>
+    </AgoraProvider>
+  )
+}
+
+// Export the AgoraManager component as the default export
+export default AgoraManager

src/Services/Utils/theme.ts

+import { createTheme } from '@mui/material/styles'
+
+export const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#845695',
+      dark: '#19857b',
+    },
+    secondary: {
+      main: '#1a1a1a',
+      dark: '#363739',
+    },
+    error: {
+      main: '#f44336',
+    },
+    background: {
+      default: '#fff',
+    },
+  },
+})

yarn.lock

@@ -2861,6 +2861,23 @@ agent-base@6:
   dependencies:
     debug "4"
 
+agora-rtc-react@2.0.0-beta.0:
+  version "2.0.0-beta.0"
+  resolved "https://registry.yarnpkg.com/agora-rtc-react/-/agora-rtc-react-2.0.0-beta.0.tgz#3c4336f22439e96096b61b79ad1a988eddefd7e9"
+  integrity sha512-oyNjEy/H3C7n7ZO3HaLd3av5UMGP9oqmJ0EceOYB0JLx5bJYmAplMyx05ku+eW+GBzH+bm1UexJgo/Wzl9DQDQ==
+
+agora-rtc-sdk-ng@4.18.2:
+  version "4.18.2"
+  resolved "https://registry.yarnpkg.com/agora-rtc-sdk-ng/-/agora-rtc-sdk-ng-4.18.2.tgz#86b0b7fd6763aef776f1d6aaa13c487062ee11f7"
+  integrity sha512-tvyuXHVL15Eo0lK3wwM3rGPKGPeGYuarAwCs5oyveht1HZO9z3w6vra3d/q3eOCYpvQscCW7P0QNfUIAQTs4RQ==
+  dependencies:
+    agora-rte-extension "^1.2.3"
+
+agora-rte-extension@^1.2.3:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/agora-rte-extension/-/agora-rte-extension-1.2.4.tgz#6ba1742b16191ea9eba69376b067d4b2e0fe9d34"
+  integrity sha512-0ovZz1lbe30QraG1cU+ji7EnQ8aUu+Hf3F+a8xPml3wPOyUQEK6CTdxV9kMecr9t+fIDrGeW7wgJTsM1DQE7Nw==
+
 ajv-formats@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ajv-formats/-/ajv-formats-2.1.1.tgz#6e669400659eb74973bbf2e33327180a0996b520"
@@ -8538,6 +8555,13 @@ react-scripts@5.0.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
+react-toastify@^10.0.4:
+  version "10.0.4"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-10.0.4.tgz#6ecdbbf923a07fc45850e69b0566efc7bf733283"
+  integrity sha512-etR3RgueY8pe88SA67wLm8rJmL1h+CLqUGHuAoNsseW35oTGJEri6eBTyaXnFKNQ80v/eO10hBYLgz036XRGgA==
+  dependencies:
+    clsx "^2.1.0"
+
 react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"