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

app.js and README updated with more detailed comments

Browse Source
This commit is contained in:
pabloFuente 2017-06-14 09:56:09 +02:00
parent f4743f1f86
commit 52a220aaa8
3 changed files with 104 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
openvidu-insecure-js/README.md
View File

@ -72,25 +72,32 @@ Let's see how `app.js` uses `OpenVidu.js`:
- Let's initialize a new session and configure our events:
```javascript
// --- 1) Get an OpenVidu object and init a session with a sessionId ---
// OpenVidu listening on "localhost:8443"
OV = new OpenVidu("wss://" + location.hostname + ":8443/");
session = OV.initSession("apikey", sessionId);
// We will join the video-call "sessionId"
session = OV.initSession(sessionId);
```
Since we are in a local sample app, `OV` object is initialize with `localhost:8443` as its _openvidu-server_ URL. `session` object is initialize with `sessionId` param: this means we will connect to `sessionId` video-call. In this case, this parameter is retrieve from HTML input `<input type="text" id="sessionId" required>`, which may be filled by the user.
```javascript
// --- 2) Specify the actions when events take place ---
// On every new Stream received...
session.on('streamCreated', function (event) {
// Subscribe to the stream to receive it
// Subscribe to the Stream to receive it. HTML video will be appended to element with 'subscriber' id
var subscriber = session.subscribe(event.stream, 'subscriber');
// When the HTML video has been appended to DOM...
subscriber.on('videoElementCreated', function (event) {
// Add a new HTML element for the user's nickname
// Add a new <p> element for the user's nickname just below its video
appendUserData(event.element, subscriber.stream.connection);
});
});
session.on('streamDestroyed', function (event) {
// Delete the HTML element with the user's nickname
removeUserData(event.stream.connection);
});
```
Here we subscribe to the events that interest us. In this case, we want to receive all videos published to the video-call, as well as displaying every user's nickname nex to its video. To achieve this:
- `streamCreated`: for each new Stream received by OpenVidu, we immediately subscribe to it so we can see its video. A new HTML video element will be appended to element with id 'subscriber'.
@ -100,26 +107,31 @@ Let's see how `app.js` uses `OpenVidu.js`:
- Finally connect to the session and publish your webcam:
```javascript
// --- 3) Connect to the session ---
// 'token' param irrelevant when using insecure version of OpenVidu. Second param will be received by every user
// in Stream.connection.data property, which will be appended to DOM as the user's nickname
session.connect(token, '{"clientData": "' + token + '"}', function (error) {
// If the connection is successful, initialize a publisher and publish to the session
if (!error) {
// 4) Get your own camera stream with the desired resolution and publish it, if the user is supposed to do so
var publisher = OV.initPublisher('publisher', {
audio: true,
video: true,
quality: 'MEDIUM'
});
// 5) Publish your stream
session.publish(publisher);
} else {
console.log('There was an error connecting to the session:', error.code, error.message);
}
});
// If the connection is successful, initialize a publisher and publish to the session
if (!error) {
// --- 4) Get your own camera stream with the desired resolution and publish it ---
var publisher = OV.initPublisher('publisher', {
audio: true,
video: true,
quality: 'MEDIUM'
});
// --- 5) Publish your stream ---
session.publish(publisher);
} else {
console.log('There was an error connecting to the session:', error.code, error.message);
}
});
```
`token` param is irrelevant when using insecure version of OpenVidu. Remember `videoElementCreated` event, when we added the user's nickname to the HTML? Well, second parameter is the actual value you will receive in `Stream.connection.data` property. So in this case it is a JSON formatted string with a "clientData" tag with "token" value, which is retrieved from HTML input `<input type="text" id="participantId" required>` (filled by the user).

113
openvidu-insecure-js/web/OpenVidu.js
View File

File diff suppressed because one or more lines are too long

33
openvidu-insecure-js/web/app.js
View File

@ -49,36 +49,49 @@ function joinSession() {
var sessionId = document.getElementById("sessionId").value;
var token = document.getElementById("participantId").value;
// 1) Get an OpenVidu object and init a session with a sessionId
// --- 1) Get an OpenVidu object and init a session with a sessionId ---
// OpenVidu listening on "localhost:8443"
OV = new OpenVidu("wss://" + location.hostname + ":8443/");
session = OV.initSession("apikey", sessionId);
// We will join the video-call "sessionId"
session = OV.initSession(sessionId);
// 2) Specify the actions when events take place
// --- 2) Specify the actions when events take place ---
// On every new Stream received...
session.on('streamCreated', function (event) {
// Subscribe to the stream to receive it
// Subscribe to the Stream to receive it. HTML video will be appended to element with 'subscriber' id
var subscriber = session.subscribe(event.stream, 'subscriber');
// When the HTML video has been appended to DOM...
subscriber.on('videoElementCreated', function (event) {
// Add a new HTML element for the user's nickname
// Add a new <p> element for the user's nickname just below its video
appendUserData(event.element, subscriber.stream.connection);
});
});
// On every Stream destroyed...
session.on('streamDestroyed', function (event) {
// Delete the HTML element with the user's nickname
// Delete the HTML element with the user's nickname. HTML videos are automatically removed from DOM
removeUserData(event.stream.connection);
});
// 3) Connect to the session
// --- 3) Connect to the session ---
// 'token' param irrelevant when using insecure version of OpenVidu. Second param will be received by every user
// in Stream.connection.data property, which will be appended to DOM as the user's nickname
session.connect(token, '{"clientData": "' + token + '"}', function (error) {
// If the connection is successful, initialize a publisher and publish to the session
if (!error) {
// 4) Get your own camera stream with the desired resolution and publish it, if the user is supposed to do so
// --- 4) Get your own camera stream with the desired resolution and publish it ---
var publisher = OV.initPublisher('publisher', {
audio: true,
@ -86,7 +99,7 @@ function joinSession() {
quality: 'MEDIUM'
});
// 5) Publish your stream
// --- 5) Publish your stream ---
session.publish(publisher);
@ -108,7 +121,7 @@ function leaveSession() {
session.disconnect();
// Removing all HTML elements with the user's nicknames
// Removing all HTML elements with the user's nicknames. HTML videos are automatically removed when leaving a Session
removeAllUserData();
document.getElementById('join').style.display = 'block';