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

openvidu-webcomponent: Fixed with webcomponent v2.12.0

Browse Source
This commit is contained in:
csantosm 2020-04-24 11:42:59 +02:00
parent 07065b03bd
commit a466ce3e39
3 changed files with 22 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
openvidu-webcomponent/README.md
View File

@ -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 <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
```

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

@ -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',

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

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