Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat/issue-20 #64

Merged
merged 2 commits into from
Feb 1, 2024
Merged

feat/issue-20 #64

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b3fc2f6
Feat: 1대1 video call API 연결 완료
eastfilmm Feb 1, 2024
bcf63d3
Fix: create answer에서 getUserMedia 수정
eastfilmm Feb 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
178 changes: 80 additions & 98 deletions frontend/src/components/video/VideoCall.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const VideoCall = () => {
const socketRef = useRef<WebSocket>();
const myVideoRef = useRef<HTMLVideoElement>(null);
const remoteVideoRef = useRef<HTMLVideoElement>(null);
const myId = useRef<string>(Math.floor(Math.random() * 1000).toString());
const myId = Math.floor(Math.random() * 1000).toString();
const pcRef = useRef<RTCPeerConnection>(
new RTCPeerConnection({
iceServers: [
Expand All @@ -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({
Expand All @@ -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,
Expand Down Expand Up @@ -119,7 +65,7 @@ const VideoCall = () => {
await pcRef.current.setLocalDescription(sdp);

const message = {
fromUserId: myId.current,
fromUserId: myId,
type: "offer",
roomId: "1",
candidate: null,
Expand All @@ -134,45 +80,89 @@ 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 answerSdp = await pcRef.current.createAnswer();
await pcRef.current.setLocalDescription(answerSdp);

console.log("sent the answer");

const message = {
fromUserId: myId,
type: "answer",
roomId: "1",
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();

const answerSdp = await pcRef.current.createAnswer();
await pcRef.current.setLocalDescription(answerSdp);
socketRef.current.onopen = () => {
console.log("WebSocket connected");

console.log("sent the answer");
const message = {
fromUserId: myId,
type: "join",
roomId: "1",
candidate: null,
sdp: null,
};

const message = {
fromUserId: myId.current,
type: "answer",
roomId: "1",
candidate: null,
sdp: pcRef.current.localDescription,
};
socketRef.current?.send(JSON.stringify(message));

};

socketRef.current.send(JSON.stringify(message));
} catch (e) {
console.error(e);
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;
}
};


const toggleAudio = () => {
setAudioEnabled((prevAudioEnabled) => !prevAudioEnabled);
};
};

const toggleVideo = () => {
setVideoEnabled((prevVideoEnabled) => !prevVideoEnabled);
};
socketRef.current.onclose = () => {
console.log("WebSocket disconnected");
};

useEffect(() => {
connectWebSocket();
getMedia();
}, []);
return () => {
if (socketRef.current) {
socketRef.current.close();
}
};
}, []);

return (
<div
Expand All @@ -196,16 +186,8 @@ const VideoCall = () => {
ref={remoteVideoRef}
autoPlay
/>
<div>
<button onClick={toggleAudio}>
{audioEnabled ? "Mute" : "Unmute"}
</button>
<button onClick={toggleVideo}>
{videoEnabled ? "Camera Off" : "Camera On"}
</button>
</div>
</div>
);
};

export default VideoCall;
export default VideoCall;