Added Mediasoup for WebRTC calls

apps/frontend/package.json

@@ -16,11 +16,13 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@repo/store": "*",
     "@repo/ui": "*",
+    "@repo/common" : "*",
     "chess.js": "^1.0.0-beta.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "history": "^5.3.0",
     "lucide-react": "^0.372.0",
+    "mediasoup-client": "^3.7.8",
     "react": "^18.2.0",
     "react-confetti": "^6.1.0",
     "react-dom": "^18.2.0",

apps/frontend/src/App.tsx

@@ -8,6 +8,7 @@ import { RecoilRoot } from 'recoil';
 import { useUser } from '@repo/store/useUser';
 import { Loader } from './components/Loader';
 import { Layout } from './layout';
+import Meet from './screens/Meet';
 
 function App() {
   return (
@@ -35,6 +36,9 @@ function AuthApp() {
           path="/game/:gameId"
           element={<Layout children={<Game />} />}
         />
+        <Route path='/meeting/:roomId' 
+          element = {<Layout children={<Meet />}></Layout>}
+        />
       </Routes>
     </BrowserRouter>
   );

apps/frontend/src/hooks/useSfu.ts

@@ -0,0 +1,93 @@
+import { useEffect, useRef, useState } from 'react';
+import { SfuService, UserConsumer } from '../utils/SfuService';
+import { Producer } from 'mediasoup-client/lib/types';
+import { User } from '@repo/store/user';
+import { CustomAppData } from '@repo/common/sfu';
+
+export const useSfu = (
+  roomId: string,
+  user: User | null,
+) => {
+
+  const sfuService = useRef<SfuService | null>(null);
+  const [videoProducer, setVideoProducer] = useState<Producer<CustomAppData>>();
+  const [audioProducer, setAudioProducer] = useState<Producer<CustomAppData>>();
+  const [consumers, setConsumers] = useState<UserConsumer[]>([]);
+
+  const handleNewConsumer = (consumer: UserConsumer) => {
+    setConsumers((prevConsumers) => [
+      ...prevConsumers.filter((c) => c.id !== consumer.id),
+      consumer,
+    ]);
+  };
+
+  const handleConsumerClosed = (userId: string) => {
+    setConsumers((prevConsumers) => {
+        const new_consumers = prevConsumers.filter((consumer) => consumer.id !== userId);
+        return new_consumers;
+    });
+  };
+
+  const handleTransportConnected = () => {
+    startConsuming();
+    startProducing();
+  }
+
+  useEffect(() => {
+
+    if(!roomId || !user) {
+        console.error('RoomId or User not provided');
+        return;
+    }
+
+    if (!sfuService.current) {
+      sfuService.current = new SfuService(roomId, user);
+    }
+
+    sfuService.current.on(SfuService.NEW_CONSUMER_EVENT, handleNewConsumer);
+    sfuService.current.on(SfuService.CONSUMER_CLOSED_EVENT, handleConsumerClosed);
+    sfuService.current.on(SfuService.TRANSPORT_CONNECTED_EVENT, handleTransportConnected);
+
+    return () => {
+      if (sfuService.current) {
+        sfuService.current.cleanUp();
+        sfuService.current.off(SfuService.NEW_CONSUMER_EVENT, handleNewConsumer);
+        sfuService.current.off(SfuService.CONSUMER_CLOSED_EVENT, handleConsumerClosed);
+        sfuService.current.off(SfuService.TRANSPORT_CONNECTED_EVENT,handleTransportConnected);
+        sfuService.current = null;
+      }
+    };
+  }, [roomId, user ? user.token : undefined]);
+
+
+  const startProducing = async () => {
+    if (!sfuService.current) {
+      console.error('Sfu Service not initialized');
+      return;
+    }
+    try {
+      const { audioProducer, videoProducer } =
+        await sfuService.current.createProducer();
+      if (audioProducer) {
+        setAudioProducer(audioProducer);
+      }
+      if (videoProducer) {
+        setVideoProducer(videoProducer);
+      }
+    } catch (error) {
+      console.error('Error creating producer', error);
+    }
+  };
+
+  const startConsuming = async () => {
+    if (!sfuService.current) return;
+    const consumer = await sfuService.current.createConsumer();
+    setConsumers([...consumer]);
+  };
+
+  return {
+    videoProducer,
+    audioProducer,
+    consumers,
+  };
+};

apps/frontend/src/screens/Meet.tsx

@@ -0,0 +1,115 @@
+import { useUser } from '@repo/store/useUser';
+import { useSfu } from '../hooks/useSfu';
+import { useEffect, useRef } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+
+const Meet = () => {
+  const user = useUser();
+
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const navigate = useNavigate();
+  // consumers videos ref
+
+  const { roomId } = useParams();
+
+  useEffect(() => {
+    if (!user) {
+      navigate('/login');
+    }
+  }, [user]);
+
+  const { videoProducer, audioProducer, consumers } = useSfu(roomId!, user);
+
+  useEffect(() => {
+    if (!videoRef.current) return;
+    const stream = new MediaStream();
+    if (videoProducer && videoProducer.track) {
+      stream.addTrack(videoProducer.track);
+    }
+    if (audioProducer && audioProducer.track) {
+      stream.addTrack(audioProducer.track);
+    }
+    videoRef.current.srcObject = stream;
+  }, [videoProducer, audioProducer]);
+
+  if (!user) {
+    return <div>Redirecting to Login ... </div>;
+  }
+
+  return (
+    <div className="flex flex-col h-screen p-4">
+      <header className="p-4 mb-4 flex justify-between items-center">
+        <h1 className="text-2xl font-bold">Meeting</h1>
+      </header>
+      <div className="flex-1 flex-row">
+        {[
+          { type: 'Producer', track: videoProducer, audio: audioProducer },
+          ...consumers.map((consumer, index) => ({
+            type: `Consumer ${index + 1}`,
+            track: consumer.videoConsumer,
+            audio: consumer.audioConsumer,
+          })),
+        ].map((user, index) => (
+          <div
+            key={index}
+            className="p-2 rounded-md shadow-md flex flex-col items-center w-80"
+          >
+            <VideoPlayer
+              videoTrack={user.track ? user.track.track : null}
+              audioTrack={user.audio ? user.audio.track : null}
+              onPause={() => {
+                user.audio?.pause();
+                user.track?.pause();
+              }}
+              onPlay={() => {
+                user.track?.resume();
+                user.audio?.resume();
+              }}
+            />
+            <p className="text-white mt-2">{user.type}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const VideoPlayer: React.FC<{
+  videoTrack: MediaStreamTrack | null;
+  audioTrack: MediaStreamTrack | null;
+  onPlay: () => void;
+  onPause: () => void;
+}> = (props) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    if (videoRef.current) {
+      const stream = new MediaStream();
+      if (props.audioTrack) {
+        stream.addTrack(props.audioTrack);
+      }
+      if (props.videoTrack) {
+        stream.addTrack(props.videoTrack);
+      }
+      videoRef.current.srcObject = stream;
+      videoRef.current.onplay = props.onPlay;
+      videoRef.current.onpause = props.onPause;
+    }
+  }, [props.audioTrack, props.videoTrack, props.onPlay, props.onPause]);
+
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <video
+        ref={videoRef}
+        className="w-50 rounded-md shadow-md"
+        autoPlay
+        controls
+      >
+        Your browser does not support the video tag.
+      </video>
+    </div>
+  );
+};
+
+
+export default Meet;

apps/frontend/src/utils/SfuMessageDispatcher.ts

@@ -0,0 +1,26 @@
+import {ClientMessage,ClientMessageType} from "@repo/common/sfu";
+
+type PayloadType<T extends ClientMessageType> = Extract<ClientMessage, { type: T }>['payload'];
+
+class SfuMessageDispatcher {
+
+    private handlers: Map<ClientMessageType, ((payload: any) => void)[]> = new Map();
+
+    registerHandler<T extends ClientMessageType>(type: T, handler:  (payload: PayloadType<T>) => Promise<void>): () => void {
+      const existing = this.handlers.get(type) || [];
+      existing.push(handler);
+      this.handlers.set(type, existing);
+      // Return a function to deregister the handler
+      return () => this.handlers.set(type, existing.filter((h) => h !== handler));
+    }
+
+    dispatch(event: MessageEvent) {
+      const message = JSON.parse(event.data) as ClientMessage;
+      console.log('Received message:', message);
+      const handler = this.handlers.get(message.type);
+      if (handler) {
+        handler.forEach((h) => h(message.payload));
+      }
+    }
+  }
+  export default SfuMessageDispatcher;