Comments udpated to match tutorials
This commit is contained in:
pabloFuente
parent
0c880a7538
commit
9a0d002ad3
@ -1,10 +1,11 @@
|
||||
var OV;
|
||||
var userName;
|
||||
var session;
|
||||
var sessionName;
|
||||
var participantName;
|
||||
|
||||
var sessionId;
|
||||
var token;
|
||||
var nickName;
|
||||
var userName;
|
||||
var sessionName;
|
||||
|
||||
|
||||
/* OPENVIDU METHODS */
|
||||
@ -30,7 +31,7 @@ function joinSession() {
|
||||
// When the HTML video has been appended to DOM...
|
||||
subscriber.on('videoElementCreated', function (event) {
|
||||
|
||||
// Add a new <p> element for the user's name and nickname just below its video
|
||||
// Add a new HTML element for the user's name and nickname over its video
|
||||
appendUserData(event.element, subscriber.stream.connection);
|
||||
});
|
||||
});
|
||||
@ -44,7 +45,7 @@ function joinSession() {
|
||||
// --- 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": "' + participantName + '"}', function (error) {
|
||||
session.connect(token, '{"clientData": "' + nickName + '"}', function (error) {
|
||||
|
||||
// If the connection is successful, initialize a publisher and publish to the session
|
||||
if (!error) {
|
||||
@ -66,7 +67,7 @@ function joinSession() {
|
||||
// When our HTML video has been added to DOM...
|
||||
publisher.on('videoElementCreated', function (event) {
|
||||
// Init the main video with ours and append our data
|
||||
var userData = {nickName: participantName, userName: userName};
|
||||
var userData = {nickName: nickName, userName: userName};
|
||||
initMainVideo(event.element, userData);
|
||||
appendUserData(event.element, userData);
|
||||
});
|
||||
@ -78,7 +79,7 @@ function joinSession() {
|
||||
|
||||
} else {
|
||||
console.warn('You don\'t have permissions to publish');
|
||||
initMainVideoThumbnail();
|
||||
initMainVideoThumbnail(); // Show SUBSCRIBER message in main video
|
||||
}
|
||||
} else {
|
||||
console.warn('There was an error connecting to the session:', error.code, error.message);
|
||||
@ -142,7 +143,7 @@ function logOut() {
|
||||
}
|
||||
|
||||
function getSessionIdAndToken(callback) {
|
||||
participantName = $("#participantName").val();
|
||||
nickName = $("#participantName").val();
|
||||
sessionName = $("#sessionName").val();
|
||||
var jsonBody = JSON.stringify({
|
||||
'session': sessionName
|
||||
|
||||
@ -42,15 +42,13 @@
|
||||
<div id="not-logged" class="horizontal-center">
|
||||
<form class="form-group jumbotron" onsubmit="return false">
|
||||
<p>
|
||||
<label>User</label>
|
||||
<input class="form-control" type="text" id="user" required>
|
||||
<label>User</label><input class="form-control" type="text" id="user" required>
|
||||
</p>
|
||||
<p>
|
||||
<label>Pass</label>
|
||||
<input class="form-control" type="password" id="pass" required>
|
||||
<label>Pass</label><input class="form-control" type="password" id="pass" required>
|
||||
</p>
|
||||
<p class="text-center">
|
||||
<button class="btn btn-lg btn-info" id="login-btn" onclick="logIn()">Log in</button>
|
||||
<button class="btn btn-lg btn-info" onclick="logIn()">Log in</button>
|
||||
</p>
|
||||
</form>
|
||||
<table class="table">
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
var OV;
|
||||
var userName;
|
||||
var session;
|
||||
var sessionName;
|
||||
var participantName;
|
||||
|
||||
var sessionId;
|
||||
var token;
|
||||
var nickName;
|
||||
var userName;
|
||||
var sessionName;
|
||||
|
||||
|
||||
/* OPENVIDU METHODS */
|
||||
@ -30,7 +31,7 @@ function joinSession() {
|
||||
// When the HTML video has been appended to DOM...
|
||||
subscriber.on('videoElementCreated', function (event) {
|
||||
|
||||
// Add a new <p> element for the user's name and nickname just below its video
|
||||
// Add a new HTML element for the user's name and nickname over its video
|
||||
appendUserData(event.element, subscriber.stream.connection);
|
||||
});
|
||||
});
|
||||
@ -44,7 +45,7 @@ function joinSession() {
|
||||
// --- 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": "' + participantName + '"}', function (error) {
|
||||
session.connect(token, '{"clientData": "' + nickName + '"}', function (error) {
|
||||
|
||||
// If the connection is successful, initialize a publisher and publish to the session
|
||||
if (!error) {
|
||||
@ -66,7 +67,7 @@ function joinSession() {
|
||||
// When our HTML video has been added to DOM...
|
||||
publisher.on('videoElementCreated', function (event) {
|
||||
// Init the main video with ours and append our data
|
||||
var userData = {nickName: participantName, userName: userName};
|
||||
var userData = {nickName: nickName, userName: userName};
|
||||
initMainVideo(event.element, userData);
|
||||
appendUserData(event.element, userData);
|
||||
});
|
||||
@ -78,7 +79,7 @@ function joinSession() {
|
||||
|
||||
} else {
|
||||
console.warn('You don\'t have permissions to publish');
|
||||
initMainVideoThumbnail();
|
||||
initMainVideoThumbnail(); // Show SUBSCRIBER message in main video
|
||||
}
|
||||
} else {
|
||||
console.warn('There was an error connecting to the session:', error.code, error.message);
|
||||
@ -142,7 +143,7 @@ function logOut() {
|
||||
}
|
||||
|
||||
function getSessionIdAndToken(callback) {
|
||||
participantName = $("#participantName").val();
|
||||
nickName = $("#participantName").val();
|
||||
sessionName = $("#sessionName").val();
|
||||
var jsonBody = JSON.stringify({
|
||||
'session': sessionName
|
||||
|
||||
@ -42,15 +42,13 @@
|
||||
<div id="not-logged" class="horizontal-center">
|
||||
<form class="form-group jumbotron" onsubmit="return false">
|
||||
<p>
|
||||
<label>User</label>
|
||||
<input class="form-control" type="text" id="user" required>
|
||||
<label>User</label><input class="form-control" type="text" id="user" required>
|
||||
</p>
|
||||
<p>
|
||||
<label>Pass</label>
|
||||
<input class="form-control" type="password" id="pass" required>
|
||||
<label>Pass</label><input class="form-control" type="password" id="pass" required>
|
||||
</p>
|
||||
<p class="text-center">
|
||||
<button class="btn btn-lg btn-info" id="login-btn" onclick="logIn()">Log in</button>
|
||||
<button class="btn btn-lg btn-info" onclick="logIn()">Log in</button>
|
||||
</p>
|
||||
</form>
|
||||
<table class="table">
|
||||
|
||||
@ -43,14 +43,14 @@
|
||||
<form class="form-group" action="/session" method="post">
|
||||
<p>
|
||||
<label>Participant</label>
|
||||
<input class="form-control" type="text" id="participantName" name="data" required="true"></input>
|
||||
<input class="form-control" type="text" name="data" required="true"></input>
|
||||
</p>
|
||||
<p>
|
||||
<label>Session</label>
|
||||
<input class="form-control" type="text" id="sessionName" name="session-name" required="true"></input>
|
||||
<input class="form-control" type="text" name="session-name" required="true"></input>
|
||||
</p>
|
||||
<p class="text-center">
|
||||
<button id="join-btn" class="btn btn-lg btn-success" type="submit">Join!</button>
|
||||
<button class="btn btn-lg btn-success" type="submit">Join!</button>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -41,14 +41,14 @@
|
||||
<form class="form-group jumbotron" action="/dashboard" method="post">
|
||||
<p>
|
||||
<label>User</label>
|
||||
<input class="form-control" type="text" id="user" name="user" required="true"></input>
|
||||
<input class="form-control" type="text" name="user" required="true"></input>
|
||||
</p>
|
||||
<p>
|
||||
<label>Pass</label>
|
||||
<input class="form-control" type="password" id="pass" name="pass" required="true"></input>
|
||||
<input class="form-control" type="password" name="pass" required="true"></input>
|
||||
</p>
|
||||
<p class="text-center">
|
||||
<button class="btn btn-lg btn-info" id="login-btn" type="submit">Log in</button>
|
||||
<button class="btn btn-lg btn-info" type="submit">Log in</button>
|
||||
</p>
|
||||
</form>
|
||||
<table class="table">
|
||||
|
||||
@ -38,7 +38,8 @@
|
||||
<form action="/leave-session" method="post">
|
||||
<input type="hidden" name="session-name" th:value="${sessionName}"></input>
|
||||
<input type="hidden" name="token" th:value="${token}"></input>
|
||||
<button id="buttonLeaveSession" class="btn btn-large btn-danger" type="submit" onclick="leaveSession()">Leave session</button>
|
||||
<button id="buttonLeaveSession" class="btn btn-large btn-danger" type="submit" onclick="leaveSession()">
|
||||
Leave session</button>
|
||||
</form>
|
||||
</div>
|
||||
<div id="main-video" class="col-md-6">
|
||||
@ -61,10 +62,11 @@
|
||||
</body>
|
||||
|
||||
<script th:inline="javascript">
|
||||
|
||||
|
||||
// Get all the attributes from the template in Thymeleaf style
|
||||
var sessionId = [[${sessionId}]];
|
||||
var token = [[${token}]];
|
||||
var participantName = [[${nickName}]];
|
||||
var nickName = [[${nickName}]];
|
||||
var userName = [[${userName}]];
|
||||
var sessionName = [[${sessionName}]];
|
||||
|
||||
@ -89,7 +91,7 @@
|
||||
// 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
|
||||
// Add a new HTML element for the user's name and nickname over its video
|
||||
appendUserData(event.element, subscriber.stream.connection);
|
||||
});
|
||||
});
|
||||
@ -100,13 +102,18 @@
|
||||
removeUserData(event.stream.connection);
|
||||
});
|
||||
|
||||
// 3) Connect to the session
|
||||
session.connect(token, '{"clientData": "' + participantName + '"}', function (error) {
|
||||
|
||||
// If the connection is successful
|
||||
// --- 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 + '"}', function (error) {
|
||||
|
||||
// If the connection is successful, initialize a publisher and publish to the session
|
||||
if (!error) {
|
||||
|
||||
// If the user has enough permissions
|
||||
// Here we check somehow if the user has at least '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
|
||||
if (isPublisher()) {
|
||||
|
||||
// --- 4) Get your own camera stream ---
|
||||
@ -120,7 +127,7 @@
|
||||
// When our HTML video has been added to DOM...
|
||||
publisher.on('videoElementCreated', function (event) {
|
||||
// Init the main video with ours and append our data
|
||||
var userData = {nickName: participantName, userName: userName};
|
||||
var userData = {nickName: nickName, userName: userName};
|
||||
initMainVideo(event.element, userData);
|
||||
appendUserData(event.element, userData);
|
||||
});
|
||||
@ -132,7 +139,7 @@
|
||||
|
||||
} else {
|
||||
console.warn('You don\'t have permissions to publish');
|
||||
initMainVideoThumbnail();
|
||||
initMainVideoThumbnail(); // Show SUBSCRIBER message in main video
|
||||
}
|
||||
} else {
|
||||
console.warn('There was an error connecting to the session:', error.code, error.message);
|
||||
|
||||
@ -43,14 +43,14 @@
|
||||
<form class="form-group" action="/session" method="post">
|
||||
<p>
|
||||
<label>Participant</label>
|
||||
<input class="form-control" type="text" id="participantName" name="data" required="true"></input>
|
||||
<input class="form-control" type="text" name="data" required="true"></input>
|
||||
</p>
|
||||
<p>
|
||||
<label>Session</label>
|
||||
<input class="form-control" type="text" id="sessionName" name="sessionname" required="true"></input>
|
||||
<input class="form-control" type="text" name="sessionname" required="true"></input>
|
||||
</p>
|
||||
<p class="text-center">
|
||||
<button id="join-btn" class="btn btn-lg btn-success" type="submit">Join!</button>
|
||||
<button class="btn btn-lg btn-success" type="submit">Join!</button>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -41,14 +41,14 @@
|
||||
<form class="form-group jumbotron" action="/dashboard" method="post">
|
||||
<p>
|
||||
<label>User</label>
|
||||
<input class="form-control" type="text" id="user" name="user" required="true"></input>
|
||||
<input class="form-control" type="text" name="user" required="true"></input>
|
||||
</p>
|
||||
<p>
|
||||
<label>Pass</label>
|
||||
<input class="form-control" type="password" id="pass" name="pass" required="true"></input>
|
||||
<input class="form-control" type="password" name="pass" required="true"></input>
|
||||
</p>
|
||||
<p class="text-center">
|
||||
<button class="btn btn-lg btn-info" id="login-btn" type="submit">Log in</button>
|
||||
<button class="btn btn-lg btn-info" type="submit">Log in</button>
|
||||
</p>
|
||||
</form>
|
||||
<table class="table">
|
||||
|
||||
@ -38,7 +38,8 @@
|
||||
<form action="/leave-session" method="post">
|
||||
<input style="display:none" name="sessionname" value="<%= sessionName %>"></input>
|
||||
<input style="display:none" name="token" value="<%= token %>"></input>
|
||||
<button id="buttonLeaveSession" class="btn btn-large btn-danger" type="submit" onclick="leaveSession()">Leave session</button>
|
||||
<button id="buttonLeaveSession" class="btn btn-large btn-danger" type="submit" onclick="leaveSession()">
|
||||
Leave session</button>
|
||||
</form>
|
||||
</div>
|
||||
<div id="main-video" class="col-md-6">
|
||||
@ -61,9 +62,10 @@
|
||||
</body>
|
||||
|
||||
<script>
|
||||
// Get all the attributes from the template in EJS style
|
||||
var sessionId = <%- JSON.stringify(sessionId) %>;
|
||||
var token = <%- JSON.stringify(token) %>;
|
||||
var participantName = <%- JSON.stringify(nickName) %>;
|
||||
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:' +
|
||||
@ -99,16 +101,21 @@
|
||||
});
|
||||
|
||||
|
||||
// 3) Connect to the session
|
||||
session.connect(token, '{"clientData": "' + participantName + '"}', function (error) {
|
||||
// --- 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 + '"}', function (error) {
|
||||
|
||||
// If the connection is successful
|
||||
// If the connection is successful, initialize a publisher and publish to the session
|
||||
if (!error) {
|
||||
|
||||
// If the user has enough permissions
|
||||
// Here we check somehow if the user has at least '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
|
||||
if (isPublisher(userName)) {
|
||||
|
||||
// 4) Get your own camera stream with the desired resolution and publish it, only if the user is supposed to do so
|
||||
// --- 4) Get your own camera stream ---
|
||||
|
||||
var publisher = OV.initPublisher('video-container', {
|
||||
audio: true,
|
||||
video: true,
|
||||
@ -118,17 +125,19 @@
|
||||
// When our HTML video has been added to DOM...
|
||||
publisher.on('videoElementCreated', function (event) {
|
||||
// Init the main video with ours and append our data
|
||||
var userData = {nickName: participantName, userName: userName};
|
||||
var userData = {nickName: nickName, userName: userName};
|
||||
initMainVideo(event.element, userData);
|
||||
appendUserData(event.element, userData);
|
||||
});
|
||||
|
||||
// 5) Publish your stream
|
||||
|
||||
// --- 5) Publish your stream ---
|
||||
|
||||
session.publish(publisher);
|
||||
|
||||
} else {
|
||||
console.warn('You don\'t have permissions to publish');
|
||||
initMainVideoThumbnail();
|
||||
initMainVideoThumbnail(); // Show SUBSCRIBER message in main video
|
||||
}
|
||||
} else {
|
||||
console.warn('There was an error connecting to the session:', error.code, error.message);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user