Updated webcomponent version to 2.14.0

openvidu-webcomponent/README.md

@@ -8,6 +8,37 @@
 openvidu-webcomponent
 ===
 
-Visit [openvidu.io/docs/tutorials/openvidu-webcomponent/](http://openvidu.io/docs/tutorials/openvidu-webcomponent/)
+Visit [docs.openvidu.io/en/stable/tutorials/openvidu-webcomponent/](http://docs.openvidu.io/en/stable/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 <your-path>/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
+```

openvidu-webcomponent/web/app.js

@@ -7,36 +7,68 @@ $(document).ready(() => {
         webComponent.style.display = 'block';
     }
 
-    webComponent.addEventListener('joinSession', (event) => {});
-    webComponent.addEventListener('leaveSession', (event) => {
-        form.style.display = 'block';
-        webComponent.style.display = 'none';
+    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('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);
     });
 });
 
-function joinSession() {
+async 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 {
-        getToken(sessionName).then((token1) => {
-            tokens.push(token1);
-            getToken(sessionName).then((token2) => {
-                tokens.push(token2);
-                webComponent.sessionConfig = { sessionName, user, tokens };
-            });    
-        });
+        var token1 = await getToken(sessionName)
+        var token2 = await getToken(sessionName);
+        tokens.push(token1, token2);
+        webComponent.sessionConfig = { sessionName, user, tokens };
     }
 }
 
@@ -59,7 +91,7 @@ function getToken(sessionName) {
     return createSession(sessionName).then((sessionId) => createToken(sessionId));
 }
 
-function createSession(sessionName) { // See https://openvidu.io/docs/reference-docs/REST-API/#post-apisessions
+function createSession(sessionName) { // See https://docs.openvidu.io/en/stable/reference-docs/REST-API/#post-apisessions
     return new Promise((resolve, reject) => {
         $.ajax({
             type: 'POST',
@@ -94,7 +126,7 @@ function createSession(sessionName) { // See https://openvidu.io/docs/reference-
 }
 
 function createToken(sessionId) {
-    // See https://openvidu.io/docs/reference-docs/REST-API/#post-apitokens
+    // See https://docs.openvidu.io/en/stable/reference-docs/REST-API/#post-apitokens
     return new Promise((resolve, reject) => {
         $.ajax({
             type: 'POST',

openvidu-webcomponent/web/index.html

@@ -33,7 +33,7 @@
     </div>
 
     <!-- OpenVidu Web Component -->
-    <openvidu-webcomponent style="display: none;"></openvidu-webcomponent>
+    <openvidu-webcomponent style="display: none"></openvidu-webcomponent>
 
 </body>