🐛 [Fix]: 카메라나 화면 공유 중 하나만 켰을 때는 미디어 스트림 보내도록 수정

Author: zero0205

apps/client/src/hooks/useProducer.ts

@@ -101,24 +101,6 @@ export const useProducer = ({
       );
     });
 
-    // (Object.keys(tracks) as Array<keyof Tracks>).forEach(kind => {
-    //   if (tracks[kind]) {
-    //     const producerConfig: Record<string, unknown> = {
-    //       track: tracks[kind],
-    //     };
-
-    //     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)));
-    //   }
-    // });
     mediaStream.getTracks().forEach(track => {
       const producerConfig: Record<string, unknown> = {
         track: track,

apps/client/src/pages/Broadcast/BroadcastPlayer.tsx

@@ -24,22 +24,29 @@ function BroadcastPlayer({
   const videoRef = useRef<HTMLVideoElement>(null);
   const screenShareRef = useRef<HTMLVideoElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
+  const animationFrameRef = useRef<number>();
 
   // 비디오 스트림 설정
   useEffect(() => {
     if (videoRef.current && mediaStream) {
       videoRef.current.srcObject = mediaStream;
     }
-    tracksRef.current['mediaAudio'] = mediaStream?.getAudioTracks()[0];
-  }, [mediaStream, tracksRef.current]);
+  }, [isVideoEnabled, mediaStream]);
 
   // 화면 공유 스트림 설정
   useEffect(() => {
     if (screenShareRef.current && screenStream) {
       screenShareRef.current.srcObject = screenStream;
     }
+  }, [isScreenSharing, screenStream]);
+
+  useEffect(() => {
+    tracksRef.current['mediaAudio'] = mediaStream?.getAudioTracks()[0];
+  }, [mediaStream]);
+
+  useEffect(() => {
     tracksRef.current['screenAudio'] = screenStream?.getAudioTracks()[0];
-  }, [isScreenSharing, screenStream, tracksRef.current]);
+  }, [screenStream]);
 
   // 미디어스트림 캔버스에 넣기
   useEffect(() => {
@@ -90,78 +97,53 @@ function BroadcastPlayer({
           const pipY = canvas.height - pipHeight;
           context.drawImage(videoRef.current, pipX, pipY, pipWidth, pipHeight);
         }
-      } else if (isVideoEnabled && videoRef.current) {
-        // 화면 공유 off / 캠 on
-        context.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height);
-      } else {
-        // 화면 공유 off / 캠 off
-        context.fillStyle = '#000000';
-        context.fillRect(0, 0, canvas.width, canvas.height);
       }
-      requestAnimationFrame(draw);
+      animationFrameRef.current = requestAnimationFrame(draw);
     };
 
     const startDrawing = async () => {
       draw();
       tracksRef.current['video'] = canvas.captureStream(30).getVideoTracks()[0];
+      videoRef.current?.play();
+      screenShareRef.current?.play();
       if (!isStreamReady) setIsStreamReady(true);
     };
 
     if (isVideoEnabled && isScreenSharing && mediaStream && screenStream) {
-      mediaStream.getVideoTracks()[0].enabled = true;
-      screenStream.getVideoTracks()[0].enabled = true;
       startDrawing();
     }
+
+    return () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
   }, [isVideoEnabled, isScreenSharing, mediaStream, screenStream, isStreamReady]);
 
   return (
     <div className="relative w-full max-h-[310px] aspect-video">
-      {isVideoEnabled && isScreenSharing ? (
-        <>
-          <video
-            ref={videoRef}
-            autoPlay
-            muted
-            playsInline
-            className="absolute top-0 left-0 w-full h-full object-cover"
-          />
-          <video
-            ref={screenShareRef}
-            autoPlay
-            muted
-            playsInline
-            className="absolute top-0 left-0 w-full h-full object-cover"
-          />
-          <canvas
-            ref={canvasRef}
-            width={RESOLUTION_OPTIONS['high'].width}
-            height={RESOLUTION_OPTIONS['high'].height}
-            className="absolute top-0 left-0 w-full h-full bg-surface-alt object-cover"
-          />
-        </>
-      ) : isVideoEnabled && !isScreenSharing ? (
-        <video
-          ref={videoRef}
-          autoPlay
-          muted
-          playsInline
-          width={RESOLUTION_OPTIONS['high'].width}
-          height={RESOLUTION_OPTIONS['high'].height}
-          className="absolute top-0 left-0 w-full h-full bg-surface-alt object-cover"
-        />
-      ) : !isVideoEnabled && isScreenSharing ? (
-        <video
-          ref={screenShareRef}
-          autoPlay
-          muted
-          playsInline
-          width={RESOLUTION_OPTIONS['high'].width}
-          height={RESOLUTION_OPTIONS['high'].height}
-          className="absolute top-0 left-0 w-full h-full bg-surface-alt object-cover"
-        />
-      ) : (
-        <div className="absolute top-0 left-0 w-full h-full bg-surface-alt" />
-      )}
+      <video
+        ref={videoRef}
+        autoPlay
+        muted
+        playsInline
+        className={`absolute top-0 left-0 w-full h-full bg-surface-alt ${isVideoEnabled ? '' : 'hidden'}`}
+      />
+      <video
+        ref={screenShareRef}
+        autoPlay
+        muted
+        playsInline
+        className={`absolute top-0 left-0 w-full h-full bg-surface-alt ${isScreenSharing ? '' : 'hidden'}`}
+      />
+      <canvas
+        ref={canvasRef}
+        width={RESOLUTION_OPTIONS['high'].width}
+        height={RESOLUTION_OPTIONS['high'].height}
+        className={`absolute top-0 left-0 w-full h-full bg-surface-alt object-cover ${
+          !isScreenSharing || !isVideoEnabled ? 'hidden' : ''
+        }`}
+      />
     </div>
   );
 }

apps/client/src/pages/Broadcast/index.tsx

@@ -99,6 +99,8 @@ function Broadcast() {
         // screenStream 비디오 트랙 사용
         newTrack = screenStream?.getVideoTracks()[0] || null;
       }
+      if (isVideoEnabled && mediaStream) mediaStream.getVideoTracks()[0].enabled = true;
+      if (isScreenSharing && screenStream) screenStream.getVideoTracks()[0].enabled = true;
 
       // clone 없이 직접 트랙 교체
       await currentProducer.replaceTrack({ track: newTrack });