Test: WebRTC 기능 테스트

package.json

@@ -17,6 +17,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.1",
+    "socket.io-client": "^4.7.5",
     "zustand": "^4.5.4"
   },
   "devDependencies": {

src/App.jsx

@@ -11,13 +11,15 @@ import HomeMain from "./pages/homepages/HomeMain";
 import GlobalStyle from "./components/Common/GlobalStyle";
 import { PeopleListPage } from "./pages/PeopleListPage";
 import ChatPage from "./pages/chat/ChatPage";
+import RTCPage from "./pages/VideoPage";
 
 function App() {
   return (
     <Router>
       <Routes>
         <Route path="/" element={<HomeMain />}></Route>
         <Route path="/chat" element={<ChatPage />}></Route>
+        <Route path="/video" element={<RTCPage />}></Route>
       </Routes>
     </Router>
   );

src/pages/VideoPage.jsx

@@ -1,12 +1,126 @@
-import React from 'react';
-
-export const VideoPage = () => {
-    React.useEffect(() => {
-        console.log('VideoPage');
-    })
-    return (
-        <div>
-            hi hi
-        </div>
-    )
-}
+import React, { useEffect, useRef } from "react";
+import { io } from "socket.io-client";
+
+const RTCPage = () => {
+  const socketRef = useRef(null);
+  const myVideoRef = useRef(null);
+  const remoteVideoRef = useRef(null);
+  const pcRef = useRef(null);
+  const roomName = "testRoom"; // You can dynamically generate or pass this
+
+  const getMedia = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: true,
+        audio: true,
+      });
+
+      if (myVideoRef.current) {
+        myVideoRef.current.srcObject = stream;
+      }
+      stream.getTracks().forEach((track) => {
+        if (pcRef.current) {
+          pcRef.current.addTrack(track, stream);
+        }
+      });
+
+      pcRef.current.onicecandidate = (e) => {
+        if (e.candidate) {
+          console.log("ICE Candidate: ", e.candidate);
+          socketRef.current.emit("candidate", e.candidate, roomName);
+        }
+      };
+
+      pcRef.current.ontrack = (e) => {
+        if (remoteVideoRef.current) {
+          remoteVideoRef.current.srcObject = e.streams[0];
+          console.log("Received remote track: ", e.streams[0]);
+        }
+      };
+    } catch (e) {
+      console.error("Error accessing media devices.", e);
+    }
+  };
+
+  const createOffer = async () => {
+    try {
+      const offer = await pcRef.current.createOffer();
+      await pcRef.current.setLocalDescription(offer);
+      console.log("Created offer: ", offer);
+      socketRef.current.emit("offer", offer, roomName);
+    } catch (e) {
+      console.error("Error creating offer: ", e);
+    }
+  };
+
+  const createAnswer = async (offer) => {
+    try {
+      await pcRef.current.setRemoteDescription(offer);
+      const answer = await pcRef.current.createAnswer();
+      await pcRef.current.setLocalDescription(answer);
+      console.log("Created answer: ", answer);
+      socketRef.current.emit("answer", answer, roomName);
+    } catch (e) {
+      console.error("Error creating answer: ", e);
+    }
+  };
+
+  useEffect(() => {
+    socketRef.current = io("https://2242-122-45-139-174.ngrok-free.app", {
+      transports: ["websocket"],
+    });
+
+    pcRef.current = new RTCPeerConnection({
+      iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
+    });
+
+    socketRef.current.emit("join", roomName);
+
+    socketRef.current.on("created", async () => {
+      console.log("Room created");
+      await getMedia();
+    });
+
+    socketRef.current.on("joined", async () => {
+      console.log("Joined room");
+      await getMedia();
+      createOffer();
+    });
+
+    socketRef.current.on("offer", async (offer) => {
+      console.log("Received offer: ", offer);
+      await getMedia();
+      createAnswer(offer);
+    });
+
+    socketRef.current.on("answer", (answer) => {
+      console.log("Received answer: ", answer);
+      pcRef.current.setRemoteDescription(answer);
+    });
+
+    socketRef.current.on("candidate", async (candidate) => {
+      console.log("Received candidate: ", candidate);
+      await pcRef.current.addIceCandidate(candidate);
+    });
+
+    return () => {
+      if (socketRef.current) socketRef.current.disconnect();
+      if (pcRef.current) pcRef.current.close();
+    };
+  }, []);
+
+  return (
+    <div>
+      <h1>WebRTC Video Call</h1>
+      <video ref={myVideoRef} autoPlay playsInline style={{ width: "300px" }} />
+      <video
+        ref={remoteVideoRef}
+        autoPlay
+        playsInline
+        style={{ width: "300px" }}
+      />
+    </div>
+  );
+};
+
+export default RTCPage;