-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
238 lines (192 loc) · 9.13 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Meeting app - by Vinit Jha</title>
<meta name="description" content="A simple meeting application">
<meta name="author" content="Vinit Jha" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="style/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
// show instruction page
function showInstruction() {
document.getElementById("instruction-body").style.display = "block";
document.getElementById("main-container").style.display = "none";
document.getElementById("how_to_show_btn").style.display = "none";
}
</script>
</head>
<body>
<div style="display:none" id="instruction-body">
<div class="jumbotron">
<center>
<h1 class="display-3">Meeting app</h1>
<p class="lead">A simple application for secure p2p based meetings</p>
<span class="badge badge-primary" style="float: right;">demo</span>
<hr class="my-4">
</center>
<div class="alert alert-dismissible alert-primary">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Never refresh the page after being connected!</strong>
</div>
<div class="alert alert-dismissible alert-danger">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Always allow video and audio permissions ; asked as many times!</strong>
</div>
<hr class="my-4">
// simple call
<h4>Instructions for "Simple Call"</h4>
<hr class="my-4">
<small>Step 1</small>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100" style="width: 20%"></div>
</div>
<p class="table-danger">One of the two person has to first go to <a href="simpleChat.html">"Simple Call"</a>, then
choose whatever username you want and whatever password you want, but remember the password and click on "Call
someone". You
will be taken to a add participant page. wait there till 2nd user does step #2.
</p>
<small>Step 2</small>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100" style="width: 40%"></div>
</div>
<p class="table-success">The other person will go to <a href="simpleChat.html">"Simple Call"</a> and fill in
whatever
username but use the same password
as the first guy used (first person has to share this with other).<br>
After that the second guy has to share only his username with 1st guy. Now click "Wait for a call". You will be
taken to a waiting area. Wait there till 1st person call you.
</p>
<small>Step 3</small>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100" style="width: 65%"></div>
</div>
<p class="table-primary">
Now 1st person has to add a participant by filling the username of person he/she wanna call (the username
provided by 2nd guy to you in step #2).
Then click "Add participant" and allow all permissions for audio and video.
</p>
<small>Step 4</small>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100" style="width: 85%"></div>
</div>
<p class="table-info">
Both participants will be presented with series of log messages of connection. Click "Start video call".
</p>
<small>Step 5</small>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
</div>
<p class="table-warning">
Enjoy!<br>
Make sure not to refresh the page.
</p>
<p class="lead">
<a class="btn btn-primary" href="index.html" role="button">I got it!</a>
</p>
<hr class="my-4">
<h4>Instructions for "Group Call"</h4>
<hr class="my-4">
<small>Step 1</small>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100" style="width: 20%"></div>
</div>
<p class="table-danger">One of the person (the host) has to first go to <a href="groupChat.html">"Group Call"</a>,
then
choose whatever username you want and whatever password you want, but remember the password and click on "Call
someone". You
will be taken to a add participant page. wait there till all other participants do step #2.
</p>
<small>Step 2</small>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100" style="width: 40%"></div>
</div>
<p class="table-success">All other participants will go to <a href="groupChat.html">"Group Call"</a> and fill in
whatever
username but use the same password
as the first guy (the host) used (first person (the host) has to share this with others).<br>
After that all other guys have to share only their username with 1st guy (the host). Now click "Wait for a
call". You will be
taken to a waiting area. Wait there till 1st person / host calls you.
</p>
<small>Step 3</small>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100" style="width: 65%"></div>
</div>
<p class="table-primary">
Now 1st person (the host) has to add a participant by filling the username of person he/she wanna call (the
username
provided by all others to you in step #2).
Then click "Add participant" and allow all permissions for audio and video.
</p>
<small>Step 4</small>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100" style="width: 85%"></div>
</div>
<p class="table-info">
After call is connected between any two (the host and other guy) then the host can add more participants from
"Add participant" button
</p>
<small>Step 5</small>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
</div>
<p class="table-warning">
Enjoy!<br>
Make sure not to refresh the page.
</p>
<p class="lead">
<a class="btn btn-primary" href="index.html" role="button">I got it!</a>
</p>
</div>
</div>
<button id="how_to_show_btn" type="button" class="btn btn-primary" onclick="showInstruction()">How to use <i
class="fa fa-question-circle"></i> </button>
<div class="container" style="margin-top: 50px;" id="main-container">
<div class="row">
<div class="col-sm jumbotron">
<center>
<h1 class="display-3">Meeting app</h1>
<p class="lead">A simple application for secure p2p based meetings</p>
<span class="badge badge-primary" style="float: right;">demo</span>
<hr class="my-4">
<a type="button" href="simpleChat.html" class="btn btn-rounded btn-success btn-lg"><i class="fa fa-user"></i>
Simple Call</a>
<a type="button" href="groupChat.html" class="btn btn-rounded btn-danger btn-lg"><i class="fa fa-users"></i>
Group Call</a>
</center>
</div>
<div class="col-sm">
<div class="text-center">
<img src="assets/undraw_social_dashboard_k3pt.png" style="width:500px;height:400px;" class="rounded"
alt="...">
</div>
</div>
</div>
<!-- Footer -->
<footer class="page-footer font-small blue pt-4">
<!-- Copyright -->
<div class="footer-copyright text-center py-3"> <a href="https://github.com/jhavinit/jhavinit.github.io"><i
class="fa fa-github"></i></a>
<a href="https://www.linkedin.com/in/vinit-narayan-jha-07/"> VINIT NARAYAN JHA </a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
</div>
</body>
</html>