added webrtc feature on client side too

Author: yours7himanshu

admin/src/components/AdminLive.jsx

@@ -7,8 +7,14 @@ import Message from "../shared/Message";
 import TabMonitor from "./TabMonitor/TabMonitor";
 import { useNavigate } from "react-router-dom";
 import CallEndIcon from "@mui/icons-material/CallEnd";
+
+// Room ID for consistent room joining
+const DEFAULT_ROOM_ID = "admin-classroom-live";
+
 const AdminLive = () => {
   const [alertMsg, setAlertMsg] = useState("");
+  const [roomId, setRoomId] = useState(DEFAULT_ROOM_ID);
+  const [isConnected, setIsConnected] = useState(false);
   const navigate = useNavigate();
   const { socket } = useSocket();
   const {
@@ -476,6 +482,22 @@ const AdminLive = () => {
     }
   }, [peer, myStream, sendStream]);
 
+  useEffect(() => {
+    if (socket && !isConnected) {
+      console.log("Joining room:", roomId);
+      socket.emit("join-room", { roomId });
+      setIsConnected(true);
+    }
+
+    return () => {
+      if (socket && isConnected) {
+        console.log("Leaving room:", roomId);
+        socket.emit("leave-room", { roomId });
+        setIsConnected(false);
+      }
+    };
+  }, [socket, roomId, isConnected]);
+
   return (
     <div className="video-call flex h-auto w-full bg-gray-900 text-white">
       {" "}

client/src/App.jsx

@@ -44,6 +44,7 @@ import Notes from "./Student Dashboard/Notes/Notes.jsx";
 import TeachersNotes from "./Student Dashboard/Notes/TeachersNotes.jsx";
 import Payfees from "./Student Dashboard/Payment/Payfees.jsx";
 import Verify from "./Student Dashboard/Payment/Verify.jsx";
+import StudentLive from "./Student Dashboard/Live/StudentLive.jsx";
 
 // import ModalComponent from "./Modal/ModalComponent.jsx";
 
@@ -100,6 +101,10 @@ function App() {
             path="/StudentDashboard/teachersNotes"
             element={<ProtectedRoute element={<TeachersNotes />} />}
           />
+          <Route
+            path="/live-class"
+            element={<ProtectedRoute element={<StudentLive />} />}
+          />
           <Route path="*" element={<NotFound />} />
         </Routes>
       </PeerProvider>