-
Notifications
You must be signed in to change notification settings - Fork 22
/
Copy pathindex.html
469 lines (439 loc) · 26.1 KB
/
index.html
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
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="https://videosdk.live/favicon/favicon.ico" />
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<title>JS-SDK | videosdk.live</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<title>JS-SDK | videosdk.live</title>
<style>
#screenShare {
/* margin-top: 20px; */
width: 80%;
}
audio {
display: none;
}
</style>
</head>
<body>
<!--join page container start-->
<div id="joinPage" class="main-bg" style="display: flex; margin-left: 15px">
<div style="margin: auto; display: flex; width: 80%;">
<!--join screen left grid start-->
<div class="join-left" style="
margin-right: 30px;
margin-left: 42px;
align-items: center; justify-content: center;
">
<div class="video-view">
<div id="network-stats" style="display: flex;">
<div id="download-speed-div" style="display: none;">
<i class="bi bi-arrow-down-short"></i>
<div id="download-speed">Download</div>
</div>
<div id="upload-speed-div" style="display: none;">
<i class="bi bi-arrow-up-short"></i>
<div id="upload-speed">Upload</div>
</div>
<div id="check-speed-div" style="margin-bottom: 3px; align-self: center; padding: 0 7px;">
Checking network speed..
</div>
<div id="refresh" class="spin">
<i class="bi bi-arrow-repeat" style="color: white; font-size: 16px;" id="refersh-network"></i>
</div>
</div>
<div id="network-error-offline">
<div id="network-error-div" style="display: flex; color: red; text-align: center;">
<i class="bi bi-wifi-off"
style="margin-right: 6px; font-size: 14px; margin-left: 3px; padding-top: 1px;"></i>
<div style="font-size: 13px; margin-right: 5px;">Yor're offline! Can't connect to servers</div>
</div>
<div class="network-error-refresh">
<i class="bi bi-arrow-repeat" style="color: white; font-size: 16px;" id="refersh-network"></i>
</div>
</div>
<div id="network-error-online">
<div id="network-error-div" style="display: flex; color: red; text-align: center;">
<i class="bi bi-wifi-off"
style="margin-right: 6px; font-size: 14px; margin-left: 3px; padding-top: 1px;"></i>
<div style="font-size: 13px; margin-right: 5px;">Something went wrong! Couldn't load data</div>
</div>
<div class="network-error-refresh">
<i class="bi bi-arrow-repeat" style="color: white; font-size: 16px;" id="refersh-network"></i>
</div>
</div>
<p id="camera-status"
style="color: white; z-index: 1; position:absolute; margin-top: 25%; margin-left: 40%; font-size: 18px;">
Your Camera is off</p>
<video class="video" id="joinCam" style="
position: absolute;
width: 100%;
height: 100%;
border-radius: 10px;
transform: rotate('90');
object-fit: cover;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
0 6px 6px rgba(0, 0, 0, 0.23);
"></video>
<div class="input-group mb-3 video-content">
<div id="no-microphone-permission" style="display: none;">
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_20_1262)">
<rect x="4" y="4" width="48" height="48" rx="24" fill="#FF5D5D" />
</g>
<g filter="url(#filter1_d_20_1262)">
<circle cx="44" cy="12" r="8" fill="#FF8A00" />
</g>
<path
d="M44.876 8.258V11.69C44.876 12.058 44.854 12.424 44.81 12.788C44.766 13.148 44.708 13.516 44.636 13.892H43.376C43.304 13.516 43.246 13.148 43.202 12.788C43.158 12.424 43.136 12.058 43.136 11.69V8.258H44.876ZM42.932 16.058C42.932 15.914 42.958 15.78 43.01 15.656C43.066 15.532 43.14 15.424 43.232 15.332C43.328 15.24 43.44 15.168 43.568 15.116C43.696 15.06 43.836 15.032 43.988 15.032C44.136 15.032 44.274 15.06 44.402 15.116C44.53 15.168 44.642 15.24 44.738 15.332C44.834 15.424 44.908 15.532 44.96 15.656C45.016 15.78 45.044 15.914 45.044 16.058C45.044 16.202 45.016 16.338 44.96 16.466C44.908 16.59 44.834 16.698 44.738 16.79C44.642 16.882 44.53 16.954 44.402 17.006C44.274 17.058 44.136 17.084 43.988 17.084C43.836 17.084 43.696 17.058 43.568 17.006C43.44 16.954 43.328 16.882 43.232 16.79C43.14 16.698 43.066 16.59 43.01 16.466C42.958 16.338 42.932 16.202 42.932 16.058Z"
fill="white" />
<path
d="M35.6414 27.4364H33.8959C33.8999 28.1614 33.7475 28.8788 33.4491 29.5396L34.7141 30.8014C35.3179 29.7826 35.6381 28.6207 35.6414 27.4364ZM31.5191 27.6055C31.5191 27.5491 31.5346 27.4928 31.5346 27.4364V21.2814C31.5346 20.4645 31.2101 19.6811 30.6325 19.1035C30.0548 18.5259 29.2714 18.2014 28.4546 18.2014C27.6377 18.2014 26.8543 18.5259 26.2767 19.1035C25.6991 19.6811 25.3746 20.4645 25.3746 21.2814V21.4714L31.5191 27.6055ZM20.5232 19.2296L19.2141 20.5373L25.3846 26.7037V27.4423C25.3839 27.846 25.4628 28.2459 25.6168 28.6191C25.7707 28.9923 25.9967 29.3315 26.2818 29.6173C26.5669 29.9032 26.9056 30.13 27.2784 30.2849C27.6512 30.4398 28.0509 30.5197 28.4546 30.5201C28.6791 30.5182 28.9028 30.4924 29.1218 30.4432L30.8264 32.146C30.0833 32.4916 29.2741 32.6718 28.4546 32.6741C25.6209 32.6741 23.0132 30.5201 23.0132 27.4423H21.2677C21.2677 30.9455 24.0605 33.8387 27.4277 34.336V37.6955H29.4809V34.3319C30.4015 34.1921 31.2868 33.877 32.0887 33.4037L36.3855 37.6969L37.6946 36.3941L20.5232 19.2296Z"
fill="white" />
<defs>
<filter id="filter0_d_20_1262" x="0" y="0" width="56" height="56" filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha" />
<feOffset />
<feGaussianBlur stdDeviation="2" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_20_1262" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_20_1262" result="shape" />
</filter>
<filter id="filter1_d_20_1262" x="34" y="4" width="20" height="20" filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="1" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_20_1262" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_20_1262" result="shape" />
</filter>
</defs>
</svg>
</div>
<button style="
border-radius: 50%;
height: 49px;
width: 49px;
background-color: #FF5D5D;
border: 0;
margin-top: 5px;
outline: none;
" id="micButton" onclick="toggleMic()">
<i class="bi bi-mic-mute-fill" style="color: white; " id="muteMic"></i>
<i class="bi bi-mic-fill" style="color: black; display: none" id="unmuteMic"></i>
</button>
<button
style="border-radius: 50%; height: 49px; width: 49px; background-color: #FF5D5D; border: 0; margin-left: 20px; outline: none; margin-top: 5px;"
id="camButton" onclick="toggleWebCam()">
<i class="bi bi-camera-video-fill" style="color: black; ;display: none" id="onCamera"></i>
<i class="bi bi-camera-video-off-fill" style="color: white;" id="offCamera"></i>
</button>
<div id="no-camera-permission" style="display: none; margin-top: 2px; margin-left: 14px;">
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_20_1271)">
<rect x="4" y="4" width="48" height="48" rx="24" fill="#FF5D5D"/>
</g>
<g filter="url(#filter1_d_20_1271)">
<circle cx="44" cy="12" r="8" fill="#FF8A00"/>
</g>
<path d="M44.876 8.258V11.69C44.876 12.058 44.854 12.424 44.81 12.788C44.766 13.148 44.708 13.516 44.636 13.892H43.376C43.304 13.516 43.246 13.148 43.202 12.788C43.158 12.424 43.136 12.058 43.136 11.69V8.258H44.876ZM42.932 16.058C42.932 15.914 42.958 15.78 43.01 15.656C43.066 15.532 43.14 15.424 43.232 15.332C43.328 15.24 43.44 15.168 43.568 15.116C43.696 15.06 43.836 15.032 43.988 15.032C44.136 15.032 44.274 15.06 44.402 15.116C44.53 15.168 44.642 15.24 44.738 15.332C44.834 15.424 44.908 15.532 44.96 15.656C45.016 15.78 45.044 15.914 45.044 16.058C45.044 16.202 45.016 16.338 44.96 16.466C44.908 16.59 44.834 16.698 44.738 16.79C44.642 16.882 44.53 16.954 44.402 17.006C44.274 17.058 44.136 17.084 43.988 17.084C43.836 17.084 43.696 17.058 43.568 17.006C43.44 16.954 43.328 16.882 43.232 16.79C43.14 16.698 43.066 16.59 43.01 16.466C42.958 16.338 42.932 16.202 42.932 16.058Z" fill="white"/>
<g clip-path="url(#clip0_20_1271)">
<path d="M37.5011 32.9089C37.6562 32.812 37.7833 32.6786 37.8708 32.5211C37.9582 32.3636 38.0031 32.1872 38.0011 32.0083V24.0083C37.9911 23.8318 37.9411 23.6596 37.8547 23.5039C37.7683 23.3483 37.6475 23.213 37.5011 23.1077C37.3539 23.0099 37.1796 22.9576 37.0011 22.9576C36.8227 22.9576 36.6484 23.0099 36.5011 23.1077L33.0011 24.9089C32.9752 24.1453 32.6508 23.4199 32.0937 22.8797C31.5366 22.3395 30.7885 22.0249 30.0011 21.9998H26.3011L37.3011 33.0059C37.2999 32.9089 37.3999 32.9089 37.5011 32.9089ZM37.7011 36.3101L32.9011 31.5077L23.4011 21.9998L19.7011 18.3004C19.6124 18.2059 19.5044 18.1303 19.3838 18.0786C19.2633 18.0269 19.1329 18.0002 19.0011 18.0002C18.8693 18.0002 18.739 18.0269 18.6184 18.0786C18.4979 18.1303 18.3898 18.2059 18.3011 18.3004C18.206 18.3923 18.1306 18.5015 18.0791 18.6217C18.0276 18.7419 18.0011 18.8708 18.0011 19.001C18.0011 19.1312 18.0276 19.2601 18.0791 19.3803C18.1306 19.5005 18.206 19.6097 18.3011 19.7016L20.6011 21.9998C19.8674 22.113 19.2004 22.4791 18.7228 23.0309C18.2451 23.5827 17.9889 24.2831 18.0011 25.0034V31.0059C17.9929 31.3997 18.0649 31.7913 18.2129 32.1582C18.3609 32.5251 18.582 32.8601 18.8636 33.144C19.1396 33.4226 19.4719 33.643 19.8396 33.7915C20.2074 33.94 20.6028 34.0134 21.0011 34.0071H30.0011C30.3502 34.0204 30.6984 33.9653 31.0249 33.8449C31.3514 33.7245 31.6494 33.5414 31.9011 33.3065L36.3011 37.7089C36.3916 37.8006 36.5002 37.8735 36.6205 37.9234C36.7408 37.9732 36.8703 37.9989 37.0011 37.9989C37.1319 37.9989 37.2614 37.9732 37.3817 37.9234C37.502 37.8735 37.6107 37.8006 37.7011 37.7089C37.8872 37.5203 37.9911 37.2693 37.9911 37.0083C37.9911 36.7473 37.8872 36.4963 37.7011 36.3077V36.3101Z" fill="white"/>
</g>
<defs>
<filter id="filter0_d_20_1271" x="0" y="0" width="56" height="56" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_20_1271"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_20_1271" result="shape"/>
</filter>
<filter id="filter1_d_20_1271" x="34" y="4" width="20" height="20" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_20_1271"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_20_1271" result="shape"/>
</filter>
<clipPath id="clip0_20_1271">
<rect width="20" height="20" fill="white" transform="translate(18 18)"/>
</clipPath>
</defs>
</svg>
</div>
</div>
</div>
<div style="margin-top: 12px;display: flex; gap: 10px; ">
<div class="btn-group dropup">
<button id="select-microphone" class="btn btn-secondary dropdown-toggle media-permission"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-mic" style="font-size: 14px;"></i>
MicroPhone
</button>
<ul class="dropdown-menu" id="microphoneDeviceDropDown">
<!-- Dropdown menu links -->
</ul>
</div>
<div class="btn-group dropup">
<button id="select-speaker" type="button" class="btn btn-secondary dropdown-toggle media-permission"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-volume-up" style="font-size: 17px;"></i>
Speaker
</button>
<ul class="dropdown-menu" id="playBackDeviceDropDown">
<!-- Dropdown menu links -->
</ul>
</div>
<div class="btn-group dropup">
<button id="select-camera" class="btn btn-secondary dropdown-toggle media-permission"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-camera-video" style="font-size: 16px;"></i>
Camera
</button>
<ul class="dropdown-menu" id="cameraDeviceDropDown">
<!-- Dropdown menu links -->
</ul>
</div>
<!-- <div>
<label style="color: white;">Speakers</label>
<select style="column-span: 3;" class="select-class" id="playBackDeviceDropDown"></select>
</div>
<div>
<label style="color: white;">Camera</label>
<select style="column-span: 3;" class="select-class" id="cameraDeviceDropDown"
onchange="enableCam()"></select>
</div> -->
</div>
</div>
<!--join screen right grid start-->
<div class="join-right"
style="margin-left:48px; margin-bottom: 55px; width: 600px; display: flex; align-items: center; justify-content: center; flex-direction: column;">
<!-- <div class="flex"> -->
<div class="flex-container col-auto">
<center>
<button class="btn btn-primary join-btn"
style="border-radius: 10px; padding: 10px 120px; background-color: #5A6BFF; border: none; outline: none;"
id="meetingJoinButton" onclick="joinMeeting(true)">
Create a Meeting
</button>
</center>
</div>
<!-- <div class="flex-container">
<center>
<br />
<center style="color: grey">OR</center>
</center>
</div> -->
<div class="flex-container col-auto join-meeting-input">
<center>
<input type="text" class="form-control" id="joinMeetingId" placeholder="Enter Meeting Code" />
</center>
</div>
<div class="flex-container col-auto join-meeting-input">
<center>
<input type="text" class="form-control" id="name" placeholder="Enter Your Name" />
</center>
</div>
<div class="flex-container col-auto join-meeting-input">
<center>
<button class="btn btn-primary inner-join-button"
style="border-radius: 10px; padding: 10px 130px; background-color: rgb(28, 28, 28); border: 0.1px solid rgb(122, 122, 122) ; outline: none; margin-top: 15px;"
id="meetingJoinButton" onclick="joinMeeting(false)">
Join a Meeting
</button>
</center>
</div>
<div class="flex-container col-auto join-btn">
<center>
<button class="btn btn-primary"
style="border-radius: 10px; padding: 10px 130px; background-color: rgb(28, 28, 28); border: 0.1px solid rgb(122, 122, 122); outline: none; margin-top: 15px;"
id="meetingJoinButton" onclick="showInputFields()">
Join a Meeting
</button>
</center>
</div>
<!-- <div class="flex-container" style="margin-top: 25px;">
<center>
<div class="col-auto" style="width: 500px; margin-left: 70px">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text" style="
background-color: #212032;
padding: 12px;
margin-top: -15px;
">
<img src="./assets/icons/svg-path.svg" height="25px" width="25px" />
</div>
</div>
<input type="text" class="form-control" id="joinMeetingId" placeholder="Enter Meeting Code" />
<div class="input-group-append">
<button class="btn btn-primary" style="
border-radius: 5px;
margin-left: 7px;
margin-top: -5px;
height: 50px;
height: 40px;
" id="meetingJoinButton" onclick="joinMeeting(false)">
Join Meeting
</button>
</div>
</div>
</div>
</center>
</div> -->
<!-- </div> -->
</div>
<!--join screen right grid end-->
</div>
</div>
<div class="grid-page flex-container" id="gridPpage" style="display: none; position: relative">
<div class="row" style="height: 70px; width: 100%; border-bottom: 1px solid grey">
<div class="col-3 d-flex justify-content-start" style="margin-top: 19px">
<input type="text" style="background-color: #212032" class="form-control navbar-brand" id="meetingid"
readonly />
<button id="btnCopy" type="button" class="btn btn-outline-light" style="height: fit-content; position: relative"
onclick="copyMeetingCode()">
<span class="material-icons"> content_copy </span>
<div class="copyContent">Copy Meeting Code</div>
</button>
</div>
<div class="col-9" style="margin-top: 13px; position: static; align-content: right">
<div class="d-flex justify-content-end">
<button type="button" id="btnStartRecording" class="btn btn-outline-light">
<span class="material-icons"> radio_button_checked </span>
</button>
<button type="button" style="display: none" id="btnStopRecording" class="btn btn-light">
<span class="material-icons"> radio_button_checked </span>
</button>
<button type="button" id="btnRaiseHand" class="btn btn-outline-light ms-1">
<span class="material-icons"> front_hand </span>
</button>
<span class="vertical-line"></span>
<!-- main page toggle mic-->
<div class="btn-group" id="main-pg-mute-mic" style="display: inline-block">
<button type="button" class="btn btn-outline-light dropdown-toggle ms-1" aria-haspopup="true"
aria-expanded="false">
<span class="material-icons"> mic_off </span>
</button>
</div>
<div class="btn-group" id="main-pg-unmute-mic" style="display: none">
<button type="button" class="btn btn-outline-light ms-1" aria-haspopup="true" aria-expanded="false">
<span class="material-icons"> mic </span>
</button>
</div>
<!--main page toggle web-cam-->
<div class="btn-group" id="main-pg-cam-off" style="display: inline-block">
<button type="button" class="btn btn-outline-light ms-1" aria-haspopup="true" aria-expanded="false">
<span class="material-icons"> videocam_off</span>
</button>
</div>
<div class="btn-group" id="main-pg-cam-on" style="display: none">
<button type="button" class="btn btn-outline-light ms-1" aria-haspopup="true" aria-expanded="false"
id="videoCamOn">
<span class="material-icons"> videocam </span>
</button>
</div>
<!--screen share-->
<button type="button" id="btnScreenShare" class="btn btn-outline-light ms-1">
<span class="material-icons"> screen_share </span>
</button>
<span class="vertical-line"></span>
<!--participants-->
<button type="button" class="btn btn-outline-light ms-1" onclick="openParticipantWrapper()">
<span class="material-icons"> people </span>
</button>
<!--chat-->
<button type="button" class="btn btn-outline-light ms-1" onclick="openChatWrapper()">
<span class="material-icons"> chat </span>
</button>
<span class="vertical-line"></span>
<!--call end-->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle ms-1" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<span class="material-icons"> call_end </span>
</button>
<div class="dropdown-menu" style="
background-color: #212032;
color: white;
margin-left: -80px;
">
<a class="dropdown-item" id="endCall">End Call</a>
<a class="dropdown-item" id="leaveCall">Leave Meeting</a>
</div>
</div>
</div>
</div>
</div>
<video id="videoScreenShare"></video>
<div class="row" id="videoContainer"></div>
</div>
<!--raise hand pop-up-->
<div id="contentRaiseHand" class="alert alert-info col-2" style="
left: 10;
bottom: 0;
position: absolute;
height: 60px;
display: none;
" role="alert"></div>
<!--participant wrapper-->
<div class="participant-wrapper" id="participants">
<div class="participant-wrapper-header text-light">
<span class="closebtn" id="ParticipantsCloseBtn" onclick="closeParticipantWrapper()">×</span>
<h5 id="totalParticipants"></h5>
</div>
<hr class="border-light rounded 3" />
<div id="participantsList" class="participant-wrapper-content text-light"></div>
</div>
<!--chat wrapper-->
<div class="chat-wrapper" id="chatModule">
<div class="chat-wrapper-header text-light">
<span class="closebtn" id="chatCloseBtn" onclick="closeChatWrapper()">×</span>
<h5 id="chatHeading">Let's Chat!</h5>
</div>
<hr class="border-light rounded 3" />
<div id="chatArea" class="chat-wrapper-content text-light" style="overflow-y: scroll"></div>
<div class="message-box input-group mb-2">
<input type="text" id="txtChat"="form-control" placeholder="Message..." />
<div id="btnSend" class="input-group-append">
<button class="btn btn-primary">Send</button>
</div>
</div>
</div>
<script src="index.js" defer></script>
<script src="https://sdk.videosdk.live/js-sdk/0.0.82/videosdk.js"></script>
<script src="config.js" defer></script>
</body>
<div id="viewer"></div>
</html>