Merge pull request #266 from Front-line-dev/fix/voice-chat

Front-line-dev · web-flow · commit 0f727e1b5db9 · 2020-12-17T10:25:31.000+09:00
보이스 채팅 audio태그, 연결 해제 및 재연결, 태그 중복 생성
diff --git a/src/backend/sockets/exitRoom.ts b/src/backend/sockets/exitRoom.ts
@@ -13,6 +13,7 @@ function exitRoom() {
 
   if (game.getState() === GAME_STATE.WAITING) {
     socket.in(roomID).emit('exit player', passedData);
+    socket.in(roomID).emit('voice disconnected', passedData);
   } else {
     // READY 상태일때 나가면 답이 없음
     socket.in(roomID).emit('game terminated', {})
diff --git a/src/backend/sockets/voiceChat.js b/src/backend/sockets/voiceChat.js
@@ -1,13 +1,26 @@
-function onConnectVoice(id) {
+function onConnectVoice() {
   const socket = this;
   const { game } = socket;
-  socket.in(game.roomID).emit('another voice connected', id);
 
-  socket.on('disconnect', () => {
-    socket.in(game.roomID).emit('voice disconnected', id);
+  if (!game) return;
+
+  socket.in(game.roomID).emit('another voice connected', {
+    socketID: socket.id,
+  });
+}
+
+function onDisconnectVoice() {
+  const socket = this;
+  const { game } = socket;
+
+  if (!game) return;
+
+  socket.in(game.roomID).emit('voice disconnected', {
+    socketID: socket.id,
   });
 }
 
 export default function onVoiceChat(socket) {
-  socket.on('player connect voice channel', onConnectVoice);
+  socket.on('player connect voice', onConnectVoice);
+  socket.on('player disconnect voice', onDisconnectVoice);
 }
diff --git a/src/frontend/game/LeftTab.js b/src/frontend/game/LeftTab.js
@@ -2,7 +2,7 @@ import './left.scss';
 import { $id } from '@utils/dom';
 import DuckLeftTabObject from '@engine/DuckLeftTabObject';
 import PlayerManager from '@utils/PlayerManager';
-import initVoiceChat from '@utils/voiceChat';
+import { activateVoiceChat, deactivateVoiceChat } from './voiceChat';
 
 const createDuck = (duckInfo) => {
   const { socketID, color, nickname } = duckInfo;
@@ -13,14 +13,28 @@ const createDuck = (duckInfo) => {
 class LeftTab {
   constructor() {
     this.ducks = [];
+    this.voiceActive = false;
     PlayerManager.onInitialize.push(this.initializePlayers.bind(this));
     PlayerManager.onUpdate.push(this.updateDuck.bind(this));
     PlayerManager.onDelete.push(this.deletePlayer.bind(this));
+    $id('microphone-controller').addEventListener(
+      'click',
+      this.toggleVoiceChat,
+    );
   }
 
   initializePlayers() {
     this.render();
-    initVoiceChat();
+  }
+
+  toggleVoiceChat() {
+    if (this.voiceActive) {
+      this.voiceActive = false;
+      deactivateVoiceChat();
+    } else {
+      this.voiceActive = true;
+      activateVoiceChat();
+    }
   }
 
   findDuck(socketID) {
diff --git a/src/frontend/game/game.html b/src/frontend/game/game.html
@@ -13,13 +13,13 @@
   <body>
     <div class="game-layout">
       <div id="left-tab" class="left-tab">
-        <div id="video-grid"></div>
+        <div id="voice-chat-audio-container"></div>
         <div class="left-title-wrapper">
           <span class="left-title-text">전체 참여자</span>
           <span id="participants-count" class="left-title-number">0</span>
         </div>
         <div id="participants-wrapper" class="participants-wrapper"></div>
-        <div class="microphone-controller">
+        <div class="microphone-controller" id="microphone-controller">
           <span>마이크 연결</span>
           <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"/></svg>
         </div>
diff --git a/src/frontend/game/voiceChat.js b/src/frontend/game/voiceChat.js
@@ -0,0 +1,77 @@
+import socket from '@utils/socket';
+import Peer from 'peerjs';
+import {
+  getAudioStream,
+  setAnswerBehavior,
+  connectToNewUser,
+} from '@utils/voiceChatUtil';
+
+let myPeerJSClient = null;
+let myAudioStream = null;
+
+const peerMap = new Map();
+
+const deleteOtherPeer = (socketID) => {
+  if (peerMap.has(socketID)) {
+    peerMap.get(socketID).mediaConnection.close();
+    peerMap.delete(socketID);
+  }
+};
+
+const isConnectedToVoiceChat = () => {
+  return myPeerJSClient && myAudioStream;
+};
+
+// 내가 보이스 채팅 접속
+const activateVoiceChat = () => {
+  myPeerJSClient = new Peer(socket.id);
+  myPeerJSClient.on('open', async () => {
+    try {
+      // 마이크 연결
+      myAudioStream = await getAudioStream();
+      setAnswerBehavior({
+        stream: myAudioStream,
+        peerMap,
+        peer: myPeerJSClient,
+      });
+    } catch (err) {
+      console.log('Get Media error: ', err);
+    }
+
+    socket.emit('player connect voice');
+  });
+};
+
+// 내가 보이스 채팅 접속을 끊었을 때
+const deactivateVoiceChat = () => {
+  socket.emit('player disconnect voice');
+  myPeerJSClient.destroy();
+  myPeerJSClient = null;
+  myAudioStream.getTracks().forEach((track) => {
+    track.stop();
+  });
+
+  peerMap.forEach((_, socketID) => {
+    deleteOtherPeer(socketID);
+  });
+};
+
+// 연결된 유저가 보이스 채팅 접속을 끊었을 때
+socket.on('voice disconnected', ({ socketID }) => {
+  if (!isConnectedToVoiceChat()) return;
+
+  deleteOtherPeer(socketID);
+});
+
+socket.on('another voice connected', ({ socketID }) => {
+  if (!isConnectedToVoiceChat()) return;
+
+  connectToNewUser({
+    peer: myPeerJSClient,
+    socketID,
+    stream: myAudioStream,
+    peerMap,
+  });
+});
+
+export { activateVoiceChat, deactivateVoiceChat };
diff --git a/src/frontend/utils/voiceChat.js b/src/frontend/utils/voiceChat.js
diff --git a/src/frontend/utils/voiceChatUtil.js b/src/frontend/utils/voiceChatUtil.js
@@ -0,0 +1,50 @@
+const audioContainer = document.getElementById('voice-chat-audio-container');
+
+const addAudioStream = ({ mediaConnection, peerMap }) => {
+  const socketID = mediaConnection.peer;
+
+  if (peerMap.has(socketID)) return;
+
+  const audioElement = document.createElement('audio');
+
+  mediaConnection.on('stream', (stream) => {
+    // eslint-disable-next-line no-param-reassign
+    audioElement.srcObject = stream;
+    audioElement.addEventListener('loadedmetadata', () => {
+      audioElement.play();
+    });
+    audioContainer.append(audioElement);
+  });
+
+  mediaConnection.on('close', () => {
+    audioElement.remove();
+  });
+
+  peerMap.set(socketID, {
+    mediaConnection,
+    audioElement,
+  });
+};
+
+// socket을 통해 다른 사람이 접속한걸 받았을 때
+// 다른 사람에게 mediaConnection 요청을 보냄
+const connectToNewUser = ({ peer, socketID, stream, peerMap }) => {
+  const mediaConnection = peer.call(socketID, stream);
+  addAudioStream({ mediaConnection, peerMap });
+};
+
+// 내가 다른 사람의 mediaConnection 요청을 받았을 때
+const setAnswerBehavior = ({ stream, peerMap, peer }) => {
+  peer.on('call', (mediaConnection) => {
+    // 다른 사람의 요청에 answer를 날림
+    mediaConnection.answer(stream);
+    addAudioStream({ mediaConnection, peerMap });
+  });
+};
+
+const getAudioStream = () =>
+  navigator.mediaDevices.getUserMedia({
+    audio: true,
+  });
+
+export { getAudioStream, setAnswerBehavior, connectToNewUser };
