-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcreate.html
More file actions
197 lines (194 loc) · 8.79 KB
/
create.html
File metadata and controls
197 lines (194 loc) · 8.79 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebRTC Caller</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&display=swap" rel="stylesheet">
<script src="/socket.io/socket.io.js"></script>
<script src="./js/util.js"></script>
<script src="./js/create.js"></script>
<link href="./css/create.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row" style="height: 100vh">
<div class="d-flex flex-column col-12 col-xxl-6 align-items-center" style="flex: 1; padding: 50px">
<div>
<h5>WebRTC Example (<span class="blue">Caller</span>)</h5>
</div>
<table>
<colgroup>
<col style="width: 180px">
<col style="width: 180px">
</colgroup>
<tbody id="status_table">
<tr>
<td>Signaling Server</td>
<td id="signalingStatus"></td>
</tr>
<tr>
<td>Current Room</td>
<td id="roomStatus"></td>
</tr>
<tr>
<td>Join Callee</td>
<td id="calleeStatus"></td>
</tr>
<tr>
<td>Local SDP</td>
<td id="localSDPStatus"></td>
</tr>
<tr>
<td>Remote SDP</td>
<td id="remoteSDPStatus"></td>
</tr>
<tr>
<td>Peer Connection</td>
<td id="peerConnStatus"></td>
</tr>
</tbody>
</table>
<div class="accordion" id="webrtcStepAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#stepOne" aria-expanded="true" aria-controls="stepOne" disabled>
#1 Connect Signaling Server
</button>
</h2>
<div id="stepOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#webrtcStepAccordion">
<div class="accordion-body">
<div class="stepDesc">
<p>피어 간 연결과정을 중계하는 시그널링 서버에 연결합니다.</p>
<p>현재 구동되고있는 node.js 서버의 최상단 주소로 연결합니다</p>
<div class="d-flex align-items-center mt-2">
<p style="margin: 0">URL : <span id="originStr"></span></p>
<button class="btn btn-success ms-3" id="serverConnectBtn">Connect</button>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#stepTwo" aria-expanded="false" aria-controls="stepTwo" disabled>
#2 Create Room
</button>
</h2>
<div id="stepTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#webrtcStepAccordion">
<div class="accordion-body">
<div class="stepDesc">
<p>socket.io의 room 기능을 이용합니다.</p>
<p>자세한 내용은 <a href="https://socket.io/docs/v3/rooms/" target="_blank">여기</a>를 참고해주세요.</p>
<p>영대문자와 숫자로 이루어진 5글자 문자열을 입력하고,</p>
<p><code>Create</code> 버튼을 눌러 방을 생성합니다.</p>
<p><code>R</code> 버튼을 누르면 무작위로 문자열을 생성합니다.</p>
<p>이 문자열은 <span class="red">Callee</span>가 방을 찾을때 필요합니다.</p>
</div>
<div class="d-flex mt-3">
<input class="form-control" type="text" id="roomCodeInput" maxlength="5">
<button class="btn btn-primary ms-3" id="randomStrBtn">R</button>
<button class="btn btn-success ms-3" id="roomCreateBtn">Create</button>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#stepThree" aria-expanded="false" aria-controls="stepThree" disabled>
#3 Wait Callee
</button>
</h2>
<div id="stepThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#webrtcStepAccordion">
<div class="accordion-body">
<div class="stepDesc">
<p><span class="red">Callee</span>가 <span id="roomGuide">Code</span> 에 입장하길 기다리고 있습니다...</p>
<p>(초록색글씨의 코드를 클릭하면 복사됩니다)<span class="badge rounded-pill text-bg-success" id="guideIndi">복사완료!</span></p>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#stepFour" aria-expanded="false" aria-controls="stepFour" disabled>
#4 Send Offer
</button>
</h2>
<div id="stepFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#webrtcStepAccordion">
<div class="accordion-body">
<div class="stepDesc">
<p><span class="red">Callee</span>가 방에 입장했습니다.</p>
<p><span class="red">Callee</span>에게 <code>Offer SDP</code>를 보내고,</p>
<p>자신의 SDP를 RTCPeerConnection 인스턴스의</p>
<p><code>Local SDP</code>로 설정합니다.</p>
<p>또한, 원격 장치와 통신을 하기 위해 요구되는 프로토콜과</p>
<p>라우팅정보를 담은 <code>ICE Candidate</code> 를 <span class="red">Callee</span>에게 보냅니다.</p>
<p class="mt-3 fw-bold">이 과정에서 카메라와 마이크가 켜집니다.</p>
<p class="fw-bold">만약 브라우저가 권한을 요청하면 허용해주세요.</p>
</div>
<button class="btn btn-success mt-3" id="sendOfferBtn">Send Offer</button>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFive">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#stepFive" aria-expanded="false" aria-controls="stepFive" disabled>
#5 Wait Answer
</button>
</h2>
<div id="stepFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#webrtcStepAccordion">
<div class="accordion-body">
<div class="stepDesc">
<p>Callee가 보내는 <code>Answer SDP</code>를 기다리는 중입니다.</p>
<p>Callee의 <code>Answer SDP</code>와 <code>ICE Candidate</code>를 수신하면</p>
<p>해당 데이터를 각각 RTCPeerConnection 인스턴스의</p>
<p><code>Remote SDP</code>와 <code>Candidate</code>로 설정합니다.</p>
<p>또한, 피어 간 연결을 수립하고 스트리밍을 시작합니다.</p>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingSix">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#stepSix" aria-expanded="false" aria-controls="stepSix" disabled>
🚩 FINISH
</button>
</h2>
<div id="stepSix" class="accordion-collapse collapse" aria-labelledby="headingSix" data-bs-parent="#webrtcStepAccordion">
<div class="accordion-body">
<div class="stepDesc">
<p>연결이 수립되어 스트리밍중입니다</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="d-flex flex-column align-items-center col-12 col-xxl-6" style="flex: 1; padding: 50px">
<div class="videoWrapper">
<div>
<p>LOCAL</p>
</div>
<div class="info">
<p id="localStreamVideoStr">None</p>
<p id="localStreamAudioStr">None</p>
</div>
<video id="localVideo" autoplay></video>
</div>
<div class="videoWrapper" style="margin-top: 25px">
<div>
<p>REMOTE</p>
</div>
<video id="remoteVideo" autoplay></video>
</div>
</div>
</div>
</div>
</body>
</html>