forked from daily-demos/prebuilt-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
160 lines (160 loc) · 5.29 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
<html>
<head>
<title>Daily Prebuilt UI demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://unpkg.com/@daily-co/daily-js"></script>
<link rel="icon" type="image/png" href="./assets/favicon.png" />
<link rel="stylesheet" href="./index.css" />
<script src="./index.js"></script>
<!-- <script src="../shared-assets/create-demo-room.js"></script> -->
</head>
<body onload="setup()" class="main">
<div class="container">
<header class="header">
<img
src="assets/[email protected]"
class="logo"
alt="Daily logo reads Daily"
/>
<div>
<a href="https://github.com/daily-demos"
><img src="assets/[email protected]" alt="GitHub logo Octocat"
/></a>
</div>
</header>
<h1 class="title">Daily Prebuilt UI demo</h1>
<div class="instructions">
<p id="instruction-text">
Enter a member email as the username and a team's audioRoomURL
</p>
<div class="input-and-buttons">
<label for="username"></label>
<input
type="text"
class="username"
id="username"
placeholder="Username"
/>
<button
class="button"
id="save-username-button"
onclick="saveUsername()"
>
Save username
</button>
<label for="room-url"></label>
<input
type="text"
class="room-url"
id="room-url"
placeholder="Room URL"
pattern="^(https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.(daily\.co\/)([a-z0-9]+)+$"
/>
<button class="button" id="create-button" onclick="createDemoRoom()">
Create demo room
</button>
<button class="join-call button" onclick="joinCall()">
Join call
</button>
</div>
<p class="expires-countdown"></p>
</div>
<div class="call-container">
<div class="callframe" id="callframe"></div>
<div class="call-panel hide">
<h2 class="call-panel--title">Call overview</h2>
<div class="info">
<h3 class="call-panel--subtitle">Meeting participants</h3>
<ul id="meeting-participants-info"></ul>
</div>
<div class="info">
<h3 class="call-panel--subtitle">Network stats</h3>
<p class="loading-network">Loading your network stats...</p>
<ul class="network-info"></ul>
</div>
<div class="info">
<h3 class="call-panel--subtitle">Example custom controls</h3>
<p>
You can also create your own meeting controls outside the
callframe using
<a href="https://github.com/daily-co/daily-js">daily-js</a>.
</p>
<h4 class="call-panel--control-type">Participant controls</h4>
<button
class="call-panel--button button"
id="camera-button"
onclick="toggleCamera()"
>
Toggle camera
</button>
<button
class="call-panel--button button"
id="mic-button"
onclick="toggleMic()"
>
Toggle mic
</button>
<button
class="call-panel--button button"
id="share-button"
onclick="toggleScreenshare()"
>
Share screen
</button>
<button
class="call-panel--button button"
id="recording-button"
onclick="toggleRecording()"
>
Start recording
</button>
<button
class="call-panel--button button"
id="fullscreen-button"
onclick="callFrame.requestFullscreen()"
>
Expand fullscreen
</button>
<button
class="call-panel--button button"
id="local-video-button"
onclick="toggleLocalVideo()"
>
Toggle local video
</button>
<button
class="call-panel--button button"
id="participants-bar-button"
onclick="toggleParticipantsBar()"
>
Toggle participants bar
</button>
<button
class="call-panel--button button"
id="surprise-button"
onclick="updateBackground()"
>
Surprise me
</button>
<h4 class="call-panel--control-type">Track subscriptions</h4>
<p>
You can
<a
href="https://www.daily.co/blog/create-dynamic-meetings-using-track-subscriptions/"
>programmatically subscribe to the tracks</a
>
(mic, cam, screenshare) of other participants.
<button
class="call-panel--button button"
id="tracks-button"
onClick="unsubscribeTracks()"
>
Unsubscribe from video and audio
</button>
</p>
</div>
</div>
</div>
</div>
</body>
</html>