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

openvidu-mvc-node update to 2.0.0

Browse Source
This commit is contained in:
pabloFuente 2018-05-10 11:01:39 +02:00
parent c366ecb1b9
commit 865ce3e42f
6 changed files with 10450 additions and 15305 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
openvidu-mvc-java/src/main/resources/templates/session.html
View File

@ -172,7 +172,7 @@
function leaveSession() {
// --- 6) Leave the session by calling 'disconnect' method over the Session object ---
// --- 9) Leave the session by calling 'disconnect' method over the Session object ---
session.disconnect();
}

10
openvidu-mvc-node/package.json
View File

@ -17,10 +17,10 @@
},
"homepage": "https://github.com/OpenVidu/openvidu-tutorials#readme",
"dependencies": {
"body-parser": "^1.17.2",
"ejs": "^2.5.6",
"express": "^4.15.3",
"express-session": "^1.15.3",
"openvidu-node-client": "1.7.0"
"body-parser": "1.18.2",
"ejs": "2.6.1",
"express": "4.16.3",
"express-session": "1.15.6",
"openvidu-node-client": "2.0.0"
}
}

15134
openvidu-mvc-node/public/openvidu-browser-1.8.0.js
View File

File diff suppressed because one or more lines are too long

10273
openvidu-mvc-node/public/openvidu-browser-2.0.0.js Normal file
View File

File diff suppressed because one or more lines are too long

218
openvidu-mvc-node/server.js
View File

@ -64,13 +64,13 @@ var OPENVIDU_URL = process.argv[2];
// Environment variable: secret shared with our OpenVidu server
var OPENVIDU_SECRET = process.argv[3];
// OpenVidu object to ask openvidu-server for sessionId and token
// Entrypoint to OpenVidu Node Client SDK
var OV = new OpenVidu(OPENVIDU_URL, OPENVIDU_SECRET);
// Collection to pair session names and OpenVidu Session objects
var mapSessionNameSession = {};
// Collection to pair sessionId's (identifiers of Session objects) and tokens
var mapSessionIdTokens = {};
// Collection to pair session names with OpenVidu Session objects
var mapSessions = {};
// Collection to pair session names with tokens
var mapSessionNamesTokens = {};
console.log("App listening on port 5000");
@ -103,36 +103,36 @@ app.get('/dashboard', dashboardController);
function dashboardController(req, res) {
// Check if the user is already logged in
if (isLogged(req.session)) {
// User is already logged. Immediately return dashboard
user = req.session.loggedUser;
res.render('dashboard.ejs', {
user: user
});
} else {
// User wasn't logged and wants to
// Retrieve params from POST body
var user = req.body.user;
// Check if the user is already logged in
if (isLogged(req.session)) {
// User is already logged. Immediately return dashboard
user = req.session.loggedUser;
res.render('dashboard.ejs', {
user: user
});
} else {
// User wasn't logged and wants to
// Retrieve params from POST body
var user = req.body.user;
var pass = req.body.pass;
console.log("Logging in | {user, pass}={" + user + ", " + pass + "}");
if (login(user, pass)) { // Correct user-pass
// Validate session and return OK
if (login(user, pass)) { // Correct user-pass
// Validate session and return OK
// Value stored in req.session allows us to identify the user in future requests
console.log("'" + user + "' has logged in");
req.session.loggedUser = user;
res.render('dashboard.ejs', {
user: user
});
} else { // Wrong user-pass
req.session.loggedUser = user;
res.render('dashboard.ejs', {
user: user
});
} else { // Wrong user-pass
// Invalidate session and return index template
console.log("'" + user + "' invalid credentials");
req.session.destroy();
res.redirect('/');
}
}
req.session.destroy();
res.redirect('/');
}
}
}
app.post('/session', (req, res) => {
@ -140,9 +140,9 @@ app.post('/session', (req, res) => {
req.session.destroy();
res.redirect('/');
} else {
// The nickname sent by the client
// The nickname sent by the client
var clientData = req.body.data;
// The video-call to connect ("TUTORIAL")
// The video-call to connect
var sessionName = req.body.sessionname;
// Role associated to this user
@ -150,77 +150,76 @@ app.post('/session', (req, res) => {
// Optional data to be passed to other users when this user connects to the video-call
// In this case, a JSON with the value we stored in the req.session object on login
var serverData = '{"serverData": "' + req.session.loggedUser + '"}';
console.log("Getting sessionId and token | {sessionName}={" + sessionName + "}");
var serverData = JSON.stringify({ serverData: req.session.loggedUser });
console.log("Getting a token | {sessionName}={" + sessionName + "}");
// Build tokenOptions object with the serverData and the role
var tokenOptions = new TokenOptions.Builder()
.data(serverData)
.role(role)
.build();
var tokenOptions = {
data: serverData,
role: role
};
if (mapSessionNameSession[sessionName]) {
// Session already exists: return existing sessionId and a new token
if (mapSessions[sessionName]) {
// Session already exists
console.log('Existing session ' + sessionName);
// Get the existing Session from the collection
var mySession = mapSessionNameSession[sessionName];
var mySession = mapSessions[sessionName];
// Generate a new token asynchronously with the recently created tokenOptions
mySession.generateToken(tokenOptions, function (token) {
// Get the existing sessionId
mySession.getSessionId(function (sessionId) {
mySession.generateToken(tokenOptions)
.then(token => {
// Store the new token in the collection of tokens
mapSessionIdTokens[sessionId].push(token);
mapSessionNamesTokens[sessionName].push(token);
// Return session template with all the needed attributes
console.log('SESSIONID: ' + sessionId);
console.log('TOKEN: ' + token);
res.render('session.ejs', {
sessionId: sessionId,
sessionId: mySession.getSessionId(),
token: token,
nickName: clientData,
userName: req.session.loggedUser,
sessionName: sessionName
});
})
.catch(error => {
console.error(error);
});
});
} else { // New session: return a new sessionId and a new token
} else {
// New session
console.log('New session ' + sessionName);
// Create a new OpenVidu Session
var mySession = OV.createSession();
// Get the sessionId asynchronously
mySession.getSessionId(function (sessionId) {
// Store the new Session in the collection of Sessions
mapSessionNameSession[sessionName] = mySession;
// Store a new empty array in the collection of tokens
mapSessionIdTokens[sessionId] = [];
// Generate a new token asynchronously with the recently created tokenOptions
mySession.generateToken(tokenOptions, function (token) {
// Store the new token in the collection of tokens
mapSessionIdTokens[sessionId].push(token);
console.log('SESSIONID: ' + sessionId);
console.log('TOKEN: ' + token);
// Create a new OpenVidu Session asynchronously
OV.createSession()
.then(session => {
// Store the new Session in the collection of Sessions
mapSessions[sessionName] = session;
// Store a new empty array in the collection of tokens
mapSessionNamesTokens[sessionName] = [];
// Return session template with all the needed attributes
res.render('session.ejs', {
sessionId: sessionId,
token: token,
nickName: clientData,
userName: req.session.loggedUser,
sessionName: sessionName
});
// Generate a new token asynchronously with the recently created tokenOptions
session.generateToken(tokenOptions)
.then(token => {
// Store the new token in the collection of tokens
mapSessionNamesTokens[sessionName].push(token);
// Return session template with all the needed attributes
res.render('session.ejs', {
sessionName: sessionName,
token: token,
nickName: clientData,
userName: req.session.loggedUser,
});
})
.catch(error => {
console.error(error);
});
})
.catch(error => {
console.error(error);
});
});
}
}
});
@ -234,41 +233,32 @@ app.post('/leave-session', (req, res) => {
var sessionName = req.body.sessionname;
var token = req.body.token;
console.log('Removing user | {sessionName, token}={' + sessionName + ', ' + token + '}');
// If the session exists
var mySession = mapSessionNameSession[sessionName];
if (mySession) {
mySession.getSessionId(function (sessionId) {
var tokens = mapSessionIdTokens[sessionId];
if (tokens) {
var index = tokens.indexOf(token);
// If the token exists
if (index !== -1) {
// Token removed!
tokens.splice(index, 1);
console.log(sessionName + ': ' + mapSessionIdTokens[sessionId].toString());
} else {
var msg = 'Problems in the app server: the TOKEN wasn\'t valid';
console.log(msg);
res.redirect('/dashboard');
}
if (mapSessionIdTokens[sessionId].length == 0) {
// Last user left: session must be removed
console.log(sessionName + ' empty!');
delete mapSessionNameSession[sessionName];
}
res.redirect('/dashboard');
} else {
var msg = 'Problems in the app server: the SESSIONID wasn\'t valid';
console.log(msg);
res.redirect('/dashboard');
}
});
if (mapSessions[sessionName] && mapSessionNamesTokens[sessionName]) {
var tokens = mapSessionNamesTokens[sessionName];
var index = tokens.indexOf(token);
// If the token exists
if (index !== -1) {
// Token removed
tokens.splice(index, 1);
console.log(sessionName + ': ' + tokens.toString());
} else {
var msg = 'Problems in the app server: the TOKEN wasn\'t valid';
console.log(msg);
res.redirect('/dashboard');
}
if (tokens.length == 0) {
// Last user left: session must be removed
console.log(sessionName + ' empty!');
delete mapSessions[sessionName];
}
res.redirect('/dashboard');
} else {
var msg = 'Problems in the app server: the SESSION does not exist';
console.log(msg);
res.redirect('/dashboard');
res.status(500).send(msg);
}
}
});

118
openvidu-mvc-node/views/session.ejs
View File

@ -7,17 +7,14 @@
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"></link>
<!-- Bootstrap -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"></link>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"></link>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></link>
<!-- Bootstrap -->
<link rel="styleSheet" href="style.css" type="text/css" media="screen"></link>
<script src="openvidu-browser-1.8.0.js"></script>
<script src="openvidu-browser-2.0.0.js"></script>
</head>
<body>
@ -25,10 +22,15 @@
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/"><img class="demo-logo" src="images/openvidu_vert_white_bg_trans_cropped.png"/> MVC Node</a>
<a class="navbar-brand" href="/">
<img class="demo-logo" src="images/openvidu_vert_white_bg_trans_cropped.png" /> MVC Node</a>
<a class="navbar-brand nav-icon" href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-mvc-node" title="GitHub Repository"
target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
<a class="navbar-brand nav-icon" href="http://www.openvidu.io/docs/tutorials/openvidu-mvc-node/" title="Documentation" target="_blank"><i class="fa fa-book" aria-hidden="true"></i></a>
target="_blank">
<i class="fa fa-github" aria-hidden="true"></i>
</a>
<a class="navbar-brand nav-icon" href="http://www.openvidu.io/docs/tutorials/openvidu-mvc-node/" title="Documentation" target="_blank">
<i class="fa fa-book" aria-hidden="true"></i>
</a>
</div>
</div>
</nav>
@ -58,7 +60,9 @@
<footer class="footer">
<div class="container">
<div class="text-muted">OpenVidu © 2017</div>
<a href="http://www.openvidu.io/" target="_blank"><img class="openvidu-logo" src="images/openvidu_globe_bg_transp_cropped.png"/></a>
<a href="http://www.openvidu.io/" target="_blank">
<img class="openvidu-logo" src="images/openvidu_globe_bg_transp_cropped.png" />
</a>
</div>
</footer>
@ -66,71 +70,80 @@
<script>
// Get all the attributes from the template in EJS style
var sessionId = <%- JSON.stringify(sessionId) %>;
var sessionName = <%- JSON.stringify(sessionName) %>;
var token = <%- JSON.stringify(token) %>;
var nickName = <%- JSON.stringify(nickName) %>;
var userName = <%- JSON.stringify(userName) %>;
var sessionName = <%- JSON.stringify(sessionName) %>;
console.warn('Request of SESSIONID and TOKEN gone WELL (SESSIONID:' +
sessionId + ", TOKEN:" + token + ")");
// --- 1) Get an OpenVidu object and init a session with the retrieved sessionId ---
console.warn('Request of TOKEN gone WELL (TOKEN:' + token + ')');
var OV = new OpenVidu();
var session = OV.initSession(sessionId);
// --- 1) Get an OpenVidu object ---
OV = new OpenVidu();
// --- 2) Specify the actions when events take place ---
// --- 2) Init a session ---
session = OV.initSession();
// --- 3) Specify the actions when events take place in the session ---
// On every new Stream received...
session.on('streamCreated', function (event) {
session.on('streamCreated', (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 HTML element for the user's name and nickname just below its video
subscriber.on('videoElementCreated', (event) => {
// Add a new HTML element for the user's name and nickname over its video
appendUserData(event.element, subscriber.stream.connection);
});
});
// On every Stream destroyed...
session.on('streamDestroyed', function (event) {
session.on('streamDestroyed', (event) => {
// Delete the HTML element with the user's name and nickname
removeUserData(event.stream.connection);
});
// --- 4) Connect to the session passing the retrieved token and some more data from
// the client (in this case a JSON with the nickname chosen by the user) ---
// --- 3) Connect to the session passing the retrieved token and some more data from
// the client (in this case a JSON with the nickname chosen by the user) ---
session.connect(token, { clientData: nickName })
.then(() => {
session.connect(token, '{"clientData": "' + nickName + '"}', function (error) {
// --- 5) Set page layout for active call ---
// If the connection is successful, initialize a publisher and publish to the session
if (!error) {
$('#session-title').text(sessionName);
$('#join').hide();
$('#session').show();
// Here we check somehow if the user has at least 'PUBLISHER' role before
// Here we check somehow if the user has 'PUBLISHER' role before
// trying to publish its stream. Even if someone modified the client's code and
// published the stream, it wouldn't work if the token sent in Session.connect
// method doesn't belong to a 'PUBLIHSER' role
// method is not recognized as 'PUBLIHSER' role by OpenVidu Server
if (isPublisher()) {
// --- 4) Get your own camera stream ---
// --- 6) Get your own camera stream ---
var publisher = OV.initPublisher('video-container', {
audio: true, // Whether you want to transmit audio or not
video: true, // Whether you want to transmit video or not
audioActive: true, // Whether you want to start the publishing with your audio unmuted or muted
videoActive: true, // Whether you want to start the publishing with your video enabled or disabled
quality: 'MEDIUM', // The quality of your video ('LOW', 'MEDIUM', 'HIGH')
screen: false // true to get your screen as video source instead of your camera
audioSource: undefined, // The source of audio. If undefined default microphone
videoSource: undefined, // The source of video. If undefined default webcam
publishAudio: true, // Whether you want to start publishing with your audio unmuted or not
publishVideo: true, // Whether you want to start publishing with your video enabled or not
resolution: '640x480', // The resolution of your video
frameRate: 30, // The frame rate of your video
insertMode: 'APPEND', // How the video is inserted in the target element 'video-container'
mirror: false // Whether to mirror your local video or not
});
// --- 7) Specify the actions when events take place in our publisher ---
// When our HTML video has been added to DOM...
publisher.on('videoElementCreated', function (event) {
publisher.on('videoElementCreated', (event) => {
// Init the main video with ours and append our data
var userData = {
nickName: nickName,
@ -142,23 +155,23 @@
});
// --- 5) Publish your stream ---
// --- 8) Publish your stream ---
session.publish(publisher);
} else {
console.warn('You don\'t have permissions to publish');
initMainVideoThumbnail(); // Show SUBSCRIBER message in main video
}
} else {
})
.catch(error => {
console.warn('There was an error connecting to the session:', error.code, error.message);
}
});
});
function leaveSession() {
// --- 6) Leave the session by calling 'disconnect' method over the Session object ---
// --- 9) Leave the session by calling 'disconnect' method over the Session object ---
session.disconnect();
}
@ -206,9 +219,12 @@
videoElement.addEventListener('click', function () {
var mainVideo = $('#main-video video').get(0);
if (mainVideo.srcObject !== videoElement.srcObject) {
$('#main-video p.nickName').html(clientData);
$('#main-video p.userName').html(serverData);
mainVideo.srcObject = videoElement.srcObject;
$('#main-video').fadeOut("fast", () => {
$('#main-video p.nickName').html(clientData);
$('#main-video p.userName').html(serverData);
mainVideo.srcObject = videoElement.srcObject;
$('#main-video').fadeIn("fast");
});
}
});
}