Merge pull request #374 from boostcampwm-2024/Fix/341

[Fix] 캔버스 사용으로 인한 클라이언트 부하 문제 해결

Author: huiseon37

apps/client/src/hooks/useMedia.ts

@@ -0,0 +1,107 @@
+import { useEffect, useRef, useState } from 'react';
+
+export const useMedia = () => {
+  // 미디어 스트림 ref와 상태들
+  const mediaStreamRef = useRef<MediaStream | null>(null);
+  const [mediaStreamError, setMediaStreamError] = useState<Error | null>(null);
+  const [isMediaStreamReady, setIsMediaStreamReady] = useState(false);
+
+  // 미디어 컨트롤 상태들
+  const [isVideoEnabled, setIsVideoEnabled] = useState(true);
+  const [isAudioEnabled, setIsAudioEnabled] = useState(true);
+
+  const initializeStream = async () => {
+    try {
+      const mediaStream = await navigator.mediaDevices.getUserMedia({
+        video: {
+          width: { ideal: 1920 },
+          height: { ideal: 1080 },
+          aspectRatio: { ideal: 16 / 9 },
+          facingMode: { ideal: 'user' },
+        },
+        audio: true,
+      });
+
+      mediaStreamRef.current = mediaStream;
+      setIsMediaStreamReady(true);
+
+      // 초기 트랙 상태 설정
+      const videoTrack = mediaStream.getVideoTracks()[0];
+      const audioTrack = mediaStream.getAudioTracks()[0];
+      setIsVideoEnabled(videoTrack?.enabled ?? false);
+      setIsAudioEnabled(audioTrack?.enabled ?? false);
+    } catch (err) {
+      setMediaStreamError(err instanceof Error ? err : new Error('유저 미디어(비디오, 오디오) 갖고 오기 실패'));
+    }
+  };
+
+  const getNewVideoStream = async () => {
+    try {
+      // 비디오만 새로 받아옴
+      const newVideoStream = await navigator.mediaDevices.getUserMedia({
+        video: true,
+        audio: false, // 오디오는 새로 받지 않음
+      });
+
+      if (mediaStreamRef.current) {
+        // 기존 오디오 트랙 유지
+        const audioTrack = mediaStreamRef.current.getAudioTracks()[0];
+
+        // 기존 비디오 트랙만 정리
+        mediaStreamRef.current.getVideoTracks().forEach(track => track.stop());
+
+        // 새로운 스트림에 기존 오디오 트랙 추가
+        newVideoStream.addTrack(audioTrack);
+      }
+
+      mediaStreamRef.current = newVideoStream;
+      setIsVideoEnabled(true);
+
+      return newVideoStream;
+    } catch (err) {
+      setMediaStreamError(err instanceof Error ? err : new Error('비디오 스트림 획득 실패'));
+      return null;
+    }
+  };
+
+  const toggleVideo = () => {
+    if (!mediaStreamRef.current) return;
+    const videoTrack = mediaStreamRef.current.getVideoTracks()[0];
+    if (videoTrack) {
+      videoTrack.enabled = !videoTrack.enabled;
+      setIsVideoEnabled(videoTrack.enabled);
+    }
+  };
+
+  const toggleAudio = () => {
+    if (!mediaStreamRef.current) return;
+
+    const audioTrack = mediaStreamRef.current.getAudioTracks()[0];
+    if (audioTrack) {
+      audioTrack.enabled = !audioTrack.enabled;
+      setIsAudioEnabled(audioTrack.enabled);
+    }
+  };
+
+  // 초기화 및 클린업
+  useEffect(() => {
+    initializeStream();
+
+    return () => {
+      if (mediaStreamRef.current) {
+        mediaStreamRef.current.getTracks().forEach(track => track.stop());
+      }
+    };
+  }, []);
+
+  return {
+    getNewVideoStream,
+    mediaStream: mediaStreamRef.current,
+    mediaStreamError,
+    isMediaStreamReady,
+    isVideoEnabled,
+    isAudioEnabled,
+    toggleVideo,
+    toggleAudio,
+  };
+};

apps/client/src/hooks/useMediaControls.ts

@@ -1,14 +1,16 @@
 import { useEffect, useRef, useState } from 'react';
 import { Transport, Device, Producer } from 'mediasoup-client/lib/types';
-import { ConnectTransportResponse, Tracks, TransportInfo } from '@/types/mediasoupTypes';
+import { ConnectTransportResponse, TransportInfo } from '@/types/mediasoupTypes';
 import { Socket } from 'socket.io-client';
 import { checkDependencies } from '@/utils/utils';
 import { ENCODING_OPTIONS } from '@/constants/videoOptions';
 
 interface UseProducerProps {
   socket: Socket | null;
-  tracks: Tracks;
-  isStreamReady: boolean;
+  // tracks: Tracks;
+  // isStreamReady: boolean;
+  mediaStream: MediaStream | null;
+  isMediaStreamReady: boolean;
   roomId: string;
   device: Device | null;
   transportInfo: TransportInfo | null;
@@ -23,8 +25,8 @@ interface UseProducerReturn {
 
 export const useProducer = ({
   socket,
-  tracks,
-  isStreamReady,
+  mediaStream,
+  isMediaStreamReady,
   roomId,
   device,
   transportInfo,
@@ -70,10 +72,10 @@ export const useProducer = ({
   };
 
   const createProducer = async (socket: Socket, transportInfo: TransportInfo) => {
-    if (!transport.current || !socket || !tracks) {
+    if (!transport.current || !socket || !mediaStream) {
       const dependencyError = checkDependencies('createProducer', {
         socket,
-        tracks,
+        mediaStream,
         transport: transport.current,
       });
       setError(dependencyError);
@@ -99,28 +101,27 @@ export const useProducer = ({
       );
     });
 
-    (Object.keys(tracks) as Array<keyof Tracks>).forEach(kind => {
-      if (tracks[kind]) {
-        const producerConfig: Record<string, unknown> = {
-          track: tracks[kind],
-        };
+    mediaStream.getTracks().forEach(track => {
+      const producerConfig: Record<string, unknown> = {
+        track: track,
+        stopTracks: false,
+      };
 
-        if (kind === 'video') {
-          producerConfig['encodings'] = ENCODING_OPTIONS;
-          producerConfig['codecOptions'] = {
-            videoGoogleStartBitrate: 1000,
-          };
-        }
-        
-        transport
-          .current!.produce(producerConfig)
-          .then(producer => setProducers(prev => new Map(prev).set(kind, producer)));
+      if (track.kind === 'video') {
+        producerConfig['encodings'] = ENCODING_OPTIONS;
+        producerConfig['codecOptions'] = {
+          videoGoogleStartBitrate: 1000,
+        };
       }
+
+      transport.current!.produce(producerConfig).then(producer => {
+        setProducers(prev => new Map(prev).set(track.kind, producer));
+      });
     });
   };
 
   useEffect(() => {
-    if (!socket || !device || !roomId || !tracks || !isStreamReady || !transportInfo) {
+    if (!socket || !device || !roomId || !mediaStream || !isMediaStreamReady || !transportInfo) {
       return;
     }
 
@@ -134,7 +135,7 @@ export const useProducer = ({
         transport.current = null;
       }
     };
-  }, [socket, device, roomId, transportInfo, isStreamReady]);
+  }, [socket, device, roomId, transportInfo, isMediaStreamReady]);
 
   return {
     transport: transport.current,