forked from OpenVidu/openvidu.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
openvidu-call.html
288 lines (252 loc) · 15.2 KB
/
openvidu-call.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
---
layout: pagetop-layout
title: Videoconference app built with OpenVidu - OpenViduCall
active: openvidu-call
top-title: OPENVIDU CALL
top-subtitle: The videoconferencing app built on top of OpenVidu platform
description: Get to know OpenVidu Call, the videoconferencing app buildt on top of OpenVidu platform. Try it! Customize it! Install it!
---
<!-- Start Contact Form Section -->
<section id="contact" style="padding-top: 70px">
<div class="container">
<div class="row no-margin row-gallery">
<div class="col-md-12">
<video class="img-responsive" style="margin: auto; max-width: 70%;" src="video/components/ov-call.mp4" muted playsinline autoplay loop async></video>
<br>
<h2 align="center" style="margin-top: 40px">Your own videoconferencing app</h2>
<br>
<div class="col-md-4">
<h4 align="center"><strong>Ready to use</strong></h4>
<p class="ovCallText">OpenVidu Call is a ready to use, professional looking, videoconferencing
application.</p>
<p class="ovCallText">With all the features you expect: multiparty videoconferences, smart layouts, virtual background, recording,
integrated chat, screen sharing...</p>
</div>
<div class="col-md-4">
<h4 align="center"><strong>Adapt it to your needs</strong></h4>
<p class="ovCallText">It is implemented with an open source license, so you can adapt it to your
needs. You have full control over the UI (brand, colors, icons...),
you can decide which user is able to join each session, you can add recording, etc...</p>
</p>
</div>
<div class="col-md-4">
<h4 align="center"><strong>On your own servers</strong></h4>
<p class="ovCallText">OpenVidu call is designed to be installed on premises in your own servers or
in any cloud provider. It is available by default when you install OpenVidu platform.
</p>
</p>
</div>
</div>
<div class="col-md-12" style="padding-top: 0">
<div class="col-sm-4" align="center">
<a target="_blank" href="https://demos.openvidu.io/openvidu-call/#/">
<input id="submit" class="submit" type="submit"
href="https://demos.openvidu.io/openvidu-call/#/" value="Try a demo">
</a>
</div>
<div class="col-sm-4" align="center">
<a target="_blank" href="https://docs.openvidu.io/en/stable/components/openvidu-call/">
<input id="submit" class="submit" type="submit"
href="https://docs.openvidu.io/en/stable/components/openvidu-call/" value="Customize it">
</a>
</div>
<div class="col-sm-4" align="center">
<a target="_blank" href="https://docs.openvidu.io/en/stable/deployment/ce/on-premises/">
<input id="submit" class="submit" type="submit"
href="https://docs.openvidu.io/en/stable/deployment/ce/on-premises/"
value="Install it">
</a>
</div>
</div>
</div>
<hr style="margin: 30px 0 30px 0">
<div class="row no-margin row-gallery">
<div class="col-md-6">
<h3 align="center" style="margin-bottom: 20px"><strong>Join with a click</strong></h3>
<p class="ovCallText">
OpenVidu Call provides a <strong>basic authentication system</strong> that allows users to join a session with a click.
</p>
<p class="ovCallText">
Moreover, it generate a random session name to offer a unique URL for each session.
This way, users can share the URL with their friends and colleagues to join the session.
</p>
<p class="ovCallText">Of course, you can also implement your own authentication system, so that only authorized users can join a session.
or disabling the login authentication. See more <a target="_blank" href="https://docs.openvidu.io/en/stable/components/openvidu-call/#session-control">here</a>.</p>
</div>
<div class="col-md-6">
<a data-fancybox="gallery" data-type="image" class="fancybox-img" href="img/demos/ov-call-login.png">
<img class="img-responsive" src="img/demos/ov-call-login.png">
</a>
</div>
</div>
<hr style="margin: 30px 0 30px 0">
<div class="row no-margin row-gallery">
<div class="col-md-6 col-md-push-6">
<h3 align="center" style="margin-bottom: 20px"><strong>Setting up your session</strong></h3>
<p class="ovCallText">OpenVidu Call provides different options and configurations for users before
joining a session.
</p>
<p class="ovCallText">
This includes testing and selecting <strong>audio and video devices, setting up a virtual background, choosing
a nickname and changing the language</strong>.
</p>
<p class="ovCallText">
Besides, these options are remembered by default by the client's device. If they refresh the page or join a different
session, their previous configuration will be automatically applied.
</p>
</div>
<div class="col-md-6 col-md-pull-6">
<a data-fancybox="gallery" data-type="image" class="fancybox-img" href="img/demos/ov-call-prejoin.png">
<img class="img-responsive" src="img/demos/ov-call-prejoin.png">
</a>
</div>
</div>
<hr style="margin: 30px 0 30px 0">
<div class="row no-margin row-gallery">
<div class="col-md-6">
<h3 align="center" style="margin-bottom: 20px"><strong>Choose the perfect background effect</strong></h3>
<p class="ovCallText">
OpenVidu Call seamlessly integrates the Virtual Background feature.
</p>
<p class="ovCallText">
Our <strong>background effects</strong> allow your users to participate in video conferences with a private or funny touch.
</p>
</div>
<div class="col-md-6">
<a data-fancybox="gallery" data-type="iframe" class="fancybox-img" href="video/components/ov-call-vb.mp4">
<video class="img-responsive" src="video/components/ov-call-vb.mp4" muted playsinline autoplay loop async></video>
</a>
</div>
</div>
<hr style="margin: 30px 0 30px 0">
<div class="row no-margin row-gallery">
<div class="col-md-6 col-md-push-6">
<h3 align="center" style="margin-bottom: 20px"><strong>Recording your sessions for posterity</strong></h3>
<p class="ovCallText">
Now you don't have to worry about recordings, OpenVidu Call includes recordings as one of its basic features.
</p>
<p class="ovCallText">
The session creator will be able to <strong>record the sessions and delete them</strong> in a very intuitive way inside of the Activities Panel.
</p>
<p class="ovCallText">
Moreover, the others participants also will be able to <strong>play and download</strong> the video recordings once the recording is finished.
</p>
</div>
<div class="col-md-6 col-md-pull-6">
<video class="img-responsive" src="video/components/ov-call-recording.mp4" muted playsinline autoplay loop async></video>
</div>
</div>
<hr style="margin: 30px 0 30px 0">
<div class="row no-margin row-gallery">
<div class="col-md-6">
<h3 align="center" style="margin-bottom: 20px"><strong>Live captions in your meeting</strong></h3>
<p class="ovCallText">OpenVidu Call integrates <strong>live captions</strong>, which allows users to
<strong>read the speech of the other participants in real time</strong>.
</p>
<p class="ovCallText">
Enabling can not be easier, just click on the <strong>Enable Captions</strong> button, select the language
you want to use and the captions will be displayed in the bottom of the screen.
</p>
</div>
<div class="col-md-6">
<video class="img-responsive" src="video/components/ov-call-captions.mp4" muted playsinline autoplay loop async></video>
</div>
</div>
<hr style="margin: 30px 0 30px 0">
<div class="row no-margin row-gallery">
<div class="col-md-6 col-md-push-6">
<h3 align="center" style="margin-bottom: 20px"><strong>Screen sharing in the blink of an eye</strong></h3>
<p class="ovCallText">
With OpenVidu Call you can share <strong>your screen and your webcam
at the same time</strong>. And several users can do it simultaneously!
</p>
<p class="ovCallText">
Thanks to our intelligent layout, your screen share video will take the lead and will be shown at a
larger size than the rest, never being cropped so no information is lost.
</p>
<p class="ovCallText">
Moreover, you can seamlessly switch your shared screen on the fly with the click of a button.
</p>
</div>
<div class="col-md-6 col-md-pull-6">
<video class="img-responsive" src="video/components/ov-call-screenshare.mp4" muted playsinline autoplay loop async></video>
</div>
</div>
<hr style="margin: 30px 0 30px 0">
<div class="row no-margin row-gallery">
<div class="col-md-6">
<h3 align="center" style="margin-bottom: 20px"><strong>Chatting time!</strong></h3>
<p class="ovCallText">
OpenVidu Call also includes a nice chat already integrated in the intelligent layout.
</p>
<p class="ovCallText">
The chat provides you an alternative way to silently exchange messages with all your
videoconference partners. <strong>Everything works as you expect</strong>: messages are properly displayed with the
author's name, links are automatically formatted to allow clicking on them, users will be
subtly notified when new messages arrive, mobile view is specifically adapted for ease of use...
</p>
<p class="ovCallText">
A great and advanced chat out-of-the-box!
</p>
</div>
<div class="col-md-6">
<video class="img-responsive" src="video/components/ov-call-chat.mp4" muted playsinline autoplay loop async></video>
</div>
</div>
<hr style="margin: 30px 0 30px 0">
<div class="row no-margin row-gallery">
<div class="col-md-6 col-md-push-6">
<h3 align="center" style="margin-bottom: 20px"><strong>Recording management in an admin dashboard</strong></h3>
<p class="ovCallText">
With OpenVidu Call you can handle the <strong>recording management</strong> in a very intuitive dashboard.</p>
<p class="ovCallText">
Not only you will be able to login and logout from the Admin Dashboard but you will also be able to <strong>preview the recordings,
download them or delete</strong> those you don't need anymore. Just with a couple of clicks.
</p>
</div>
<div class="col-md-6 col-md-pull-6">
<video class="img-responsive" src="video/components/ov-admin-dashboard.mp4" muted playsinline autoplay loop async></video>
</div>
</div>
<hr style="margin: 30px 0 30px 0">
<div class="row no-margin row-gallery">
<div class="col-md-6">
<h3 align="center" style="margin-bottom: 20px"><strong>Multi-party videoconference</strong></h3>
<p class="ovCallText">With OpenVidu Call you can join into a multi-party videoconference, displayed in a
<strong>nice, intelligent layout</strong>. You will be able to zoom in, zoom out and fullscreen
any video you want.</p>
<p class="ovCallText">Toggling the <strong>participants panel</strong> (bottom right corner) you can check at a glance
all the participants connected to the session.</p>
</div>
<div class="col-md-6">
<video class="img-responsive" src="video/components/ov-call-participants.mp4" muted playsinline autoplay loop async></video>
</div>
</div>
<br>
<br>
<div class="col-md-12">
<div class=" col-md-4" align="center">
<a target="_blank" href="https://demos.openvidu.io/openvidu-call/#/">
<input id="submit" class="submit" type="submit" href="https://demos.openvidu.io/openvidu-call/#/"
value="Try a demo">
</a>
</div>
<div class="col-md-4" align="center">
<a target="_blank" href="https://docs.openvidu.io/en/stable/components/openvidu-call/">
<input id="submit" class="submit" type="submit"
href="https://docs.openvidu.io/en/stable/components/openvidu-call/" value="Customize it">
</a>
</div>
<div class="col-md-4" align="center">
<a target="_blank" href="https://docs.openvidu.io/en/stable/deployment/ce/on-premises/">
<input id="submit" class="submit" type="submit"
href="https://docs.openvidu.io/en/stable/deployment/ce/on-premises/" value="Install it">
</a>
</div>
</div>
</div>
</section>
<!-- End Contact Form Section -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js"></script>
<script type='text/javascript' src='/js/fancybox-setup.js'></script>