(null);
28 |
29 | const closeReceivePC = useCallback((id: string) => {
30 | if (!receivePCsRef.current[id]) return;
31 | receivePCsRef.current[id].close();
32 | delete receivePCsRef.current[id];
33 | }, []);
34 |
35 | const createReceiverOffer = useCallback(
36 | async (pc: RTCPeerConnection, senderSocketID: string) => {
37 | try {
38 | const sdp = await pc.createOffer({
39 | offerToReceiveAudio: true,
40 | offerToReceiveVideo: true,
41 | });
42 | console.log("create receiver offer success");
43 | await pc.setLocalDescription(new RTCSessionDescription(sdp));
44 |
45 | if (!socketRef.current) return;
46 | socketRef.current.emit("receiverOffer", {
47 | sdp,
48 | receiverSocketID: socketRef.current.id,
49 | senderSocketID,
50 | roomID: "1234",
51 | });
52 | } catch (error) {
53 | console.log(error);
54 | }
55 | },
56 | []
57 | );
58 |
59 | const createReceiverPeerConnection = useCallback((socketID: string) => {
60 | try {
61 | const pc = new RTCPeerConnection(pc_config);
62 |
63 | // add pc to peerConnections object
64 | receivePCsRef.current = { ...receivePCsRef.current, [socketID]: pc };
65 |
66 | pc.onicecandidate = (e) => {
67 | if (!(e.candidate && socketRef.current)) return;
68 | console.log("receiver PC onicecandidate");
69 | socketRef.current.emit("receiverCandidate", {
70 | candidate: e.candidate,
71 | receiverSocketID: socketRef.current.id,
72 | senderSocketID: socketID,
73 | });
74 | };
75 |
76 | pc.oniceconnectionstatechange = (e) => {
77 | console.log(e);
78 | };
79 |
80 | pc.ontrack = (e) => {
81 | console.log("ontrack success");
82 | setUsers((oldUsers) =>
83 | oldUsers
84 | .filter((user) => user.id !== socketID)
85 | .concat({
86 | id: socketID,
87 | stream: e.streams[0],
88 | })
89 | );
90 | };
91 |
92 | // return pc
93 | return pc;
94 | } catch (e) {
95 | console.error(e);
96 | return undefined;
97 | }
98 | }, []);
99 |
100 | const createReceivePC = useCallback(
101 | (id: string) => {
102 | try {
103 | console.log(`socketID(${id}) user entered`);
104 | const pc = createReceiverPeerConnection(id);
105 | if (!(socketRef.current && pc)) return;
106 | createReceiverOffer(pc, id);
107 | } catch (error) {
108 | console.log(error);
109 | }
110 | },
111 | [createReceiverOffer, createReceiverPeerConnection]
112 | );
113 |
114 | const createSenderOffer = useCallback(async () => {
115 | try {
116 | if (!sendPCRef.current) return;
117 | const sdp = await sendPCRef.current.createOffer({
118 | offerToReceiveAudio: false,
119 | offerToReceiveVideo: false,
120 | });
121 | console.log("create sender offer success");
122 | await sendPCRef.current.setLocalDescription(
123 | new RTCSessionDescription(sdp)
124 | );
125 |
126 | if (!socketRef.current) return;
127 | socketRef.current.emit("senderOffer", {
128 | sdp,
129 | senderSocketID: socketRef.current.id,
130 | roomID: "1234",
131 | });
132 | } catch (error) {
133 | console.log(error);
134 | }
135 | }, []);
136 |
137 | const createSenderPeerConnection = useCallback(() => {
138 | const pc = new RTCPeerConnection(pc_config);
139 |
140 | pc.onicecandidate = (e) => {
141 | if (!(e.candidate && socketRef.current)) return;
142 | console.log("sender PC onicecandidate");
143 | socketRef.current.emit("senderCandidate", {
144 | candidate: e.candidate,
145 | senderSocketID: socketRef.current.id,
146 | });
147 | };
148 |
149 | pc.oniceconnectionstatechange = (e) => {
150 | console.log(e);
151 | };
152 |
153 | if (localStreamRef.current) {
154 | console.log("add local stream");
155 | localStreamRef.current.getTracks().forEach((track) => {
156 | if (!localStreamRef.current) return;
157 | pc.addTrack(track, localStreamRef.current);
158 | });
159 | } else {
160 | console.log("no local stream");
161 | }
162 |
163 | sendPCRef.current = pc;
164 | }, []);
165 |
166 | const getLocalStream = useCallback(async () => {
167 | try {
168 | const stream = await navigator.mediaDevices.getUserMedia({
169 | audio: true,
170 | video: {
171 | width: 240,
172 | height: 240,
173 | },
174 | });
175 | localStreamRef.current = stream;
176 | if (localVideoRef.current) localVideoRef.current.srcObject = stream;
177 | if (!socketRef.current) return;
178 |
179 | createSenderPeerConnection();
180 | await createSenderOffer();
181 |
182 | socketRef.current.emit("joinRoom", {
183 | id: socketRef.current.id,
184 | roomID: "1234",
185 | });
186 | } catch (e) {
187 | console.log(`getUserMedia error: ${e}`);
188 | }
189 | }, [createSenderOffer, createSenderPeerConnection]);
190 |
191 | useEffect(() => {
192 | socketRef.current = io.connect(SOCKET_SERVER_URL);
193 | getLocalStream();
194 |
195 | socketRef.current.on("userEnter", (data: { id: string }) => {
196 | createReceivePC(data.id);
197 | });
198 |
199 | socketRef.current.on(
200 | "allUsers",
201 | (data: { users: Array<{ id: string }> }) => {
202 | data.users.forEach((user) => createReceivePC(user.id));
203 | }
204 | );
205 |
206 | socketRef.current.on("userExit", (data: { id: string }) => {
207 | closeReceivePC(data.id);
208 | setUsers((users) => users.filter((user) => user.id !== data.id));
209 | });
210 |
211 | socketRef.current.on(
212 | "getSenderAnswer",
213 | async (data: { sdp: RTCSessionDescription }) => {
214 | try {
215 | if (!sendPCRef.current) return;
216 | console.log("get sender answer");
217 | console.log(data.sdp);
218 | await sendPCRef.current.setRemoteDescription(
219 | new RTCSessionDescription(data.sdp)
220 | );
221 | } catch (error) {
222 | console.log(error);
223 | }
224 | }
225 | );
226 |
227 | socketRef.current.on(
228 | "getSenderCandidate",
229 | async (data: { candidate: RTCIceCandidateInit }) => {
230 | try {
231 | if (!(data.candidate && sendPCRef.current)) return;
232 | console.log("get sender candidate");
233 | await sendPCRef.current.addIceCandidate(
234 | new RTCIceCandidate(data.candidate)
235 | );
236 | console.log("candidate add success");
237 | } catch (error) {
238 | console.log(error);
239 | }
240 | }
241 | );
242 |
243 | socketRef.current.on(
244 | "getReceiverAnswer",
245 | async (data: { id: string; sdp: RTCSessionDescription }) => {
246 | try {
247 | console.log(`get socketID(${data.id})'s answer`);
248 | const pc: RTCPeerConnection = receivePCsRef.current[data.id];
249 | if (!pc) return;
250 | await pc.setRemoteDescription(data.sdp);
251 | console.log(`socketID(${data.id})'s set remote sdp success`);
252 | } catch (error) {
253 | console.log(error);
254 | }
255 | }
256 | );
257 |
258 | socketRef.current.on(
259 | "getReceiverCandidate",
260 | async (data: { id: string; candidate: RTCIceCandidateInit }) => {
261 | try {
262 | console.log(data);
263 | console.log(`get socketID(${data.id})'s candidate`);
264 | const pc: RTCPeerConnection = receivePCsRef.current[data.id];
265 | if (!(pc && data.candidate)) return;
266 | await pc.addIceCandidate(new RTCIceCandidate(data.candidate));
267 | console.log(`socketID(${data.id})'s candidate add success`);
268 | } catch (error) {
269 | console.log(error);
270 | }
271 | }
272 | );
273 |
274 | return () => {
275 | if (socketRef.current) {
276 | socketRef.current.disconnect();
277 | }
278 | if (sendPCRef.current) {
279 | sendPCRef.current.close();
280 | }
281 | users.forEach((user) => closeReceivePC(user.id));
282 | };
283 | // eslint-disable-next-line
284 | }, [
285 | closeReceivePC,
286 | createReceivePC,
287 | createSenderOffer,
288 | createSenderPeerConnection,
289 | getLocalStream,
290 | ]);
291 |
292 | return (
293 |
294 |
305 | {users.map((user, index) => (
306 |
307 | ))}
308 |
309 | );
310 | };
311 |
312 | export default App;
313 |
--------------------------------------------------------------------------------
/web/src/Components/Video/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef, useState } from "react";
2 | import Styled from "styled-components";
3 |
4 | const Container = Styled.div`
5 | position: relative;
6 | display: inline-block;
7 | width: 240px;
8 | height: 240px;
9 | margin: 5px;
10 | `;
11 |
12 | const VideoContainer = Styled.video`
13 | width: 240px;
14 | height: 240px;
15 | background-color: black;
16 | `;
17 |
18 | interface Props {
19 | stream: MediaStream;
20 | muted?: boolean;
21 | }
22 |
23 | const Video = ({ stream, muted }: Props) => {
24 | const ref = useRef(null);
25 | const [isMuted, setIsMuted] = useState(false);
26 |
27 | useEffect(() => {
28 | if (ref.current) ref.current.srcObject = stream;
29 | if (muted) setIsMuted(muted);
30 | }, [stream, muted]);
31 |
32 | return (
33 |
34 |
35 |
36 | );
37 | };
38 |
39 | export default Video;
40 |
--------------------------------------------------------------------------------
/web/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/web/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 |
6 | ReactDOM.render(
7 |
8 |
9 | ,
10 | document.getElementById('root')
11 | );
12 |
13 | // If you want to start measuring performance in your app, pass a function
14 | // to log results (for example: reportWebVitals(console.log))
15 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
16 |
--------------------------------------------------------------------------------
/web/src/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/web/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/web/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------
/web/src/types/index.ts:
--------------------------------------------------------------------------------
1 | export type WebRTCUser = {
2 | id: string;
3 | stream: MediaStream;
4 | };
5 |
--------------------------------------------------------------------------------
/web/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "allowSyntheticDefaultImports": true,
13 | "strict": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "module": "esnext",
16 | "moduleResolution": "node",
17 | "resolveJsonModule": true,
18 | "isolatedModules": true,
19 | "noEmit": true,
20 | "jsx": "react",
21 | "baseUrl": "./src"
22 | },
23 | "include": [
24 | "src"
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------