From a466ce3e39c9eebe5d84d1f7de9beda51c09bf2a Mon Sep 17 00:00:00 2001 From: csantosm <4a.santos@gmail.com> Date: Fri, 24 Apr 2020 11:42:59 +0200 Subject: [PATCH] openvidu-webcomponent: Fixed with webcomponent v2.12.0 --- openvidu-webcomponent/README.md | 33 +------------ openvidu-webcomponent/web/app.js | 72 ++++++++-------------------- openvidu-webcomponent/web/index.html | 2 +- 3 files changed, 22 insertions(+), 85 deletions(-) diff --git a/openvidu-webcomponent/README.md b/openvidu-webcomponent/README.md index 5b317d56..e765c347 100644 --- a/openvidu-webcomponent/README.md +++ b/openvidu-webcomponent/README.md @@ -8,37 +8,6 @@ openvidu-webcomponent === -Visit [docs.openvidu.io/en/stable/tutorials/openvidu-webcomponent/](http://docs.openvidu.io/en/stable/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 - - -### How to build it - -First of all, the webcomponent is built from openvidu-call so you must to clone this repository first: - -```bash -$ git clone https://github.com/OpenVidu/openvidu-call.git -``` -And also clone openvidu-tutorials in the same path with: - -```bash -$ git clone https://github.com/OpenVidu/openvidu-tutorials.git -``` - -Once done, you will ned to go to the angular project with: - -```bash -$ cd /openvidu-call/front/openvidu-call/ -``` -Install npm dependencies with: - -```bash -$ npm install -``` - -After that, the following command will generate the necessary artefacts and it'll copy them automatically into the openvidu-webcomponent tutorial: - -```bash -$ npm run build:openvidu-webcomponent -``` diff --git a/openvidu-webcomponent/web/app.js b/openvidu-webcomponent/web/app.js index 7ce948c0..372094df 100644 --- a/openvidu-webcomponent/web/app.js +++ b/openvidu-webcomponent/web/app.js @@ -7,68 +7,36 @@ $(document).ready(() => { webComponent.style.display = 'block'; } - webComponent.addEventListener('sessionCreated', (event) => { - var session = event.detail; - - // You can see the session documentation here - // https://docs.openvidu.io/en/stable/api/openvidu-browser/classes/session.html - - session.on('connectionCreated', (e) => { - console.log("connectionCreated", e); - }); - - session.on('streamDestroyed', (e) => { - console.log("streamDestroyed", e); - }); - - session.on('streamCreated', (e) => { - console.log("streamCreated", e); - }); - - session.on('sessionDisconnected', (event) => { - console.warn("sessionDisconnected event"); - document.body.style.backgroundColor = "white"; - form.style.display = 'block'; - webComponent.style.display = 'none'; - }); + webComponent.addEventListener('joinSession', (event) => {}); + webComponent.addEventListener('leaveSession', (event) => { + form.style.display = 'block'; + webComponent.style.display = 'none'; }); - - webComponent.addEventListener('publisherCreated', (event) => { - var publisher = event.detail; - - // You can see the publisher documentation here - // https://docs.openvidu.io/en/stable/api/openvidu-browser/classes/publisher.html - - publisher.on('streamCreated', (e) => { - console.warn("Publisher streamCreated", e); - }); - - publisher.on('streamPlaying', (e) => { - document.body.style.backgroundColor = "gray"; - form.style.display = 'none'; - webComponent.style.display = 'block'; - }); - }); - - webComponent.addEventListener('error', (event) => { console.log('Error event', event.detail); }); }); -async function joinSession() { +function joinSession() { var sessionName = document.getElementById('sessionName').value; var user = document.getElementById('user').value; + var form = document.getElementById('main'); var webComponent = document.querySelector('openvidu-webcomponent'); var tokens = []; + form.style.display = 'none'; + webComponent.style.display = 'block'; + if(webComponent.getAttribute("openvidu-secret") != undefined && webComponent.getAttribute("openvidu-server-url") != undefined ){ - location.reload(); + location.reload(); }else { - var token1 = await getToken(sessionName) - var token2 = await getToken(sessionName); - tokens.push(token1, token2); - webComponent.sessionConfig = { sessionName, user, tokens }; + getToken(sessionName).then((token1) => { + tokens.push(token1); + getToken(sessionName).then((token2) => { + tokens.push(token2); + webComponent.sessionConfig = { sessionName, user, tokens }; + }); + }); } } @@ -84,14 +52,14 @@ async function joinSession() { * 3) Configure OpenVidu Web Component in your client side with the token */ -var OPENVIDU_SERVER_URL = "https://localhost:4443" ; +var OPENVIDU_SERVER_URL = "https://" + location.hostname + ":4443; var OPENVIDU_SERVER_SECRET = 'MY_SECRET'; function getToken(sessionName) { return createSession(sessionName).then((sessionId) => createToken(sessionId)); } -function createSession(sessionName) { // See https://docs.openvidu.io/en/stable/reference-docs/REST-API/#post-apisessions +function createSession(sessionName) { // See https://openvidu.io/docs/reference-docs/REST-API/#post-apisessions return new Promise((resolve, reject) => { $.ajax({ type: 'POST', @@ -126,7 +94,7 @@ function createSession(sessionName) { // See https://docs.openvidu.io/en/stable/ } function createToken(sessionId) { - // See https://docs.openvidu.io/en/stable/reference-docs/REST-API/#post-apitokens + // See https://openvidu.io/docs/reference-docs/REST-API/#post-apitokens return new Promise((resolve, reject) => { $.ajax({ type: 'POST', diff --git a/openvidu-webcomponent/web/index.html b/openvidu-webcomponent/web/index.html index d4e5b00a..e5545b96 100644 --- a/openvidu-webcomponent/web/index.html +++ b/openvidu-webcomponent/web/index.html @@ -33,7 +33,7 @@ - +