neoris/openvidu-livekit-tutorials
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

openvidu-webcomponent updated to fit tutorial doc

Browse Source
This commit is contained in:
pabloFuente 2018-07-11 17:50:39 +02:00
parent 41a94c641e
commit 85140211f1
3 changed files with 31 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
openvidu-webcomponent/README.md
View File

@ -5,9 +5,9 @@
[![][OpenViduLogo]](http://openvidu.io)
openvidu-starter
openvidu-webcomponent
===
Visit [openvidu.io/docs/tutorials/openvidu-starter/](http://openvidu.io/docs/tutorials/openvidu-webcomponent/)
Visit [openvidu.io/docs/tutorials/openvidu-webcomponent/](http://openvidu.io/docs/tutorials/openvidu-webcomponent/)
[OpenViduLogo]: https://secure.gravatar.com/avatar/5daba1d43042f2e4e85849733c8e5702?s=120

43
openvidu-webcomponent/web/app.js
View File

@ -1,55 +1,54 @@
$(document).ready(() => {
var ov = document.querySelector('openvidu-webcomponent');
var webComponent = document.querySelector('openvidu-webcomponent');
var form = document.getElementById('main');
ov.addEventListener('joinSession', (event) => {
document.getElementById('main').style.display = 'none';
document.getElementById('session').style.display = 'block';
webComponent.addEventListener('joinSession', (event) => {
form.style.display = 'none';
webComponent.style.display = 'block';
});
ov.addEventListener('leaveSession', (event) => {
document.getElementById('main').style.display = 'block';
document.getElementById('session').style.display = 'none';
webComponent.addEventListener('leaveSession', (event) => {
form.style.display = 'block';
webComponent.style.display = 'none';
});
ov.addEventListener('error', (event) => {
webComponent.addEventListener('error', (event) => {
console.log('Error event', event.detail);
});
});
function joinSession() {
var ov = document.querySelector('openvidu-webcomponent');
var sessionId = document.getElementById('sessionId').value;
var sessionName = document.getElementById('sessionName').value;
var user = document.getElementById('user').value;
getToken(sessionId).then((token) => {
ov.sessionConfig = { sessionId, user, token };
getToken(sessionName).then((token) => {
var webComponent = document.querySelector('openvidu-webcomponent');
webComponent.sessionConfig = { sessionName, user, token };
});
}
/**
* --------------------------
* SERVER-SIDE RESPONSABILITY
* SERVER-SIDE RESPONSIBILITY
* --------------------------
* These methods retrieve the mandatory user token from OpenVidu Server.
* This behaviour MUST BE IN YOUR SERVER-SIDE IN PRODUCTION (by using
* This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION (by using
* the API REST, openvidu-java-client or openvidu-node-client):
* 1) Initialize a session in OpenVidu Server (POST /api/sessions)
* 2) Generate a token in OpenVidu Server (POST /api/tokens)
* 3) The token must be consumed in Session.connect() method
* 3) Configure OpenVidu Web Component in your client side with the token
*/
var OPENVIDU_SERVER_URL = 'https://' + location.hostname + ':4443';
function getToken(mySessionId) {
return createSession(mySessionId).then((sessionId) => createToken(sessionId));
function getToken(sessionName) {
return createSession(sessionName).then((sessionId) => createToken(sessionId));
}
function createSession(sessionId) {
function createSession(sessionName) {
return new Promise((resolve, reject) => {
$.ajax({
type: 'POST',
url: OPENVIDU_SERVER_URL + '/api/sessions',
data: JSON.stringify({ customSessionId: sessionId }),
data: JSON.stringify({ customSessionId: sessionName }),
headers: {
Authorization: 'Basic ' + btoa('OPENVIDUAPP:MY_SECRET'),
'Content-Type': 'application/json',
@ -57,7 +56,7 @@ function createSession(sessionId) {
success: (response) => resolve(response.id),
error: (error) => {
if (error.status === 409) {
resolve(sessionId);
resolve(sessionName);
} else {
console.warn('No connection to OpenVidu Server. This may be a certificate error at ' + OPENVIDU_SERVER_URL);
if (

19
openvidu-webcomponent/web/index.html
View File

@ -7,24 +7,20 @@
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<!-- OpenVidu WebComponent -->
<link rel="stylesheet" href="openvidu-webcomponent.css">
<script type='application/javascript' src='openvidu-webcomponent.js'></script>
<!-- OpenVidu WebComponent -->
<script src="app.js"></script>
<script src='openvidu-webcomponent.js'></script>
<link rel="stylesheet" href="openvidu-webcomponent.css">
</head>
<body>
<!-- Form to connect to a video-session -->
<div id="main" style="text-align: center;">
<h1>Join a video session</h1>
<form onsubmit="joinSession(); return false" style="padding: 80px; margin: auto">
<p>
<label>Session:</label>
<input type="text" id="sessionId" value="SessionA" required>
<input type="text" id="sessionName" value="SessionA" required>
</p>
<p>
<label>User:</label>
@ -36,8 +32,9 @@
</form>
</div>
<openvidu-webcomponent id="session" style="display: none;"></openvidu-webcomponent>
<!-- OpenVidu Web Component -->
<openvidu-webcomponent style="display: none;"></openvidu-webcomponent>
</body>
</html>
</html>