Merge pull request #12 from sgdevcamp2023/FE/Media

feat: 미디어 클라이언트 병합

src/frontend/src/components/Channel.jsx

@@ -15,7 +15,8 @@ import {getUserStateAndVoice} from "../Request/communityRequest";
 
 const Channel = () => {
   const navigate = useNavigate();
-  const {audioStream} = useMediaStream();
+
+  const { audioStream, setVideoStream, setPeerVideoStream } = useMediaStream();
 
   const {
     connectSocket,

src/frontend/src/components/MediaContainer.jsx

@@ -7,18 +7,24 @@ import MediaStore from "../store/MediaStore";
 
 import useMediasoup from "../hooks/useMediasoup";
 import { useMediaStream } from "../contexts/MediaStreamContext";
+import SocketStore from "../store/SocketStore";
 
 const MediaContainer = () => {
   const navigate = useNavigate();
   const { setCurrentViewChannelType } = CurrentStore();
   const { videoStream, setVideoStream } = useMediaStream();
-  const { getLocalCameraStream, getLocalDisplayStream } = useMediasoup();
-
+  const { getLocalCameraStream, getLocalDisplayStream, closeProducer } =
+    useMediasoup();
+  const { removeVideoProducer, removeDisplayProducer } = MediaStore();
+  const { removeVoiceSocket } = SocketStore();
   const { CURRENT_JOIN_GUILD, CURRENT_JOIN_CHANNEL } = CurrentStore.getState();
 
   const handleCemareStream = () => {
     if (videoStream && videoStream.camera) {
+      const { VIDEO_PRODUCER } = MediaStore.getState();
       videoStream.camera.track.stop();
+      closeProducer(VIDEO_PRODUCER);
+      removeVideoProducer();
       setVideoStream({ ...videoStream, camera: null });
       return;
     }
@@ -29,7 +35,10 @@ const MediaContainer = () => {
 
   const handleDisplayStream = () => {
     if (videoStream && videoStream.display) {
+      const { DISPLAY_PRODUCER } = MediaStore.getState();
       videoStream.display.track.stop();
+      closeProducer(DISPLAY_PRODUCER);
+      removeDisplayProducer();
       setVideoStream({ ...videoStream, display: null });
       return;
     }
@@ -38,6 +47,15 @@ const MediaContainer = () => {
     navigate(`/channels/${CURRENT_JOIN_GUILD}/${CURRENT_JOIN_CHANNEL}`);
   };
 
+  const handleDisconnect = () => {
+    const { VOICE_SOCKET } = SocketStore.getState();
+    const { SEND_TRANSPORT, RECV_TRANSPORT } = MediaStore.getState();
+    VOICE_SOCKET.close();
+    removeVoiceSocket();
+    SEND_TRANSPORT.close();
+    RECV_TRANSPORT.close();
+  };
+
   return (
     <div className="media-container">
       <div className="media-status">
@@ -57,7 +75,9 @@ const MediaContainer = () => {
             )}
           </p>
         </div>
-        <button className="disconnect-button">Disconnect</button>
+        <button className="disconnect-button" onClick={handleDisconnect}>
+          Disconnect
+        </button>
       </div>
       <div className="media-tools">
         <button className="media_button camera" onClick={handleCemareStream}>

src/frontend/src/components/MediaTitle.jsx → src/frontend/src/components/MediaInteract.jsx

@@ -1,7 +1,8 @@
-import React, { useEffect } from "react";
-import "../css/MediaTitle.css";
+import React from "react";
+import "../css/MediaInteract.css";
 import CommunityStore from "../store/CommunityStore";
 import CurrentStore from "../store/CurrentStore";
+import SocketStore from "../store/SocketStore";
 
 const MediaTitle = () => {
   const { CHANNEL_LIST } = CommunityStore();
@@ -14,6 +15,13 @@ const MediaTitle = () => {
           element.channelReadId === CURRENT_JOIN_CHANNEL ? element.name : null
         )}
       </span>
+      {SocketStore.getState().VOICE_SOCKET ? (
+        <button className="media-disconnect">
+          <span>Disconnect</span>
+        </button>
+      ) : (
+        <></>
+      )}
     </div>
   );
 };

src/frontend/src/components/MyVideoBox.jsx

@@ -5,7 +5,7 @@ import { useMediaStream } from "../contexts/MediaStreamContext";
 const MyVideoBox = () => {
   const camera = useRef(null);
   const display = useRef(null);
-  const { videoStream } = useMediaStream();
+  const { videoStream, audioStream } = useMediaStream();
 
   useEffect(() => {
     if (videoStream && videoStream.camera) {
@@ -19,6 +19,11 @@ const MyVideoBox = () => {
     }
   }, [videoStream]);
 
+  useEffect(() => {
+    console.log("videoStream", videoStream);
+    console.log("audioStream", audioStream);
+  }, [videoStream, audioStream]);
+
   return (
     <div className="my-video-box">
       {videoStream.camera ? (

src/frontend/src/components/PeerVideoContainer.jsx

@@ -0,0 +1,56 @@
+import React, { useEffect } from "react";
+import "../css/PeerVideoBox.css";
+import useMediasoup from "../hooks/useMediasoup";
+import { useMediaStream } from "../contexts/MediaStreamContext";
+import useVoiceSocket from "../hooks/useVoiceSocket";
+import CurrentStore from "../store/CurrentStore";
+import SocketStore from "../store/SocketStore";
+
+const PeerVideoContainer = () => {
+  const { toggleVideo } = useMediasoup();
+  const {
+    connectSocket,
+    addEventListeners,
+    validateUserInChannel,
+    voice_socket,
+  } = useVoiceSocket(process.env.REACT_APP_MEDIA_URL);
+  const { peerVideoStream } = useMediaStream();
+
+  const handleVideoPause = (consumerId) => {
+    const { VOICE_SOCKET } = SocketStore.getState();
+    const { CURRENT_VIEW_GUILD, CURRENT_VIEW_CHANNEL } =
+      CurrentStore.getState();
+
+    if (!VOICE_SOCKET) {
+      connectSocket();
+      addEventListeners();
+      validateUserInChannel(CURRENT_VIEW_GUILD, CURRENT_VIEW_CHANNEL);
+    }
+    if (VOICE_SOCKET) {
+      toggleVideo(consumerId);
+    }
+  };
+
+  return (
+    <div className="peer-video-box">
+      {Object.entries(peerVideoStream).map(
+        ([id, { kind, stream, consumerId }]) =>
+          kind === "video" ? (
+            <div className="video-container">
+              <video
+                key={id}
+                ref={(ref) => ref && (ref.srcObject = stream)}
+                autoPlay
+                className="video"
+              />
+              <button onClick={() => handleVideoPause(consumerId)}>aa</button>
+            </div>
+          ) : (
+            <></>
+          )
+      )}
+    </div>
+  );
+};
+
+export default PeerVideoContainer;

src/frontend/src/contexts/MediaStreamContext.js

@@ -6,10 +6,18 @@ export const MediaStreamProvider = ({ children }) => {
   const [audioStream, setAudioStream] = useState({});
   // "type" : {track, track....}
   const [videoStream, setVideoStream] = useState({});
+  const [peerVideoStream, setPeerVideoStream] = useState({});
 
   return (
     <MediaStreamContext.Provider
-      value={{ audioStream, setAudioStream, videoStream, setVideoStream }}
+      value={{
+        audioStream,
+        setAudioStream,
+        videoStream,
+        setVideoStream,
+        peerVideoStream,
+        setPeerVideoStream,
+      }}
     >
       {children}
     </MediaStreamContext.Provider>

src/frontend/src/css/MediaInteract.css

@@ -0,0 +1,27 @@
+.media-title {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+  font-size: 1em;
+  color: white;
+  font-weight: bold;
+}
+
+.media-disconnect {
+  position: fixed;
+  bottom: 50px;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 80px;
+  height: 80px;
+  border-radius: 50px;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+  background-color: #a00000;
+}
+
+.media-disconnect:hover {
+  cursor: pointer;
+}

src/frontend/src/css/MediaPage.css

@@ -2,16 +2,20 @@
   width: 100%;
   height: 100%;
   background-color: black;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  justify-content: flex-start;
+  align-items: center;
+  height: 100vh;
+  position: relative;
+  overflow: auto;
 }
 
 .page-container:hover .media-title {
   opacity: 1;
 }
 
-.page-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  position: relative;
+.page-container:hover .media-disconnect {
+  opacity: 1;
 }

src/frontend/src/css/MyVideoBox.css

@@ -7,10 +7,13 @@
 
 .my-video-box {
   display: flex;
+  flex-wrap: wrap;
   justify-content: center;
   align-items: center;
+  gap: 1rem;
+  border: 2px solid #ccc;
 }
 
 .video-container {
-  margin: 10px;
+  flex: 1 0 auto;
 }

src/frontend/src/css/PeerVideoBox.css

@@ -0,0 +1,8 @@
+.peer-video-box {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  border: 2px solid #ccc;
+}