fix: not publishing video and audio issue

src/Components/MeetingGrid/MeetingGrid.tsx

@@ -7,9 +7,8 @@ import {
   RemoteUser,
   useLocalCameraTrack,
   useLocalMicrophoneTrack,
-  useRTCClient,
   useRemoteUsers,
-  useClientEvent,
+  usePublish,
 } from 'agora-rtc-react'
 
 const MeetingGrid = () => {
@@ -18,23 +17,11 @@ const MeetingGrid = () => {
   const isMd = useMediaQuery(theme.breakpoints.up('md'))
   const isLg = useMediaQuery(theme.breakpoints.up('lg'))
 
-  const agoraEngine = useRTCClient()
   const { localCameraTrack } = useLocalCameraTrack()
   const { localMicrophoneTrack } = useLocalMicrophoneTrack()
+  usePublish([localMicrophoneTrack, localCameraTrack])
   const remoteUsers = useRemoteUsers()
 
-  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')
-  })
-
   const gridContainerRef = useRef<HTMLDivElement>(null)
   const [gridContainerHeight, setGridContainerHeight] = useState(0)
 
@@ -145,6 +132,17 @@ const MeetingGrid = () => {
     }
   }, [totalUsers, isSm, isMd, isLg, gridContainerHeight, numOfItems])
 
+  //   const onUserPublish = async (user: IAgoraRTCRemoteUser, mediaType: 'video' | 'audio') => {
+  //     if (mediaType === 'video') {
+  //       const remoteTrack = await agoraEngine.subscribe(user, mediaType)
+  //       remoteTrack.play('remote-video')
+  //     }
+  //     if (mediaType === 'audio') {
+  //       const remoteTrack = await agoraEngine.subscribe(user, mediaType)
+  //       remoteTrack.play()
+  //     }
+  //   }
+
   return (
     <Box
       sx={{
@@ -175,7 +173,11 @@ const MeetingGrid = () => {
                   borderRadius: '15px',
                 }}
               >
-                <LocalVideoTrack track={localCameraTrack} play={true} />
+                <LocalVideoTrack
+                  track={localCameraTrack}
+                  play={true}
+                  style={{ width: '100%', height: '100%', borderRadius: '20%' }}
+                />
               </Box>
             </Grid>
             {remoteUsers.map((remoteUser, index) => (
@@ -187,7 +189,12 @@ const MeetingGrid = () => {
                     borderRadius: '15px',
                   }}
                 >
-                  <RemoteUser user={remoteUser} playVideo={true} playAudio={true} />
+                  <RemoteUser
+                    user={remoteUser}
+                    playVideo={true}
+                    playAudio={true}
+                    style={{ width: '100%', height: '100%', borderRadius: '15px' }}
+                  />
                 </Box>
               </Grid>
             ))}

src/index.css

@@ -23,3 +23,7 @@ code {
   padding: 0 5%;
   clear: both;
 }
+
+video {
+  border-radius: 15px;
+}