Skip to content

Commit 4e16261

Browse files
author
Regulus0811
committed
♻️ refactor: Remove unnecessary comments, add TURN server code, and update AWS address
Cleaned up the code by deleting unnecessary comments, added code for the TURN server, and updated the AWS address. Related issue: YJU-OKURA#158
1 parent 0abb4a9 commit 4e16261

File tree

2 files changed

+16
-546
lines changed

2 files changed

+16
-546
lines changed

‎src/app/classes/[cId]/[mId]/components/manageSubComponents/LiveClass.tsx

Lines changed: 4 additions & 318 deletions
Original file line numberDiff line numberDiff line change
@@ -1,322 +1,6 @@
11
/* eslint-disable react-hooks/exhaustive-deps */
22
/* eslint-disable @typescript-eslint/no-explicit-any */
33

4-
// import React, {useEffect, useRef, useState} from 'react';
5-
6-
// interface LiveClassProps {
7-
// classId: number;
8-
// userId: number;
9-
// }
10-
11-
// const LiveClass: React.FC<LiveClassProps> = ({classId, userId}) => {
12-
// const [classStarted, setClassStarted] = useState(false);
13-
// const [isSharingScreen, setIsSharingScreen] = useState(false);
14-
// const localVideoRef = useRef<HTMLVideoElement | null>(null);
15-
// const remoteVideoRef = useRef<HTMLVideoElement | null>(null);
16-
// const pcRef = useRef<RTCPeerConnection | null>(null);
17-
// const wsRef = useRef<WebSocket | null>(null);
18-
// const iceCandidatesRef = useRef<any[]>([]);
19-
// const [localDescriptionSet, setLocalDescriptionSet] = useState(false);
20-
// const screenStreamRef = useRef<MediaStream | null>(null);
21-
22-
// const startWebSocket = () => {
23-
// const ws = new WebSocket(
24-
// `ws://localhost:8080/?classId=${classId}&userId=${userId}`
25-
// );
26-
// wsRef.current = ws;
27-
28-
// ws.onopen = async () => {
29-
// console.log('WebSocket connected');
30-
// iceCandidatesRef.current.forEach(candidate => {
31-
// ws.send(JSON.stringify({event: 'candidate', data: candidate}));
32-
// });
33-
// iceCandidatesRef.current = [];
34-
35-
// if (pcRef.current) {
36-
// try {
37-
// const mediaStream = await navigator.mediaDevices.getUserMedia({
38-
// video: true,
39-
// audio: true,
40-
// });
41-
// mediaStream
42-
// .getTracks()
43-
// .forEach(track => pcRef.current?.addTrack(track, mediaStream));
44-
// if (localVideoRef.current) {
45-
// localVideoRef.current.srcObject = mediaStream;
46-
// }
47-
// const offer = await pcRef.current.createOffer();
48-
// await pcRef.current.setLocalDescription(offer);
49-
// setLocalDescriptionSet(true);
50-
// ws.send(
51-
// JSON.stringify({
52-
// event: 'offer',
53-
// data: pcRef.current.localDescription,
54-
// })
55-
// );
56-
// } catch (error) {
57-
// console.error('Failed to start media stream', error);
58-
// }
59-
// }
60-
// };
61-
62-
// ws.onmessage = async event => {
63-
// const {event: evt, data} = JSON.parse(event.data);
64-
// console.log('Message received:', evt, data);
65-
// if (evt === 'answer') {
66-
// if (localDescriptionSet) {
67-
// await pcRef.current?.setRemoteDescription(
68-
// new RTCSessionDescription(data)
69-
// );
70-
// } else {
71-
// console.error('Local description not set');
72-
// }
73-
// } else if (evt === 'candidate') {
74-
// if (localDescriptionSet) {
75-
// await pcRef.current?.addIceCandidate(new RTCIceCandidate(data));
76-
// } else {
77-
// iceCandidatesRef.current.push(data);
78-
// }
79-
// }
80-
// };
81-
82-
// ws.onclose = () => {
83-
// console.log('WebSocket closed');
84-
// };
85-
// };
86-
87-
// useEffect(() => {
88-
// if (classStarted) {
89-
// const pc = new RTCPeerConnection({
90-
// iceServers: [
91-
// {
92-
// urls: [
93-
// 'stun:stun.l.google.com:19302',
94-
// 'stun:stun1.l.google.com:19302',
95-
// 'stun:stun2.l.google.com:19302',
96-
// 'stun:stun3.l.google.com:19302',
97-
// 'stun:stun4.l.google.com:19302',
98-
// ],
99-
// },
100-
// ],
101-
// });
102-
// pcRef.current = pc;
103-
104-
// pc.onicecandidate = event => {
105-
// if (event.candidate) {
106-
// const candidateData = JSON.stringify({
107-
// event: 'candidate',
108-
// data: event.candidate.toJSON(),
109-
// });
110-
// if (wsRef.current?.readyState === WebSocket.OPEN) {
111-
// wsRef.current.send(candidateData);
112-
// } else {
113-
// iceCandidatesRef.current.push(event.candidate.toJSON());
114-
// }
115-
// }
116-
// };
117-
118-
// pc.ontrack = event => {
119-
// if (remoteVideoRef.current) {
120-
// remoteVideoRef.current.srcObject = event.streams[0];
121-
// }
122-
// };
123-
124-
// startWebSocket();
125-
126-
// return () => {
127-
// pcRef.current?.close();
128-
// wsRef.current?.close();
129-
// pcRef.current = null;
130-
// wsRef.current = null;
131-
// if (localVideoRef.current) {
132-
// localVideoRef.current.srcObject = null;
133-
// }
134-
// if (remoteVideoRef.current) {
135-
// remoteVideoRef.current.srcObject = null;
136-
// }
137-
// };
138-
// }
139-
// }, [classStarted]);
140-
141-
// const handleStartClass = () => {
142-
// setClassStarted(true);
143-
// };
144-
145-
// const handleEndClass = () => {
146-
// wsRef.current?.close();
147-
// pcRef.current?.close();
148-
// pcRef.current = null;
149-
// wsRef.current = null;
150-
// setClassStarted(false);
151-
// if (localVideoRef.current) {
152-
// localVideoRef.current.srcObject = null;
153-
// }
154-
// if (remoteVideoRef.current) {
155-
// remoteVideoRef.current.srcObject = null;
156-
// }
157-
// };
158-
159-
// const startScreenShare = async () => {
160-
// try {
161-
// const mediaStream = await navigator.mediaDevices.getDisplayMedia({
162-
// video: true,
163-
// audio: true,
164-
// });
165-
// screenStreamRef.current = mediaStream;
166-
// const videoTrack = mediaStream.getVideoTracks()[0];
167-
168-
// if (pcRef.current) {
169-
// const senders = pcRef.current.getSenders();
170-
// const videoSender = senders.find(
171-
// sender => sender.track?.kind === 'video'
172-
// );
173-
// if (videoSender) {
174-
// videoSender.replaceTrack(videoTrack);
175-
// } else {
176-
// mediaStream
177-
// .getTracks()
178-
// .forEach(track => pcRef.current?.addTrack(track, mediaStream));
179-
// }
180-
181-
// if (localVideoRef.current) {
182-
// localVideoRef.current.srcObject = mediaStream;
183-
// }
184-
185-
// setIsSharingScreen(true);
186-
// wsRef.current?.send(JSON.stringify({event: 'screenShare', data: true}));
187-
// }
188-
// } catch (error) {
189-
// console.error('Screen sharing failed', error);
190-
// }
191-
// };
192-
193-
// const stopScreenShare = async () => {
194-
// if (screenStreamRef.current) {
195-
// screenStreamRef.current.getTracks().forEach(track => track.stop());
196-
// screenStreamRef.current = null;
197-
// }
198-
// setIsSharingScreen(false);
199-
// resetLocalVideo();
200-
// wsRef.current?.send(JSON.stringify({event: 'screenShare', data: false}));
201-
// };
202-
203-
// const resetLocalVideo = async () => {
204-
// try {
205-
// const mediaStream = await navigator.mediaDevices.getUserMedia({
206-
// video: true,
207-
// audio: true,
208-
// });
209-
// const videoTrack = mediaStream.getVideoTracks()[0];
210-
211-
// if (pcRef.current) {
212-
// const senders = pcRef.current.getSenders();
213-
// const videoSender = senders.find(
214-
// sender => sender.track?.kind === 'video'
215-
// );
216-
// if (videoSender) {
217-
// videoSender.replaceTrack(videoTrack);
218-
// } else {
219-
// mediaStream
220-
// .getTracks()
221-
// .forEach(track => pcRef.current?.addTrack(track, mediaStream));
222-
// }
223-
224-
// if (localVideoRef.current) {
225-
// localVideoRef.current.srcObject = mediaStream;
226-
// }
227-
// }
228-
// } catch (error) {
229-
// console.error('Failed to reset local video stream', error);
230-
// }
231-
// };
232-
233-
// return (
234-
// <div className="flex flex-col items-center h-screen">
235-
// <div className="bg-[#ffffff] border border-gray-400 shadow-md rounded-lg p-6 w-80 flex flex-col items-center mb-8">
236-
// {!classStarted ? (
237-
// <button
238-
// onClick={handleStartClass}
239-
// className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-md"
240-
// >
241-
// 수업 시작
242-
// </button>
243-
// ) : (
244-
// <>
245-
// <button
246-
// onClick={handleEndClass}
247-
// className="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-md"
248-
// >
249-
// 수업 종료
250-
// </button>
251-
// {isSharingScreen ? (
252-
// <button
253-
// onClick={stopScreenShare}
254-
// className="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded-md mt-4"
255-
// >
256-
// 화면 공유 종료
257-
// </button>
258-
// ) : (
259-
// <button
260-
// onClick={startScreenShare}
261-
// className="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-md mt-4"
262-
// >
263-
// 화면 공유 시작
264-
// </button>
265-
// )}
266-
// </>
267-
// )}
268-
// </div>
269-
270-
// {classStarted && (
271-
// <div
272-
// className="flex flex-col items-center mt-12 overflow-y-auto"
273-
// style={{height: '60vh'}}
274-
// >
275-
// <div className="flex flex-col items-center p-4 mb-8">
276-
// <video
277-
// controls
278-
// autoPlay
279-
// ref={localVideoRef}
280-
// playsInline
281-
// style={{width: '100%'}}
282-
// />
283-
// </div>
284-
// <div className="flex flex-col items-center p-4 mb-8">
285-
// <video
286-
// ref={remoteVideoRef}
287-
// autoPlay
288-
// playsInline
289-
// controls
290-
// style={{width: '100%'}}
291-
// />
292-
// </div>
293-
294-
// <div className="flex flex-col items-center p-4 mb-8">
295-
// <video
296-
// className="h-full w-full rounded-lg"
297-
// controls
298-
// autoPlay
299-
// playsInline
300-
// style={{width: '100%'}}
301-
// />
302-
// </div>
303-
// <div className="flex flex-col items-center p-4 mb-8">
304-
// <video
305-
// className="h-full w-full rounded-lg"
306-
// controls
307-
// autoPlay
308-
// playsInline
309-
// style={{width: '100%'}}
310-
// />
311-
// </div>
312-
// </div>
313-
// )}
314-
// </div>
315-
// );
316-
// };
317-
318-
// export default LiveClass;
319-
3204
import React, {useEffect, useRef, useState} from 'react';
3215

3226
interface LiveClassProps {
@@ -341,7 +25,7 @@ const LiveClass: React.FC<LiveClassProps> = ({classId, userId}) => {
34125
const startWebSocket = () => {
34226
const ws = new WebSocket(
34327
// `ws://localhost:8080/?classId=${classId}&userId=${userId}`
344-
`ws://43.203.217.108:8080/?classId=${classId}&userId=${userId}`
28+
`ws://3.39.137.182:8080/?classId=${classId}&userId=${userId}`
34529
);
34630
wsRef.current = ws;
34731

@@ -419,12 +103,14 @@ const LiveClass: React.FC<LiveClassProps> = ({classId, userId}) => {
419103
],
420104
},
421105
{
422-
urls: 'turn:60.70.80.91:3478',
106+
urls: 'turn:3.39.137.182:3478',
423107
username: 'minori',
424108
credential: 'minoriwebrtc',
425109
},
426110
],
427111
});
112+
//code for creating PeerConnection in each browser
113+
428114
pcRef.current = pc;
429115

430116
pc.onicecandidate = event => {

0 commit comments

Comments
 (0)