Feat/#203-C: 캠/마이크 on/off 기능 (#209)

마이크가 켜진 상태일 때 꺼진 것으로 UI 상 표시되는 문제. 캠도 이와 같은 문제가 있었음.
이를 해결.

Author: wcho21

client/src/components/ConfMediaBar/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useConfMediaStreams } from 'src/hooks/useConfMediaStreams';
 import useSocketContext from 'src/hooks/useSocketContext';
 
@@ -8,10 +8,18 @@ import style from './style.module.scss';
 
 function ConfMediaBar() {
   const { workspaceSocket: socket } = useSocketContext();
-  const streams = useConfMediaStreams(socket);
+  const [streams, setMyTrack] = useConfMediaStreams(socket);
 
-  const [isMicOn, setIsMicOn] = useState(false);
-  const [isCamOn, setIsCamOn] = useState(false);
+  const [isMicOn, setIsMicOn] = useState(true);
+  const [isCamOn, setIsCamOn] = useState(true);
+
+  useEffect(() => {
+    setMyTrack('audio', isMicOn);
+  }, [isMicOn]);
+
+  useEffect(() => {
+    setMyTrack('video', isCamOn);
+  }, [isCamOn]);
 
   return (
     <div className={style['conf-bar']}>

client/src/hooks/useConfMediaStreams.tsx

@@ -2,17 +2,29 @@ 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';
+import { setTrack, TrackKind } from 'src/utils/trackSetter';
 
-export function useConfMediaStreams(socket: Socket) {
+export function useConfMediaStreams(socket: Socket):
+    [Map<string, MediaStream>, (kind: TrackKind, turnOn: boolean) => void] {
   const [mediaStreams, setMediaStreams] = useState<Map<string, MediaStream>>(
     new Map(),
   );
+  const [myStream, setMyStream] = useState<MediaStream>();
+
+  const setMyTrack = async (kind: TrackKind, turnOn: boolean) => {
+    if (!myStream) {
+      return;
+    }
+    setTrack(myStream, kind, turnOn);
+  };
 
   const initRTC = async () => {
     const userMedia = await navigator.mediaDevices.getUserMedia({
       video: true,
       audio: true,
     });
+    
+    setMyStream(userMedia);
     setMediaStreams((prev) =>
       copyMapWithOperation(prev, (map) => map.set('me', userMedia)),
     );
@@ -38,7 +50,7 @@ export function useConfMediaStreams(socket: Socket) {
     initRTC();
   }, []);
 
-  return mediaStreams;
+  return [mediaStreams, setMyTrack];
 }
 
 // TODO: 코드 반복때문에 만든 함수. 더 좋은 방법 있으면 고치기

client/src/utils/trackSetter/index.ts

@@ -0,0 +1,33 @@
+export type TrackKind = 'audio' | 'video';
+
+const getAllTracks = async (stream: MediaStream) => {
+  if (!stream) {
+    return;
+  }
+  
+  const tracks = stream.getTracks();
+  return tracks;
+}
+
+const getTrack = async (stream: MediaStream, kind: TrackKind) => {
+  const tracks = await getAllTracks(stream);
+  if (!tracks) {
+    return;
+  }
+
+  const track = tracks.find(track => track.kind === kind);
+  return track;
+}
+
+export const setTrack = async (stream: MediaStream, kind: TrackKind, turnOn: boolean) => {
+  if (!stream) {
+    return;
+  }
+
+  const track = await getTrack(stream, kind);
+  if (!track) {
+    return;
+  }
+
+  track.enabled = turnOn;
+}