From b3fc2f62603ab056758b6f9c1b024bf03f318a10 Mon Sep 17 00:00:00 2001 From: eastfilmm Date: Fri, 2 Feb 2024 00:10:02 +0900 Subject: [PATCH 1/2] =?UTF-8?q?Feat:=201=EB=8C=801=20video=20call=20API=20?= =?UTF-8?q?=EC=97=B0=EA=B2=B0=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/video/VideoCall.tsx | 184 ++++++++++---------- 1 file changed, 89 insertions(+), 95 deletions(-) diff --git a/frontend/src/components/video/VideoCall.tsx b/frontend/src/components/video/VideoCall.tsx index 2fe376d..cf2857d 100644 --- a/frontend/src/components/video/VideoCall.tsx +++ b/frontend/src/components/video/VideoCall.tsx @@ -4,7 +4,7 @@ const VideoCall = () => { const socketRef = useRef(); const myVideoRef = useRef(null); const remoteVideoRef = useRef(null); - const myId = useRef(Math.floor(Math.random() * 1000).toString()); + const myId = Math.floor(Math.random() * 1000).toString(); const pcRef = useRef( new RTCPeerConnection({ iceServers: [ @@ -18,59 +18,6 @@ const VideoCall = () => { const [audioEnabled, setAudioEnabled] = useState(true); const [videoEnabled, setVideoEnabled] = useState(true); - //websocket 서버 연결 - const connectWebSocket = () => { - socketRef.current = new WebSocket("ws://localhost:8080/signal/1"); - - socketRef.current.onopen = () => { - console.log("WebSocket connected"); - - const message = { - fromUserId: myId.current, - type: "join", - roomId: "1", - candidate: null, - sdp: null, - }; - - socketRef.current?.send(JSON.stringify(message)); - }; - - // msg 종류에 따라 다르게 처리 - socketRef.current.onmessage = (event) => { - const message = JSON.parse(event.data); - switch (message.type) { - case "offer": - console.log("recv Offer"); - createAnswer(message.sdp); - break; - case "answer": - console.log("recv Answer"); - pcRef.current?.setRemoteDescription( - new RTCSessionDescription(message.sdp) - ); - break; - case "ice": - console.log("recv ICE Candidate"); - pcRef.current?.addIceCandidate(new RTCIceCandidate(message.candidate)) - .then(() => { - console.log("Ice Candidate added successfully."); - }) - .catch((error) => { - console.error("Error adding Ice Candidate:", error); - }); - break; - default: - break; - } - }; - - socketRef.current.onclose = () => { - console.log("WebSocket disconnected"); - }; - }; - - // video and audio 설정 const getMedia = async () => { try { const stream = await navigator.mediaDevices.getUserMedia({ @@ -89,9 +36,8 @@ const VideoCall = () => { pcRef.current.onicecandidate = (e) => { if (e.candidate && socketRef.current) { console.log("send candidate"); - const message = { - fromUserId: myId.current, + fromUserId: myId, type: "ice", roomId: "1", candidate: e.candidate, @@ -119,7 +65,7 @@ const VideoCall = () => { await pcRef.current.setLocalDescription(sdp); const message = { - fromUserId: myId.current, + fromUserId: myId, type: "offer", roomId: "1", candidate: null, @@ -134,45 +80,101 @@ const VideoCall = () => { }; const createAnswer = async (offerSdp: RTCSessionDescriptionInit) => { - console.log("createAnswer"); - if (!(pcRef.current && socketRef.current)) { - return; - } - try { - pcRef.current.setRemoteDescription(offerSdp); + console.log("createAnswer"); + try { + await pcRef.current.setRemoteDescription( + new RTCSessionDescription(offerSdp) + ); + const stream = await navigator.mediaDevices.getUserMedia({ + video: videoEnabled, + audio: audioEnabled, + }); - const answerSdp = await pcRef.current.createAnswer(); - await pcRef.current.setLocalDescription(answerSdp); + if (myVideoRef.current) { + myVideoRef.current.srcObject = stream; + } - console.log("sent the answer"); + stream.getTracks().forEach((track) => { + pcRef.current?.addTrack(track, stream); + }); - const message = { - fromUserId: myId.current, - type: "answer", - roomId: "1", - candidate: null, - sdp: pcRef.current.localDescription, - }; + const answerSdp = await pcRef.current.createAnswer(); + await pcRef.current.setLocalDescription(answerSdp); - socketRef.current.send(JSON.stringify(message)); - } catch (e) { - console.error(e); - } - }; - + console.log("sent the answer"); - const toggleAudio = () => { - setAudioEnabled((prevAudioEnabled) => !prevAudioEnabled); - }; + const message = { + fromUserId: myId, + type: "answer", + roomId: "1", + candidate: null, + sdp: pcRef.current.localDescription, + }; - const toggleVideo = () => { - setVideoEnabled((prevVideoEnabled) => !prevVideoEnabled); + socketRef.current?.send(JSON.stringify(message)); + } catch (e) { + console.error(e); + } }; useEffect(() => { - connectWebSocket(); + socketRef.current = new WebSocket("ws://localhost:8080/signal/1"); getMedia(); - }, []); + + socketRef.current.onopen = () => { + console.log("WebSocket connected"); + + const message = { + fromUserId: myId, + type: "join", + roomId: "1", + candidate: null, + sdp: null, + }; + + socketRef.current?.send(JSON.stringify(message)); + + }; + + socketRef.current.onmessage = (event) => { + const message = JSON.parse(event.data); + switch (message.type) { + case "offer": + console.log("recv Offer"); + createAnswer(message.sdp); + break; + case "answer": + console.log("recv Answer"); + pcRef.current?.setRemoteDescription( + new RTCSessionDescription(message.sdp) + ); + break; + case "ice": + console.log("recv ICE Candidate"); + pcRef.current?.addIceCandidate(new RTCIceCandidate(message.candidate)) + .then(() => { + console.log("Ice Candidate added successfully."); + console.log(message.candidate); + }) + .catch((error) => { + console.error("Error adding Ice Candidate:", error); + }); + break; + default: + break; + } + }; + + socketRef.current.onclose = () => { + console.log("WebSocket disconnected"); + }; + + return () => { + if (socketRef.current) { + socketRef.current.close(); + } + }; + }, []); return (
{ ref={remoteVideoRef} autoPlay /> -
- - -
); }; -export default VideoCall; +export default VideoCall; \ No newline at end of file From bcf63d347c1cd2cbd8baa2898de4378d88ac861d Mon Sep 17 00:00:00 2001 From: eastfilmm Date: Fri, 2 Feb 2024 01:29:19 +0900 Subject: [PATCH 2/2] =?UTF-8?q?Fix:=20create=20answer=EC=97=90=EC=84=9C=20?= =?UTF-8?q?getUserMedia=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/video/VideoCall.tsx | 24 ++++++--------------- 1 file changed, 6 insertions(+), 18 deletions(-) diff --git a/frontend/src/components/video/VideoCall.tsx b/frontend/src/components/video/VideoCall.tsx index cf2857d..3264299 100644 --- a/frontend/src/components/video/VideoCall.tsx +++ b/frontend/src/components/video/VideoCall.tsx @@ -85,24 +85,12 @@ const VideoCall = () => { await pcRef.current.setRemoteDescription( new RTCSessionDescription(offerSdp) ); - const stream = await navigator.mediaDevices.getUserMedia({ - video: videoEnabled, - audio: audioEnabled, - }); - - if (myVideoRef.current) { - myVideoRef.current.srcObject = stream; - } - - stream.getTracks().forEach((track) => { - pcRef.current?.addTrack(track, stream); - }); - + const answerSdp = await pcRef.current.createAnswer(); await pcRef.current.setLocalDescription(answerSdp); - + console.log("sent the answer"); - + const message = { fromUserId: myId, type: "answer", @@ -110,17 +98,17 @@ const VideoCall = () => { candidate: null, sdp: pcRef.current.localDescription, }; - + socketRef.current?.send(JSON.stringify(message)); } catch (e) { console.error(e); } }; - + useEffect(() => { socketRef.current = new WebSocket("ws://localhost:8080/signal/1"); getMedia(); - + socketRef.current.onopen = () => { console.log("WebSocket connected");