Skip to content

Commit c14434b

Browse files
yuminn-kyuminn-k
authored
Merge pull request YJU-OKURA#162 from Regulus0811/main
不要なコメントを削除し、TURNサーバーのコードを追加
2 parents 0abb4a9 + 4e16261 commit c14434b

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)