Merge pull request #135 from tmddus2/feature/231122-webrtc-multi-client

Feature(#133) 미디어서버에서 발표자 MediaStream을 참여자에게 전달한다.

mediaServer/src/RelayServer.ts

@@ -4,17 +4,12 @@ import { RTCIceCandidate, RTCPeerConnection } from 'wrtc';
 export class RelayServer {
   private readonly io;
   private relayServerRTCPC: RTCPeerConnection;
-  private readonly socketToRoom: Map<string, string>;
-  // 접속한 user의 RTCPeerConnection
-  private readonly receiveStreamRTCPC: Map<string, RTCPeerConnection>;
-  // receiveStreamRTCPC에서 받은 MediaStream 저장
-  private readonly mediaStreams: Map<string, Array<{ id: string; stream: MediaStream }>>;
+  private readonly studentRTCPCs: Map<string, RTCPeerConnection>;
+  private presenterStream: any;
 
   constructor(port: number) {
     this.relayServerRTCPC = new RTCPeerConnection();
-    this.socketToRoom = new Map();
-    this.receiveStreamRTCPC = new Map();
-    this.mediaStreams = new Map();
+    this.studentRTCPCs = new Map();
     this.io = new Server(port, {
       cors: {
         origin: '*',
@@ -24,7 +19,6 @@ export class RelayServer {
   }
 
   listen = (path: string, event: string, method: (socket: Socket) => void) => {
-    // TODO: API 서버를 통해 인증 과정을 거친다.
     this.io.of(path).on(event, method);
   };
 
@@ -33,23 +27,48 @@ export class RelayServer {
       socket.on('presenterOffer', async (data) => {
         const RTCPC = new RTCPeerConnection();
         this.relayServerRTCPC = RTCPC;
+
         RTCPC.ontrack = (event) => {
-          RTCPC.getTransceivers().forEach((receiver) => {
-            console.log(receiver);
-          });
           const stream = event.streams[0];
-          console.log(stream);
+          this.presenterStream = stream;
         };
 
         this.getServerCandidate(socket, data.socketId);
 
-        await RTCPC.setRemoteDescription(data.SDP).then(() => console.log('sever remote description 설정 완료'));
+        await RTCPC.setRemoteDescription(data.SDP);
         const SDP = await RTCPC.createAnswer();
         socket.emit(`${data.socketId}-serverAnswer`, {
+          isStudent: false,
+          SDP: SDP
+        });
+        RTCPC.setLocalDescription(SDP);
+      });
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  enterRoom = (socket: Socket) => {
+    try {
+      socket.on('studentOffer', async (data) => {
+        const socketId = data.socketId;
+        const RTCPC = new RTCPeerConnection();
+
+        this.presenterStream.getTracks().forEach((track: any) => {
+          RTCPC.addTrack(track);
+        });
+
+        this.studentRTCPCs.set(socketId, RTCPC);
+
+        this.exchangeCandidate(socket, socketId);
+
+        await RTCPC.setRemoteDescription(data.SDP);
+        const SDP = await RTCPC.createAnswer();
+        socket.emit(`${data.socketId}-serverAnswer`, {
+          isStudent: true,
           SDP: SDP
         });
         RTCPC.setLocalDescription(SDP);
-        console.log(RTCPC);
       });
     } catch (e) {
       console.log(e);
@@ -60,16 +79,33 @@ export class RelayServer {
     try {
       this.relayServerRTCPC.onicecandidate = (e) => {
         if (e.candidate) {
-          console.log('서버의 candidate 수집');
           socket.emit(`${presenterSocketId}-serverCandidate`, {
             candidate: e.candidate
           });
         }
       };
       socket.on('presenterCandidate', (data) => {
-        this.relayServerRTCPC
-          .addIceCandidate(new RTCIceCandidate(data.candidate))
-          .then(() => console.log('발표자로부터 candidate 받음'));
+        this.relayServerRTCPC.addIceCandidate(new RTCIceCandidate(data.candidate));
+      });
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  exchangeCandidate = (socket: Socket, socketId: any) => {
+    try {
+      const RTCPC = this.studentRTCPCs.get(socketId);
+      if (RTCPC) {
+        RTCPC.onicecandidate = (e) => {
+          if (e.candidate) {
+            socket.emit(`${socketId}-serverCandidate`, {
+              candidate: e.candidate
+            });
+          }
+        };
+      }
+      socket.on('studentCandidate', (data) => {
+        RTCPC?.addIceCandidate(new RTCIceCandidate(data.candidate));
       });
     } catch (e) {
       console.log(e);

mediaServer/src/main.ts

@@ -4,4 +4,4 @@ const PORT = 3000;
 
 const relayServer = new RelayServer(PORT);
 relayServer.listen('/create-room', 'connection', relayServer.createRoom);
-// relayServer.listen('/enter-room', 'connection', relayServer.enterRoom);
+relayServer.listen('/enter-room', 'connection', relayServer.enterRoom);

mediaServer/test/presenter/index.html

@@ -43,39 +43,33 @@ <h1>발표자</h1>
     ],
   };
 
-  // TODO: 발표자 브라우저에서 미디어 track 설정 & 화면에 영상 출력
   const start = async () => {
     try {
       startButton.disabled = true;
-      const stream = await navigator.mediaDevices.getUserMedia({
-        audio: true,
-        video: true
+      const stream = await navigator.mediaDevices.getUserMedia({ 
+        audio: true, 
+        video: true 
       });
       localStream = stream;
       localVideo.srcObject = stream;
       callButton.disabled = false;
-      console.log('1. 로컬 stream 생성 완료');
       presenterRTCPC = new RTCPeerConnection();
-      console.log('2. 로컬 RTCPeerConnection 생성 완료');
+
       if (localStream) {
-        console.log(localStream)
-        console.log('track 추가')
-        localStream.getTracks().forEach((track) => {
-          console.log(track);
+        localStream.getTracks().forEach((track) => { 
           presenterRTCPC.addTrack(track, localStream);
         });
       } else {
         console.log('no stream')
       }
     } catch (e) {
-      alert(`getUserMedia() error: ${e.name}`)
+      console.log(e)
     }
   }
 
   start().then(setStream)
 
   async function setStream() {
-    console.log('setstream 실행')
     try {
       await createPresenterOffer();
       await setServerAnswer();
@@ -87,7 +81,6 @@ <h1>발표자</h1>
   function getPresenterCandidate() {
     presenterRTCPC.onicecandidate = (e) => {
       if (e.candidate) {
-        console.log('발표자 candidate 수집')
         socket.emit('presenterCandidate', {
           candidate: e.candidate,
           presenterSocketId: socket.id
@@ -98,15 +91,16 @@ <h1>발표자</h1>
 
   async function createPresenterOffer() {
     try {
-      console.log('offer 생성')
-      console.log(presenterRTCPC)
-      const SDP = await presenterRTCPC.createOffer();
-      console.log(presenterRTCPC)
+      const SDP = await presenterRTCPC.createOffer({
+        offerToReceiveAudio:true,
+        offerToReceiveVedio:true
+      });
+
       socket.emit('presenterOffer', {
         socketId: socket.id,
         SDP: SDP
       });
-      console.log('발표자 localDescription 설정 완료');
+
       presenterRTCPC.setLocalDescription(SDP);
       getPresenterCandidate()
     } catch (e) {
@@ -116,11 +110,9 @@ <h1>발표자</h1>
 
   async function setServerAnswer() {
     socket.on(`${socket.id}-serverAnswer`, (data) => {
-      console.log('remoteDescription 설정완료')
       presenterRTCPC.setRemoteDescription(data.SDP)
     })
     socket.on(`${socket.id}-serverCandidate`, (data) => {
-      console.log('서버로부터 candidate 받음')
       presenterRTCPC.addIceCandidate(new RTCIceCandidate(data.candidate))
     });
   }

mediaServer/test/student/index.html

@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="kr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="description" content="test WebRTC">
+  <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
+  <link rel="stylesheet" href="../commons/css/main.css"/>
+</head>
+<body>
+<div id="container">
+  <h1>참여자</h1>
+  <video id="localVideo" playsinline autoplay muted></video>
+  <canvas></canvas>
+  <div>
+    <button id="startButton">시작</button>
+    <button id="callButton">방 생성</button>
+    <button id="hangupButton">방 나가기</button>
+  </div>
+</div>
+<script type="module">
+  import { io } from "https://cdn.socket.io/4.4.1/socket.io.esm.min.js";
+  const socket = io('http://localhost:3000/enter-room');
+
+  const startButton = document.getElementById('startButton');
+  const callButton = document.getElementById('callButton');
+  const hangupButton = document.getElementById('hangupButton');
+  callButton.disabled = true;
+  hangupButton.disabled = true;
+
+  const canvas = document.querySelector('canvas');
+  const localVideo = document.getElementById('localVideo');
+
+  let localStream = undefined;
+  let presenterRTCPC;
+  let tmp = []
+  const pc_config = {
+    iceServers: [
+      {
+        urls: [
+          "stun:stun.l.google.com:19302",
+        ]
+      },
+    ],
+  };
+
+  const start = async () => {
+    try {
+      presenterRTCPC = new RTCPeerConnection();
+      const stream = new MediaStream();
+      localStream = stream;
+    } catch (e) {
+      console.log(e)
+    }
+  }
+
+  start().then(getStream)
+
+  async function getStream() {
+    try {
+      await createStudentOffer();
+      await setServerAnswer();
+    } catch (e) {
+      console.log(e);
+    }
+  }
+
+  function getStudentCandidate() {
+    presenterRTCPC.onicecandidate = (e) => {
+      if (e.candidate) {
+        socket.emit('studentCandidate', {
+          candidate: e.candidate,
+          studentSocketId: socket.id
+        });
+      }
+    }
+  }
+
+  async function createStudentOffer() {
+    try {
+      const SDP = await presenterRTCPC.createOffer({
+        offerToReceiveAudio:true,
+        offerToReceiveVideo:true
+      });
+      socket.emit('studentOffer', { 
+        socketId: socket.id,
+        SDP: SDP
+      });
+
+      presenterRTCPC.setLocalDescription(SDP);
+      getStudentCandidate()
+    } catch (e) {
+      console.log(e);
+    }
+  }
+
+  async function setServerAnswer() {
+    socket.on(`${socket.id}-serverAnswer`, (data) => {
+      presenterRTCPC.setRemoteDescription(data.SDP)
+    })
+    socket.on(`${socket.id}-serverCandidate`, (data) => {
+      presenterRTCPC.addIceCandidate(new RTCIceCandidate(data.candidate))
+    });
+  }
+
+  presenterRTCPC.ontrack = (event) => {
+    localStream.addTrack(event.track)
+    localVideo.srcObject = localStream;
+  }
+
+  startButton.onclick = start;
+</script>
+<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
+<script src="../commons/js/streamVisualizer.js"></script>
+</body>
+</html>