From 439ddc87486c4f2e5beb366fde425dc78ac5160f Mon Sep 17 00:00:00 2001
From: Seho Park <34148750+sayyyho@users.noreply.github.com>
Date: Tue, 10 Sep 2024 15:31:35 +0900
Subject: [PATCH] =?UTF-8?q?Fix:=20WebRTC=20=EA=B3=A0=EC=9C=A0=20=EB=B2=88?=
 =?UTF-8?q?=ED=98=B8=20=EC=B6=94=EA=B0=80=20(#104)=20(#105)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/WebRTC/VideoPage.jsx | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/pages/WebRTC/VideoPage.jsx b/src/pages/WebRTC/VideoPage.jsx
index 6f90f07..e98488a 100644
--- a/src/pages/WebRTC/VideoPage.jsx
+++ b/src/pages/WebRTC/VideoPage.jsx
@@ -11,7 +11,7 @@ const RTCPage = () => {
   const myVideoRef = useRef(null);
   const remoteVideoRef = useRef(null);
   const pcRef = useRef(null);
-  const roomName = params.roomName; // You can dynamically generate or pass this
+  const roomName = params.roomName;
 
   const getMedia = async () => {
     try {
@@ -22,8 +22,9 @@ const RTCPage = () => {
 
       if (myVideoRef.current) {
         myVideoRef.current.srcObject = stream;
-        myVideoRef.current.volume = 0; // 볼륨을 0으로 설정
+        myVideoRef.current.volume = 0;
       }
+
       stream.getTracks().forEach((track) => {
         if (pcRef.current) {
           pcRef.current.addTrack(track, stream);
@@ -61,7 +62,9 @@ const RTCPage = () => {
 
   const createAnswer = async (offer) => {
     try {
-      await pcRef.current.setRemoteDescription(offer);
+      await pcRef.current.setRemoteDescription(
+        new RTCSessionDescription(offer)
+      );
       const answer = await pcRef.current.createAnswer();
       await pcRef.current.setLocalDescription(answer);
       console.log("Created answer: ", answer);
@@ -96,24 +99,30 @@ const RTCPage = () => {
     socketRef.current.on("offer", async (offer) => {
       console.log("Received offer: ", offer);
       await getMedia();
-      createAnswer(offer);
+      await createAnswer(offer); // Ensure createAnswer is awaited
     });
 
-    socketRef.current.on("answer", (answer) => {
+    socketRef.current.on("answer", async (answer) => {
       console.log("Received answer: ", answer);
-      pcRef.current.setRemoteDescription(answer);
+      await pcRef.current.setRemoteDescription(
+        new RTCSessionDescription(answer)
+      );
     });
 
     socketRef.current.on("candidate", async (candidate) => {
       console.log("Received candidate: ", candidate);
-      await pcRef.current.addIceCandidate(candidate);
+      try {
+        await pcRef.current.addIceCandidate(new RTCIceCandidate(candidate));
+      } catch (e) {
+        console.error("Error adding ICE candidate: ", e);
+      }
     });
 
     return () => {
       if (socketRef.current) socketRef.current.disconnect();
       if (pcRef.current) pcRef.current.close();
     };
-  }, []);
+  }, [roomName]); // Add roomName to the dependency array to ensure updates
 
   return (
     <Layout>