([]);
26 |
27 | const getLocalStream = useCallback(async () => {
28 | try {
29 | const localStream = await navigator.mediaDevices.getUserMedia({
30 | audio: true,
31 | video: {
32 | width: 240,
33 | height: 240,
34 | },
35 | });
36 | localStreamRef.current = localStream;
37 | if (localVideoRef.current) localVideoRef.current.srcObject = localStream;
38 | if (!socketRef.current) return;
39 | socketRef.current.emit('join_room', {
40 | room: '1234',
41 | email: 'sample@naver.com',
42 | });
43 | } catch (e) {
44 | console.log(`getUserMedia error: ${e}`);
45 | }
46 | }, []);
47 |
48 | const createPeerConnection = useCallback((socketID: string, email: string) => {
49 | try {
50 | const pc = new RTCPeerConnection(pc_config);
51 |
52 | pc.onicecandidate = (e) => {
53 | if (!(socketRef.current && e.candidate)) return;
54 | console.log('onicecandidate');
55 | socketRef.current.emit('candidate', {
56 | candidate: e.candidate,
57 | candidateSendID: socketRef.current.id,
58 | candidateReceiveID: socketID,
59 | });
60 | };
61 |
62 | pc.oniceconnectionstatechange = (e) => {
63 | console.log(e);
64 | };
65 |
66 | pc.ontrack = (e) => {
67 | console.log('ontrack success');
68 | setUsers((oldUsers) =>
69 | oldUsers
70 | .filter((user) => user.id !== socketID)
71 | .concat({
72 | id: socketID,
73 | email,
74 | stream: e.streams[0],
75 | }),
76 | );
77 | };
78 |
79 | if (localStreamRef.current) {
80 | console.log('localstream add');
81 | localStreamRef.current.getTracks().forEach((track) => {
82 | if (!localStreamRef.current) return;
83 | pc.addTrack(track, localStreamRef.current);
84 | });
85 | } else {
86 | console.log('no local stream');
87 | }
88 |
89 | return pc;
90 | } catch (e) {
91 | console.error(e);
92 | return undefined;
93 | }
94 | }, []);
95 |
96 | useEffect(() => {
97 | socketRef.current = io.connect(SOCKET_SERVER_URL);
98 | getLocalStream();
99 |
100 | socketRef.current.on('all_users', (allUsers: Array<{ id: string; email: string }>) => {
101 | allUsers.forEach(async (user) => {
102 | if (!localStreamRef.current) return;
103 | const pc = createPeerConnection(user.id, user.email);
104 | if (!(pc && socketRef.current)) return;
105 | pcsRef.current = { ...pcsRef.current, [user.id]: pc };
106 | try {
107 | const localSdp = await pc.createOffer({
108 | offerToReceiveAudio: true,
109 | offerToReceiveVideo: true,
110 | });
111 | console.log('create offer success');
112 | await pc.setLocalDescription(new RTCSessionDescription(localSdp));
113 | socketRef.current.emit('offer', {
114 | sdp: localSdp,
115 | offerSendID: socketRef.current.id,
116 | offerSendEmail: 'offerSendSample@sample.com',
117 | offerReceiveID: user.id,
118 | });
119 | } catch (e) {
120 | console.error(e);
121 | }
122 | });
123 | });
124 |
125 | socketRef.current.on(
126 | 'getOffer',
127 | async (data: {
128 | sdp: RTCSessionDescription;
129 | offerSendID: string;
130 | offerSendEmail: string;
131 | }) => {
132 | const { sdp, offerSendID, offerSendEmail } = data;
133 | console.log('get offer');
134 | if (!localStreamRef.current) return;
135 | const pc = createPeerConnection(offerSendID, offerSendEmail);
136 | if (!(pc && socketRef.current)) return;
137 | pcsRef.current = { ...pcsRef.current, [offerSendID]: pc };
138 | try {
139 | await pc.setRemoteDescription(new RTCSessionDescription(sdp));
140 | console.log('answer set remote description success');
141 | const localSdp = await pc.createAnswer({
142 | offerToReceiveVideo: true,
143 | offerToReceiveAudio: true,
144 | });
145 | await pc.setLocalDescription(new RTCSessionDescription(localSdp));
146 | socketRef.current.emit('answer', {
147 | sdp: localSdp,
148 | answerSendID: socketRef.current.id,
149 | answerReceiveID: offerSendID,
150 | });
151 | } catch (e) {
152 | console.error(e);
153 | }
154 | },
155 | );
156 |
157 | socketRef.current.on(
158 | 'getAnswer',
159 | (data: { sdp: RTCSessionDescription; answerSendID: string }) => {
160 | const { sdp, answerSendID } = data;
161 | console.log('get answer');
162 | const pc: RTCPeerConnection = pcsRef.current[answerSendID];
163 | if (!pc) return;
164 | pc.setRemoteDescription(new RTCSessionDescription(sdp));
165 | },
166 | );
167 |
168 | socketRef.current.on(
169 | 'getCandidate',
170 | async (data: { candidate: RTCIceCandidateInit; candidateSendID: string }) => {
171 | console.log('get candidate');
172 | const pc: RTCPeerConnection = pcsRef.current[data.candidateSendID];
173 | if (!pc) return;
174 | await pc.addIceCandidate(new RTCIceCandidate(data.candidate));
175 | console.log('candidate add success');
176 | },
177 | );
178 |
179 | socketRef.current.on('user_exit', (data: { id: string }) => {
180 | if (!pcsRef.current[data.id]) return;
181 | pcsRef.current[data.id].close();
182 | delete pcsRef.current[data.id];
183 | setUsers((oldUsers) => oldUsers.filter((user) => user.id !== data.id));
184 | });
185 |
186 | return () => {
187 | if (socketRef.current) {
188 | socketRef.current.disconnect();
189 | }
190 | users.forEach((user) => {
191 | if (!pcsRef.current[user.id]) return;
192 | pcsRef.current[user.id].close();
193 | delete pcsRef.current[user.id];
194 | });
195 | };
196 | // eslint-disable-next-line react-hooks/exhaustive-deps
197 | }, [createPeerConnection, getLocalStream]);
198 |
199 | return (
200 |
201 |
212 | {users.map((user, index) => (
213 |
214 | ))}
215 |
216 | );
217 | };
218 |
219 | export default App;
220 |
--------------------------------------------------------------------------------
/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: 270px;
9 | margin: 5px;
10 | `;
11 |
12 | const VideoContainer = styled.video`
13 | width: 240px;
14 | height: 240px;
15 | background-color: black;
16 | `;
17 |
18 | const UserLabel = styled.p`
19 | display: inline-block;
20 | position: absolute;
21 | top: 230px;
22 | left: 0px;
23 | `;
24 |
25 | interface Props {
26 | email: string;
27 | stream: MediaStream;
28 | muted?: boolean;
29 | }
30 |
31 | const Video = ({ email, stream, muted }: Props) => {
32 | const ref = useRef(null);
33 | const [isMuted, setIsMuted] = useState(false);
34 |
35 | useEffect(() => {
36 | if (ref.current) ref.current.srcObject = stream;
37 | if (muted) setIsMuted(muted);
38 | }, [stream, muted]);
39 |
40 | return (
41 |
42 |
43 | {email}
44 |
45 | );
46 | };
47 |
48 | export default Video;
49 |
--------------------------------------------------------------------------------
/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 | email: string;
4 | stream: MediaStream;
5 | };
6 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------