-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
159 lines (147 loc) · 7.55 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Openfy Demo</title>
</head>
<body class="bg-light">
<style>
.material-icons {
vertical-align: middle;
line-height: 0 !important;
position: relative;
top: -1px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@proficonf/iframe-api"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const startButton = document.getElementById('start-button');
startButton.addEventListener('click', () => {
// Added spinner for the button
animateButton(startButton, 'Starting');
axios.post('/create-meeting').then((response) => {
const meeting = response.data;
const joinUrlElement = document.getElementById('joinUrl');
joinUrlElement.href = meeting.url;
joinUrlElement.innerText = meeting.url;
document.getElementById('create-room').classList.add('visually-hidden');
document.getElementById('choose-role').classList.remove('visually-hidden');
// Join as a host button handler
const joinAsHostButton = document.getElementById('join-as-host');
joinAsHostButton.addEventListener('click', () => {
animateButton(joinAsHostButton, 'Joining');
// We need get token from backend to join the meeting
// as a participant wotn non-default role ('viewer' in our case)
axios.post(`/get-token-for-host/${meeting.id}`).then(({ data }) => {
// For the lecturer we just need to pass the token
initializeIframe(meeting.url, data.token);
});
});
// Join as a viewer button handler
const joinAsHostViewerButton = document.getElementById('join-as-viewer');
joinAsHostViewerButton.addEventListener('click', () => {
animateButton(joinAsHostViewerButton, 'Joining');
initializeIframe(meeting.url, null, {
// For viewer we should remove unnecessary elements
// We can do this in the following way
removeElements: [
// let's compleately remove left bar
'sidebar',
// And delete some elements from the topbar
'deviceControls', 'recordingControl', 'streamingControl',
'roomLocker', 'leaveButton', 'displayModeButton',
'qualityIndicator', 'settingsButton', 'inviteButton'
]
});
});
});
});
});
function initializeIframe(meetingUrl, token, uiParams = {}) {
window.room = Proficonf.create({
meetingUrl: meetingUrl,
rootElement: document.getElementById('iframe-container'),
user: token ? { token } : { locale: 'pt' },
iframe: {
// Aplying styles to make iframe to fit all page
height: '100%',
width: '100%',
style: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: '#263238'
}
},
ui: {
// Let's set some branding
customLogoSrc: 'https://tfiferma.sirv.com/Logos/openfy.png',
customPrimaryColor: '#0000FF',
// Merge with the passed uiParams
...uiParams
},
});
window.room.join().then(() => {
document.getElementById('prejoin-page').classList.add('visually-hidden');
document.getElementById('iframe-page').classList.remove('visually-hidden');
});
}
function animateButton(button, text) {
button.setAttribute('disabled', 'disabled');
button.querySelector('[role=text]').innerText = text;
button.querySelector('.material-icons').classList.add('visually-hidden');
button.querySelector('[role=status]').classList.remove('visually-hidden');
}
</script>
<div id="prejoin-page" class="container">
<div class="row">
<div id="create-room" class="col text-center mt-4">
<p class="lead mb-4">Click "Create a meeting" to start.</p>
<button id="start-button" type="button" class="btn btn-primary btn-lg px-5 gap-3">
<span role="text">Create a meeting</span>
<span class="material-icons">play_arrow</span>
<span class="spinner-border spinner-border-sm visually-hidden" role="status" aria-hidden="true"></span>
</button>
</div>
<div id="choose-role" class="col text-center mt-4 visually-hidden">
<div class="alert alert-primary" role="alert">
To join this meeting in a browser use the following link:<br/>
<a id="joinUrl" href="#" target="_blank"></a>
</div>
<p class="lead mb-4">Please choose a role</p>
<div class="row">
<div class="col-6">
<button id="join-as-host" type="button" class="btn btn-primary btn-lg px-5 gap-3">
<span class="material-icons">person</span>
<span role="text">Join as a host</span>
<span class="spinner-border spinner-border-sm visually-hidden" role="status" aria-hidden="true"></span>
</button>
</div>
<div class="col-6">
<button id="join-as-viewer" type="button" class="btn btn-primary btn-lg px-5 gap-3">
<span class="material-icons">groups</span>
<span role="text">Join as a viewer</span>
<span class="spinner-border spinner-border-sm visually-hidden" role="status" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
</div>
<div id="iframe-page" class="container visually-hidden">
<div class="row mt-3">
<div class="col-12">
<div id="iframe-container"></div>
</div>
</div>
</div>
</body>
</html>