Feat/temp-C : WebRTC 시그널링 구현 (#127)

- resolve #109
- resolve #114 
- resolve #120

Co-authored-by: W. Cho <[email protected]>

Author: juyeong-s

client/package.json

@@ -15,7 +15,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-loader-spinner": "^5.3.4",
-    "react-router-dom": "^6.4.3"
+    "react-router-dom": "^6.4.3",
+    "socket.io-client": "^4.5.4"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",

client/src/components/ConfMediaBar/ConfMedia/index.tsx

@@ -0,0 +1,20 @@
+import { useEffect, useRef } from 'react';
+
+import style from './style.module.scss';
+
+interface MediaProps {
+  stream: MediaStream;
+}
+
+function ConfMedia({ stream }: MediaProps) {
+  const ref = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    if (!ref.current) return;
+    ref.current.srcObject = stream;
+  }, [stream]);
+
+  return <video className={style.video} ref={ref} autoPlay />;
+}
+
+export default ConfMedia;

client/src/components/ConfMediaBar/ConfMedia/style.module.scss

@@ -0,0 +1,5 @@
+.video {
+  width: 240px;
+  height: 180px;
+  border-radius: 20px;
+}

client/src/components/ConfMediaBar/index.tsx

@@ -0,0 +1,22 @@
+import ConfMedia from './ConfMedia';
+import style from './style.module.scss';
+
+interface ConfMediaBarProps {
+  streams: Map<string, MediaStream>;
+}
+
+function ConfMediaBar({ streams }: ConfMediaBarProps) {
+  return (
+    <div className={style['conf-bar']}>
+      <ul>
+        {Array.from(streams).map(([id, stream]) => (
+          <li key={id}>
+            <ConfMedia key={id} stream={stream} />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default ConfMediaBar;

client/src/components/ConfMediaBar/style.module.scss

@@ -0,0 +1,21 @@
+.conf-bar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: fit-content;
+  min-width: 300px;
+  height: 100vh;
+  padding: 30px 20px;
+  overflow: hidden;
+
+  ul {
+    height: 100%;
+    padding: 0 10px;
+    overflow: hidden;
+    overflow-y: auto;
+
+    li:not(:last-child) {
+      margin-bottom: 10px;
+    }
+  }
+}

client/src/constants/rtc.ts

@@ -0,0 +1 @@
+export const STUN_SERVER = ['stun:stun.l.google.com:19302'];

client/src/hooks/useConfMediaStreams.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+import { Socket, io } from 'socket.io-client';
+import { STUN_SERVER } from 'src/constants/rtc';
+import RTC from 'src/utils/rtc';
+
+export function useConfMediaStreams(socket: Socket) {
+  const [mediaStreams, setMediaStreams] = useState<Map<string, MediaStream>>(new Map());
+
+  useEffect(() => {
+    (async () => {
+      const userMedia = await navigator.mediaDevices.getUserMedia({video: true, audio: true});
+      setMediaStreams(prev => copyMapWithOperation(prev, map => map.set('me', userMedia)));
+
+      const rtc = new RTC(socket, STUN_SERVER, userMedia);
+      rtc.onMediaConnected((socketId, remoteStream) => {
+        setMediaStreams(prev => copyMapWithOperation(prev, map => map.set(socketId, remoteStream)));
+      });
+      rtc.onMediaDisconnected((socketId) => {
+        setMediaStreams(prev => copyMapWithOperation(prev, map => map.delete(socketId)));
+      });
+      rtc.connect();
+  })();
+  }, [])
+
+  return mediaStreams;
+}
+
+// TODO: 코드 반복때문에 만든 함수. 더 좋은 방법 있으면 고치기
+function copyMapWithOperation<K, V>(prev: Map<K, V>, operation: (cur: Map<K, V>) => void) {
+  const cur = new Map(prev);
+  operation(cur);
+  return cur;
+}

client/src/main.tsx

@@ -5,9 +5,9 @@ import { BrowserRouter } from 'react-router-dom';
 import App from './App';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
+  // <React.StrictMode>
     <BrowserRouter>
       <App />
     </BrowserRouter>
-  </React.StrictMode>,
+  // </React.StrictMode>,
 );

client/src/pages/Workspace/index.tsx

@@ -2,15 +2,24 @@ import Workspace from 'components/Workspace';
 import WorkspaceList from 'components/WorkspaceList';
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
+import { io } from 'socket.io-client';
 import { getWorkspaceInfo } from 'src/apis/workspace';
+import ConfMediaBar from 'src/components/ConfMediaBar';
+import config from 'src/config';
+import { useConfMediaStreams } from 'src/hooks/useConfMediaStreams';
 import { WorkspaceInfo } from 'src/types/workspace';
 
 import style from './style.module.scss';
 
 function WorkspacePage() {
-  const { id } = useParams();
   const [workspace, setWorkspace] = useState<WorkspaceInfo | null>(null);
 
+  const { id } = useParams();
+  const socketUrl = `${config.SERVER_PATH}/signaling/${id}`;
+  const socket = io(socketUrl);
+
+  const confMediaStreams = useConfMediaStreams(socket);
+
   const loadWorkspaceInfo = async () => {
     if (id) {
       const workspaceInfo = await getWorkspaceInfo({ id });
@@ -32,6 +41,7 @@ function WorkspacePage() {
           moms={workspace.moms}
         />
       )}
+      <ConfMediaBar streams={confMediaStreams} />
     </div>
   );
 }

client/src/utils/rtc/index.ts

@@ -0,0 +1,125 @@
+import { Socket } from 'socket.io-client';
+
+type onMediaConnectedCb = (socketId: string, remoteStream: MediaStream) => void;
+type onMediaDisconnectedCb = (socketId: string) => void;
+
+class RTC {
+  static BITRATE = 30000;
+  private signalingServerSocket: Socket;
+  private iceServerUrls: string[];
+  private userMediaStream: MediaStream;
+  private connections: Map<string, RTCPeerConnection>;
+  private streams: Map<string, MediaStream>;
+  private onMediaConnectedCallback: onMediaConnectedCb;
+  private onMediaDisconnectedCallback: onMediaDisconnectedCb;
+
+  constructor(signalingServerSocket: Socket, iceServerUrls: string[], userMediaStream: MediaStream) {
+    this.signalingServerSocket = signalingServerSocket;
+    this.iceServerUrls = iceServerUrls;
+    this.userMediaStream = userMediaStream;
+    this.connections = new Map();
+    this.streams = new Map();
+    this.onMediaConnectedCallback = () => { }; // eslint-disable-line @typescript-eslint/no-empty-function
+    this.onMediaDisconnectedCallback = () => { }; // eslint-disable-line @typescript-eslint/no-empty-function
+  }
+
+  onMediaConnected(callback: onMediaConnectedCb) {
+    this.onMediaConnectedCallback = callback;
+  }
+
+  onMediaDisconnected(callback: onMediaDisconnectedCb) {
+    this.onMediaDisconnectedCallback = callback;
+  }
+
+  #createPeerConnection(remoteSocketId: string) {
+    // initialize
+    const pcOptions = {
+      iceServers: [ { urls: this.iceServerUrls }],
+    };
+    const pc = new RTCPeerConnection(pcOptions);
+
+    // add event listeners
+    pc.addEventListener('icecandidate', iceEvent => {
+      this.signalingServerSocket.emit('send_ice', iceEvent.candidate, remoteSocketId);
+    });
+    pc.addEventListener('track', async (event) => {
+      if (this.streams.has(remoteSocketId)) {
+        return;
+      }
+
+      const [remoteStream] = event.streams;
+
+      this.streams.set(remoteSocketId, remoteStream);
+      this.onMediaConnectedCallback(remoteSocketId, remoteStream);
+    });
+
+    // add tracks
+    this.userMediaStream.getTracks().forEach(track => pc.addTrack(track, this.userMediaStream));
+
+    return pc;
+  }
+
+  async #setVideoBitrate(pc: RTCPeerConnection, bitrate: number) {
+    // fetch video sender
+    const [videoSender] = pc.getSenders().filter(sender => sender!.track!.kind === 'video');
+
+    // set bitrate
+    const params = videoSender.getParameters();
+    params.encodings[0].maxBitrate = bitrate;
+    await videoSender.setParameters(params);
+  }
+
+  connect() {
+    this.signalingServerSocket.on('receive_hello', async (remoteSocketId) => {
+      const pc = this.#createPeerConnection(remoteSocketId);
+      this.connections.set(remoteSocketId, pc);
+
+      const offer = await pc.createOffer();
+      await pc.setLocalDescription(offer);
+
+      this.signalingServerSocket.emit('send_offer', pc.localDescription, remoteSocketId);
+    });
+
+    this.signalingServerSocket.on('receive_offer', async (offer, remoteSocketId) => {
+      const pc = this.#createPeerConnection(remoteSocketId);
+      this.connections.set(remoteSocketId, pc);
+
+      await pc.setRemoteDescription(offer);
+
+      const answer = await pc.createAnswer();
+      await pc.setLocalDescription(answer);
+
+      this.signalingServerSocket.emit('send_answer', answer, remoteSocketId);
+    });
+
+    this.signalingServerSocket.on('receive_answer', async (answer, remoteSocketId) => {
+      const pc = this.connections.get(remoteSocketId);
+      if (!pc) {
+        throw new Error('No RTCPeerConnection on answer received.');
+      }
+
+      await pc.setRemoteDescription(answer);
+    });
+
+    this.signalingServerSocket.on('receive_ice', (ice, remoteSocketId) => {
+      const pc = this.connections.get(remoteSocketId);
+      console.log('received ice');
+      if (!pc) {
+        throw new Error('No RTCPeerConnection on ice candindate received.');
+      }
+
+      pc.addIceCandidate(ice);
+    });
+
+    this.signalingServerSocket.on('receive_bye', remoteSocketId => {
+      this.connections.delete(remoteSocketId);
+      this.streams.delete(remoteSocketId);
+
+      this.onMediaDisconnectedCallback(remoteSocketId);
+    })
+
+    this.signalingServerSocket.emit('send_hello');
+  }
+}
+
+export default RTC;