This repository has been archived by the owner on Aug 30, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
419 lines (388 loc) · 28.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Dolby.io Web SDK Sample Application</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.0/css/bootstrap.min.css"
integrity="sha512-P5MgMn1jBN01asBgU0z60Qk4QxiXo86+wlFahKrsQf37c9cro517WzVSPPV1tDKzhku2iJ2FVgL67wG03SGnNA=="
crossorigin="anonymous"
referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer" />
<link rel="stylesheet"
href="styles.css">
</head>
<body>
<header>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand d-flex align-items-center">
<svg width="184px" height="38px" viewBox="0 0 184 38" version="1.1" style="margin-right: 10px;">
<title>logo</title>
<desc>Created with Sketch.</desc>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="DolbyIO-Signup-About-You-V2" transform="translate(-64.000000, -64.000000)" fill="#FFFFFE"><g id="logo" transform="translate(64.000000, 64.000000)"><g id="Brand/IO/io-logo-white"><g id="2020_DolbyIO_Horiz_White"><path d="M151.978731,26.9787859 C151.978731,27.4958899 151.808491,27.937906 151.464971,28.305138 C151.121451,28.67237 150.677611,28.855986 150.128891,28.855986 C149.580171,28.855986 149.134811,28.67237 148.792811,28.305138 C148.449291,27.937906 148.27905,27.4958899 148.27905,26.9787859 C148.27905,26.5165539 148.449291,26.0952098 148.792811,25.7139938 C149.134811,25.3333858 149.580171,25.1426258 150.128891,25.1426258 C150.677611,25.1426258 151.121451,25.3333858 151.464971,25.7139938 C151.808491,26.0952098 151.978731,26.5165539 151.978731,26.9787859" id="Fill-1"></path><polygon id="Fill-2" points="157.283531 28.912986 159.545291 28.912986 159.545291 8.96511263 157.283531 8.96511263"></polygon><path d="M181.028973,18.9247613 C181.028973,17.7870413 180.851133,16.7306412 180.496973,15.7554091 C180.141293,14.780329 179.622973,13.933841 178.940493,13.2159449 C178.258013,12.4983529 177.440253,11.9297208 176.484172,11.5092888 C175.529612,11.0896168 174.451932,10.8795528 173.249612,10.8795528 C172.048812,10.8795528 170.978732,11.0896168 170.036332,11.5092888 C169.095452,11.9297208 168.282252,12.4983529 167.601292,13.2159449 C166.918812,13.933841 166.400492,14.780329 166.044812,15.7554091 C165.690652,16.7306412 165.512812,17.7870413 165.512812,18.9247613 C165.512812,20.0624814 165.690652,21.1188815 166.044812,22.0939616 C166.400492,23.0691936 166.918812,23.9162897 167.601292,24.6335777 C168.282252,25.3516258 169.095452,25.9134178 170.036332,26.3198659 C170.978732,26.7261619 172.048812,26.9293859 173.249612,26.9293859 C174.451932,26.9293859 175.529612,26.7261619 176.484172,26.3198659 C177.440253,25.9134178 178.258013,25.3516258 178.940493,24.6335777 C179.622973,23.9162897 180.141293,23.0691936 180.496973,22.0939616 C180.851133,21.1188815 181.028973,20.0624814 181.028973,18.9247613 Z M183.321133,18.9247613 C183.321133,20.3608574 183.074893,21.6878175 182.583933,22.9067056 C182.092973,24.1257457 181.404413,25.1822978 180.516733,26.0762098 C179.629053,26.9699699 178.565053,27.66765 177.323213,28.168642 C176.081372,28.669634 174.724012,28.920434 173.249612,28.920434 C171.776732,28.920434 170.425452,28.669634 169.197292,28.168642 C167.969132,27.66765 166.911212,26.9699699 166.025052,26.0762098 C165.137372,25.1822978 164.448812,24.1257457 163.957852,22.9067056 C163.466892,21.6878175 163.220652,20.3608574 163.220652,18.9247613 C163.220652,17.4892732 163.466892,16.1617051 163.957852,14.9428171 C164.448812,13.723777 165.137372,12.6743689 166.025052,11.7938328 C166.911212,10.9139048 167.969132,10.2230647 169.197292,9.72146469 C170.425452,9.22062465 171.776732,8.96982463 173.249612,8.96982463 C174.724012,8.96982463 176.081372,9.22062465 177.323213,9.72146469 C178.565053,10.2230647 179.629053,10.9139048 180.516733,11.7938328 C181.404413,12.6743689 182.092973,13.723777 182.583933,14.9428171 C183.074893,16.1617051 183.321133,17.4892732 183.321133,18.9247613 L183.321133,18.9247613 Z" id="Fill-3"></path><polygon id="Fill-4" points="99.470327 28.91557 103.831663 28.91557 103.831663 0.149112011 99.470327 0.149112011"></polygon><path d="M86.6793741,24.9485218 C83.3443419,24.9485218 80.6688377,22.2363856 80.6688377,18.9378333 C80.6688377,15.6026491 83.3809739,12.9271449 86.6793741,12.9271449 C89.9779264,12.9271449 92.6900626,15.6392811 92.6900626,18.9378333 C92.6900626,22.2730176 89.9779264,24.9485218 86.6793741,24.9485218 Z M86.6793741,9.00554464 C81.1818377,9.00554464 76.7106054,13.476929 76.7106054,18.9744653 C76.7106054,24.4720017 81.1818377,28.943386 86.6793741,28.943386 C92.1769105,28.943386 96.6482948,24.4720017 96.6482948,18.9744653 C96.6482948,13.476929 92.1769105,9.00554464 86.6793741,9.00554464 L86.6793741,9.00554464 Z" id="Fill-5"></path><path d="M41.0085389,28.91557 L36.7643946,28.91557 C28.83957,28.91557 22.3794176,22.4555696 22.3794176,14.530745 C22.3794176,6.60592047 28.83957,0.14576801 36.7643946,0.14576801 L41.0085389,0.14576801 L41.0085389,28.91557" id="Fill-6"></path><path d="M0.085272006,0.14576801 L4.32941631,0.14576801 C12.2542409,0.14576801 18.7143933,6.60592047 18.7143933,14.530745 C18.7143933,22.4555696 12.2542409,28.91557 4.32941631,28.91557 L0.085272006,28.91557 L0.085272006,0.14576801" id="Fill-7"></path><path d="M117.566992,24.9495858 C114.900152,24.9495858 112.659368,23.2137456 111.86684,20.8323615 C111.668176,20.2354574 111.556456,19.5999454 111.556456,18.9390493 C111.556456,18.2743533 111.668176,17.6377772 111.86684,17.0416332 C112.66484,14.645657 114.92584,12.9283609 117.566992,12.9283609 C120.865545,12.9283609 123.577681,15.6404971 123.577681,18.9390493 C123.577681,22.2742336 120.865545,24.9495858 117.566992,24.9495858 Z M117.566992,9.00676064 C115.448264,9.00676064 113.483512,9.67297668 111.86684,10.8040088 L111.866688,0.149112011 L107.496688,0.149112011 L107.496688,28.91557 L111.86684,28.91557 L111.86684,27.1472019 C113.483512,28.278386 115.448264,28.944602 117.566992,28.944602 C123.064529,28.944602 127.535913,24.4732177 127.535913,18.9756813 C127.535913,13.478145 123.064529,9.00676064 117.566992,9.00676064 L117.566992,9.00676064 Z" id="Fill-8"></path><path d="M60.1115963,24.5536257 L54.0823638,24.5536257 L54.0823638,4.50604032 L60.1115963,4.50604032 C65.6339086,4.50604032 70.135541,9.00752064 70.135541,14.529833 C70.135541,20.0521454 65.6339086,24.5536257 60.1115963,24.5536257 Z M60.1115963,0.14409601 L49.7207235,0.14409601 L49.7207235,28.91557 L60.1115963,28.91557 C68.0438688,28.91557 74.4973333,22.4621056 74.4973333,14.529833 C74.4973333,6.59740847 68.0438688,0.14409601 60.1115963,0.14409601 L60.1115963,0.14409601 Z" id="Fill-9"></path><path d="M143.51537,9.02332864 L137.83361,21.7980175 L132.151697,9.02332864 L127.387105,9.02332864 L135.45177,27.1490259 C135.45177,27.1490259 133.478809,31.5897062 133.474249,31.5997382 C132.951217,32.7718103 131.572273,33.3021384 130.403241,32.7806263 L129.777457,32.5014023 L128.016689,36.4526426 L128.017145,36.4529466 L128.024441,36.4561386 L129.535017,37.1299546 C132.370273,38.3950507 135.71473,37.1088266 136.98393,34.2659704 C136.99457,34.2425624 147.30929,11.1891768 148.27905,9.02332864 L143.51537,9.02332864" id="Fill-10"></path><path d="M160.264251,1.98527214 C160.264251,2.50252818 160.094011,2.94439221 159.750491,3.31162423 C159.408491,3.67885626 158.963131,3.86247227 158.414411,3.86247227 C157.865691,3.86247227 157.421851,3.67885626 157.078331,3.31162423 C156.736331,2.94439221 156.564571,2.50252818 156.564571,1.98527214 C156.564571,1.52304011 156.736331,1.10169608 157.078331,0.720480051 C157.421851,0.339872024 157.865691,0.149112011 158.414411,0.149112011 C158.963131,0.149112011 159.408491,0.339872024 159.750491,0.720480051 C160.094011,1.10169608 160.264251,1.52304011 160.264251,1.98527214" id="Fill-11"></path></g></g></g></g>
</g>
</svg>
<strong>Sample Application</strong>
</a>
</div>
</div>
</header>
<main role="main">
<div class="container">
<h1 id="title" class="title">You are not connected to Dolby.io Communications APIs</h1>
<div class="form-group row">
<label for="sdk-versions" class="col-sm-3 col-form-label">Dolby.io SDK version:</label>
<div class="col-sm-9">
<div class="input-group input-group-sm">
<select id="sdk-versions" class="custom-select">
<option value="3.8.0">3.8.0</option>
<option value="3.8.1">3.8.1</option>
<option value="3.8.2">3.8.2</option>
<option value="3.8.3">3.8.3</option>
<option value="3.8.4">3.8.4</option>
<option value="3.8.5">3.8.5</option>
<option value="3.9.0">3.9.0</option>
<option value="3.10.0">3.10.0</option>
<option value="3.10.1">3.10.1</option>
<option value="3.11.0">3.11.0</option>
<option value="latest" selected>Latest stable</option>
</select>
<div class="input-group-append">
<button id="btn-use-sdk-versions" class="btn btn-primary" type="button">Use</button>
</div>
</div>
</div>
</div>
<!-- Client Access Token -->
<div class="form-group row" data-conference="on">
<label for="message-input" class="col-sm-3 col-form-label">Client Access Token:</label>
<div class="col-sm-9">
<div class="input-group input-group-sm">
<input id="access-token-input" type="text" class="form-control" placeholder="Get a client access token from the Dolby.io dashboard">
<div class="input-group-append">
<button id="initialize-btn" class="btn btn-primary" type="button" disabled>Initialize</button>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="webrtc-constraints" class="col-sm-3 col-form-label">WebRTC video constraints:</label>
<div class="col-sm-9">
<div class="input-group input-group-sm">
<select id="webrtc-constraints" class="custom-select">
<option value="auto">Automatic Resolution</option>
<option value="640">Resolution 640 x 360</option>
<option value="960">Resolution 960 x 540</option>
<option value="1280">Resolution 1280 x 720</option>
<option value="min640">Minimum Resolution 640 x 360</option>
<option value="min960">Minimum Resolution 960 x 540</option>
<option value="min1280">Minimum Resolution 1280 x 720</option>
</select>
<div class="input-group-append">
<button id="btn-set-webrtc-constraints" class="btn btn-secondary" type="button" disabled>Set</button>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="username-input" class="col-sm-3 col-form-label">About you:</label>
<div class="col-sm-9">
<div class="input-group input-group-sm">
<input id="external-id-input" type="text" class="form-control" placeholder="External ID" title="External ID">
<input id="username-input" type="text" class="form-control" placeholder="Your name" title="Your name">
<input id="avatar-url-input" type="text" class="form-control" placeholder="Avatar URL" title="Avatar URL">
<div class="input-group-append">
<button id="connect-btn" class="btn btn-primary" type="button" disabled>Connect</button>
</div>
</div>
</div>
</div>
<!-- Join or Leave a Conference -->
<div class="form-group row">
<label for="conference-alias-input" class="col-sm-3 col-form-label">Conference alias:</label>
<div class="col-sm-9">
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<div class="input-group-text">
<input id="chk-live-recording" type="checkbox">
</div>
<label class="input-group-text" for="chk-live-recording" style="border-left: none; padding-left: 0;">Live recording</label>
</div>
<div class="input-group-prepend">
<div class="input-group-text">
<input id="chk-join-with-audio" type="checkbox" checked>
</div>
<label class="input-group-text" for="chk-join-with-audio" style="border-left: none; padding-left: 0;">Audio</label>
</div>
<div class="input-group-prepend">
<div class="input-group-text">
<input id="chk-join-with-video" type="checkbox" checked>
</div>
<label class="input-group-text" for="chk-join-with-video" style="border-left: none; padding-left: 0;">Video</label>
</div>
<input id="conference-alias-input" type="text" class="form-control" placeholder="Conference alias">
<div class="input-group-append">
<button id="conference-join-btn" class="btn btn-primary" type="button" disabled>Join</button>
<button id="conference-listen-btn" class="btn btn-primary" type="button" disabled>Listen</button>
<button id="conference-leave-btn" class="btn btn-danger" type="button" disabled>Leave</button>
</div>
</div>
</div>
</div>
<!-- Video Devices -->
<div class="form-group row">
<label for="video-devices" class="col-sm-3 col-form-label">Video Devices:</label>
<div class="col-sm-9">
<div class="input-group input-group-sm">
<select id="video-devices" class="custom-select"></select>
<div class="input-group-append">
<button id="btn-set-video-device" class="btn btn-info" type="button" disabled>Set</button>
</div>
</div>
</div>
</div>
<!-- Input Audio Devices -->
<div class="form-group row">
<label for="input-audio-devices" class="col-sm-3 col-form-label">Input Audio Devices:</label>
<div class="col-sm-9">
<div class="input-group input-group-sm">
<select id="input-audio-devices" class="custom-select"></select>
<div class="input-group-append">
<button id="btn-set-input-audio-device" class="btn btn-info" type="button" disabled>Set</button>
</div>
</div>
</div>
</div>
<!-- Output Audio Devices -->
<div class="form-group row">
<label for="output-audio-devices" class="col-sm-3 col-form-label">Output Audio Devices:</label>
<div class="col-sm-9">
<div class="input-group input-group-sm">
<select id="output-audio-devices" class="custom-select"></select>
<div class="input-group-append">
<button id="btn-set-output-audio-device" class="btn btn-info" type="button" disabled>Set</button>
</div>
</div>
</div>
</div>
<!-- Actions on Video -->
<div class="form-group row" data-conference="on">
<label class="col-sm-3 col-form-label">Video actions:</label>
<div class="col-sm-9">
<div class="input-group input-group-sm">
<div class="input-group-append">
<button id="start-video-btn" class="btn btn-success" type="button" disabled>Start video</button>
<button id="stop-video-btn" class="btn btn-secondary" type="button" disabled>Stop video</button>
</div>
</div>
</div>
</div>
<!-- Actions on Audio -->
<div class="form-group row" data-conference="on">
<label class="col-sm-3 col-form-label">Audio actions:</label>
<div class="col-sm-9">
<div class="input-group input-group-sm">
<div class="input-group-append">
<button id="start-audio-btn" class="btn btn-success" type="button" disabled>Start audio</button>
<button id="stop-audio-btn" class="btn btn-secondary" type="button" disabled>Stop audio</button>
<button id="mute-audio-btn" class="btn btn-warning" type="button" disabled>Mute audio</button>
<button id="unmute-audio-btn" class="btn btn-warning" type="button" disabled>Unmute audio</button>
</div>
</div>
</div>
</div>
<!-- Actions on Screen Share -->
<div class="form-group row" data-conference="on">
<label class="col-sm-3 col-form-label">Screen Share actions:</label>
<div class="col-sm-9">
<div class="input-group input-group-sm">
<div class="input-group-append">
<button id="start-screenshare-btn" class="btn btn-success" type="button" disabled>Start screen share</button>
<button id="stop-screenshare-btn" class="btn btn-secondary" type="button" disabled>Stop screen share</button>
</div>
</div>
</div>
</div>
<!-- Play a video -->
<div class="form-group row" data-conference="on">
<label for="video-url-input" class="col-sm-3 col-form-label">Play Video URL:</label>
<div class="col-sm-9">
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-info-circle gray fa-lg" title="The video URL must be publicly accessible"></i></span>
</div>
<input id="video-url-input" type="text" class="form-control" value="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
<div class="input-group-append">
<button id="video-start-btn" class="btn btn-primary" type="button" disabled>Start</button>
<button id="video-stop-btn" class="btn btn-danger" type="button" disabled>Stop</button>
<button id="video-pause-btn" class="btn btn-warning" type="button" disabled>Pause</button>
<button id="video-play-btn" class="btn btn-warning" type="button" disabled>Play</button>
</div>
</div>
</div>
</div>
<!-- Recording Actions and Status -->
<div class="form-group row" data-conference="on">
<label class="col-sm-3 col-form-label">Recording:</label>
<div class="col-sm-9">
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text"><i id="recording-status" class="fas fa-stop-circle gray fa-lg"></i></span>
</div>
<div class="input-group-append">
<button id="start-recording-btn" class="btn btn-primary" type="button" disabled>Start</button>
<button id="stop-recording-btn" class="btn btn-danger" type="button" disabled>Stop</button>
</div>
</div>
</div>
</div>
<!-- Messaging -->
<div class="form-group row" data-conference="on">
<label for="message-input" class="col-sm-3 col-form-label">Message:</label>
<div class="col-sm-9">
<div class="input-group input-group-sm">
<input id="message-input" type="text" class="form-control" value="Bonjour">
<div class="input-group-append">
<button id="send-message-btn" class="btn btn-primary" type="button" disabled>Send</button>
</div>
</div>
</div>
</div>
<!-- Invitation -->
<div class="form-group row" data-conference="on">
<label for="message-input" class="col-sm-3 col-form-label">Invitation:</label>
<div class="col-sm-9">
<div class="input-group input-group-sm">
<input id="invite-input" type="text" class="form-control" placeholder="External ID">
<div class="input-group-append">
<button id="send-invitation-btn" class="btn btn-primary" type="button" disabled>Invite</button>
</div>
</div>
</div>
</div>
<!-- RTMP Streaming -->
<div class="form-group row" data-conference="on" data-app-key-defined="yes">
<label for="rtmp-url-input" class="col-sm-3 col-form-label">RTMP Stream URL:</label>
<div class="col-sm-9">
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text"><i id="rtmp-status" class="fas fa-broadcast-tower gray"></i></span>
</div>
<input id="rtmp-url-input" type="text" class="form-control" value="rtmp://a.rtmp.youtube.com/live2/">
<div class="input-group-append">
<button id="start-rtmp-btn" class="btn btn-primary" type="button" disabled>Start</button>
<button id="stop-rtmp-btn" class="btn btn-danger" type="button" disabled>Stop</button>
</div>
</div>
</div>
</div>
<!-- Low Latency Stream (LLS) -->
<div class="form-group row" data-conference="on" data-app-key-defined="yes">
<label for="lls-stream-name-input" class="col-sm-3 col-form-label">Low Latency Stream (LLS):</label>
<div class="col-sm-9">
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text"><i id="lls-status" class="fas fa-broadcast-tower gray"></i></span>
</div>
<input id="lls-stream-name-input" type="text" class="form-control" placeholder="Stream name" >
<input id="lls-ptoken-input" type="text" class="form-control" placeholder="Publishing token" >
<div class="input-group-append">
<button id="start-lls-btn" class="btn btn-primary" type="button" disabled>Start</button>
<button id="stop-lls-btn" class="btn btn-danger" type="button" disabled>Stop</button>
</div>
</div>
</div>
</div>
</div>
<!-- Display the list of participants -->
<div class="bg-light">
<div class="container">
<h2 class="title">Participants</h2>
<ul id="participants-list"></ul>
</div>
</div>
<!-- Container for the video streams -->
<div>
<div class="container">
<h2 class="title">Video Streams</h2>
<div id="streams-containers" class="row"></div>
</div>
</div>
<!-- Display logs -->
<div class="bg-light">
<div class="container">
<h2 class="title">Logs</h2>
<div class="form-group">
<textarea id="logs-area" class="form-control" rows="10" readonly></textarea>
</div>
</div>
</div>
</main>
<footer class="text-muted">
<div class="container">
<p class="float-right">
<a href="#">Back to top</a>
</p>
<p>Powered by <a href="https://www.dolby.io">Dolby.io</a>. Communications SDK Version <span id="sdk-version">0.0.0</span>. <a href="https://github.com/dolbyio-samples/comms-sdk-web-sample" target="_blank">GitHub repo</a></p>
</div>
</footer>
<script id="template-participant" type="text/x-jsrender">
<li id="participant-{{:id}}">
<img class="participant-avatar" src="{{:avatarUrl}}" />
<span>{{:name}} - {{:status}}{{if isLocal}} - [local session]{{/if}}</span>
</li>
</script>
<script id="template-video" type="text/x-jsrender">
<div id="stream-{{:id}}" class="col-md-4">
<div class="card mb-4 shadow-sm">
<video width="100%" height="225" autoplay="autoplay" muted="true" playsinline="true"></video>
<div class="card-body">
<p class="card-text">This is a video stream from {{:name}}.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
</div>
<small class="text-muted resolution"></small>
</div>
</div>
</div>
</div>
</script>
<script id="template-screenshare" type="text/x-jsrender">
<div id="stream-screenshare" class="col-md-6">
<div class="card mb-4 shadow-sm">
<video width="100%" height="300" autoplay="autoplay" muted="true" playsinline="true"></video>
<div class="card-body">
<p class="card-text">This is a screen share from {{:name}}.</p>
</div>
</div>
</div>
</script>
<script id="template-video-url" type="text/x-jsrender">
<div id="stream-video" class="col-md-6">
<div class="card mb-4 shadow-sm">
<video width="100%" height="300" autoplay="autoplay" playsinline="true" src="{{:url}}"></video>
</div>
</div>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.0/js/bootstrap.bundle.min.js"
integrity="sha512-wV7Yj1alIZDqZFCUQJy85VN+qvEIly93fIQAN7iqDFCPEucLCeNFz4r35FCo9s6WrpdDQPi80xbljXB8Bjtvcg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/1.0.11/jsrender.min.js"
integrity="sha512-bKlNlbTH3duwZ28zoqEhXui/yuaPuQVci6OAVu0zh2WfYbEKD39HszVR8byP4/L4YyBo3b5CGIY+4ldVN93uCg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="events.js"></script>
</body>
</html>