From 09f5b92115a84cf127b9ebc3133ddeab0c10934f Mon Sep 17 00:00:00 2001 From: sayyyho <323psh@naver.com> Date: Tue, 10 Sep 2024 15:28:47 +0900 Subject: [PATCH 1/2] =?UTF-8?q?Fix:=20=EC=8B=A4=EC=8B=9C=EA=B0=84=20?= =?UTF-8?q?=EC=BB=A4=EB=84=A5=EC=85=98=20=EA=B3=A0=EC=9C=A0=20=EB=B0=A9?= =?UTF-8?q?=EB=B2=88=ED=98=B8=20=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?= 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 ( From 0c0d760e9be24ef50f9f32dd4468229a62c6e767 Mon Sep 17 00:00:00 2001 From: sayyyho <323psh@naver.com> Date: Tue, 10 Sep 2024 15:44:55 +0900 Subject: [PATCH 2/2] =?UTF-8?q?Fix:=20=ED=99=94=EB=A9=B4=20UI=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/WebRTC/VideoPage.jsx | 25 +++++++++++++++++++++---- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/src/pages/WebRTC/VideoPage.jsx b/src/pages/WebRTC/VideoPage.jsx index e98488a..6d4f6d8 100644 --- a/src/pages/WebRTC/VideoPage.jsx +++ b/src/pages/WebRTC/VideoPage.jsx @@ -132,7 +132,15 @@ const RTCPage = () => { isButton={true} > - +
+

나의 화면

+
+

000님의 화면

+