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

insecure-js and insecure-angular updated to support new security system

Browse Source
This commit is contained in:
pabloFuente 2017-08-31 17:07:13 +02:00
parent fff25b58da
commit 4fbf9a6a6e
6 changed files with 110 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
openvidu-insecure-angular/README.md
View File

@ -41,7 +41,7 @@ OpenVidu is composed by the three modules displayed on the image above in its in
4. _openvidu-server_ and _Kurento Media Server_ must be up and running in your development machine. The easiest way is running this Docker container which wraps both of them (you will need [Docker CE](https://store.docker.com/search?type=edition&offering=community)):
```bash
docker run -p 8443:8443 --rm -e KMS_STUN_IP=193.147.51.12 -e KMS_STUN_PORT=3478 -e openvidu.security=false openvidu/openvidu-server-kms
docker run -p 8443:8443 --rm -e KMS_STUN_IP=193.147.51.12 -e KMS_STUN_PORT=3478 openvidu/openvidu-server-kms
```
5. Go to [`localhost:4200`](http://localhost:4200) to test the app once the server is running. The first time you use the docker container, an alert message will suggest you accept the self-signed certificate of _openvidu-server_ when you first try to join a video-call.

3
openvidu-insecure-angular/src/app/app.component.ts
View File

@ -46,7 +46,8 @@ export class AppComponent {
// Init OpenVidu object
this.OV = new OpenVidu();
// We will join the video-call "sessionId". This parameter must start with the URL of OpenVidu Server
// We will join the video-call "sessionId". As there's no server, this parameter must start with the URL of
// OpenVidu Server (with secure websocket protocol: "wss://") and must include the OpenVidu secret at the end
this.session = this.OV.initSession('wss://' + location.hostname + ':8443/' + this.sessionId + '?secret=MY_SECRET');

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

@ -40,7 +40,7 @@ OpenVidu is composed by the three modules displayed on the image above in its in
4. _openvidu-server_ and _Kurento Media Server_ must be up and running in your development machine. The easiest way is running this Docker container which wraps both of them (you will need [Docker CE](https://store.docker.com/search?type=edition&offering=community)):
```bash
docker run -p 8443:8443 --rm -e KMS_STUN_IP=193.147.51.12 -e KMS_STUN_PORT=3478 -e openvidu.security=false openvidu/openvidu-server-kms
docker run -p 8443:8443 --rm -e KMS_STUN_IP=193.147.51.12 -e KMS_STUN_PORT=3478 openvidu/openvidu-server-kms
```
5. Go to [`localhost:8080`](http://localhost:8080) to test the app once the server is running. The first time you use the docker container, an alert message will suggest you accept the self-signed certificate of _openvidu-server_ when you first try to join a video-call.

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

@ -2,6 +2,107 @@ var OV;
var session;
/* OPENVIDU METHODS */
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 ---
// Init OpenVidu object
OV = new OpenVidu();
// We will join the video-call "sessionId". As there's no server, this parameter must start with the URL of
// OpenVidu Server (with secure websocket protocol: "wss://") and must include the OpenVidu secret at the end
session = OV.initSession("wss://" + location.hostname + ":8443/" + sessionId + '?secret=MY_SECRET');
// --- 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. HTML video will be appended to element with 'video-container' id
var subscriber = session.subscribe(event.stream, 'video-container');
// When the HTML video has been appended to DOM...
subscriber.on('videoElementCreated', function (event) {
// 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. HTML videos are automatically removed from DOM
removeUserData(event.stream.connection);
});
// --- 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 ---
var publisher = OV.initPublisher('video-container', {
audio: true,
video: true,
quality: 'MEDIUM'
});
// When our HTML video has been added to DOM...
publisher.on('videoElementCreated', function (event) {
initMainVideo(event.element, token);
appendUserData(event.element, token);
event.element['muted'] = true;
});
// --- 5) Publish your stream ---
session.publish(publisher);
} else {
console.log('There was an error connecting to the session:', error.code, error.message);
}
});
document.getElementById('session-title').innerText = sessionId;
document.getElementById('join').style.display = 'none';
document.getElementById('session').style.display = 'block';
return false;
}
function leaveSession() {
// --- 6) Leave the session by calling 'disconnect' method over the Session object ---
session.disconnect();
// Removing all HTML elements with the user's nicknames.
// HTML videos are automatically removed when leaving a Session
removeAllUserData();
// Back to 'Join session' page
document.getElementById('join').style.display = 'block';
document.getElementById('session').style.display = 'none';
}
/* OPENVIDU METHODS */
/* APPLICATION SPECIFIC METHODS */
window.addEventListener('load', function () {
@ -13,8 +114,8 @@ window.onbeforeunload = function () {
};
function generateParticipantInfo() {
$("#sessionId").val("SessionA");
$("#participantId").val("Participant" + Math.floor(Math.random() * 100));
document.getElementById("sessionId").value = "SessionA";
document.getElementById("participantId").value = "Participant" + Math.floor(Math.random() * 100);
}
function appendUserData(videoElement, connection) {
@ -61,106 +162,7 @@ function addClickListener(videoElement, userData) {
function initMainVideo(videoElement, userData) {
document.querySelector('#main-video video').src = videoElement.src;
document.querySelector('#main-video p').innerHTML = userData;
$('#main-video video').prop('muted', true);
document.querySelector('#main-video video')['muted'] = true;
}
/* APPLICATION SPECIFIC METHODS */
/* OPENVIDU METHODS */
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 ---
// Init OpenVidu object
OV = new OpenVidu();
// We will join the video-call "sessionId". This parameter must start with the URL of OpenVidu Server
session = OV.initSession("wss://" + location.hostname + ":8443/" + sessionId + '?secret=MY_SECRET');
// --- 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. HTML video will be appended to element with 'subscriber' id
var subscriber = session.subscribe(event.stream, 'video-container');
// When the HTML video has been appended to DOM...
subscriber.on('videoElementCreated', function (event) {
// 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. HTML videos are automatically removed from DOM
removeUserData(event.stream.connection);
});
// --- 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 ---
var publisher = OV.initPublisher('video-container', {
audio: true,
video: true,
quality: 'MEDIUM'
});
// When our HTML video has been added to DOM...
publisher.on('videoElementCreated', function (event) {
initMainVideo(event.element, token);
appendUserData(event.element, token);
$(event.element).prop('muted', true);
});
// --- 5) Publish your stream ---
session.publish(publisher);
} else {
console.log('There was an error connecting to the session:', error.code, error.message);
}
});
document.getElementById('session-title').innerText = sessionId;
document.getElementById('join').style.display = 'none';
document.getElementById('session').style.display = 'block';
return false;
}
function leaveSession() {
// --- 6) Leave the session by calling 'disconnect' method over the Session object ---
session.disconnect();
// Removing all HTML elements with the user's nicknames.
// HTML videos are automatically removed when leaving a Session
removeAllUserData();
// Back to 'Join session' page
document.getElementById('join').style.display = 'block';
document.getElementById('session').style.display = 'none';
}
/* OPENVIDU METHODS */
/* APPLICATION SPECIFIC METHODS */

2
openvidu-js-java/docker/supervisord.conf
View File

@ -10,7 +10,7 @@ redirect_stderr=true
priority=2
[program:openvidu-server]
command=/bin/bash -c "java -Dspring.profiles.active=ngrok -Dopenvidu.security=true -jar /openvidu-server.jar"
command=/bin/bash -c "java -Dspring.profiles.active=ngrok -jar /openvidu-server.jar"
redirect_stderr=true
priority=3

1
openvidu-js-java/src/main/resources/application-container.properties
View File

@ -5,5 +5,4 @@ server.ssl.enabled: false
openvidu.url: http://localhost:5000/
openvidu.secret: MY_SECRET
openvidu.security: true
openvidu.publicurl: ngrok