225 lines
7.8 KiB
HTML
225 lines
7.8 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<title>openvidu-mvc-java</title>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8"></meta>
|
|
<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>
|
|
<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.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<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 Java</a>
|
|
<a class="navbar-brand nav-icon" href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-mvc-java" 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-java/" title="Documentation" target="_blank"><i class="fa fa-book" aria-hidden="true"></i></a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div id="main-container" class="container">
|
|
<div id="logged">
|
|
<div id="session">
|
|
<div id="session-header">
|
|
<h1 th:text="${sessionName}" id="session-title"></h1>
|
|
<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>
|
|
</form>
|
|
</div>
|
|
<div id="main-video" class="col-md-6">
|
|
<p class="nickName"></p>
|
|
<p class="userName"></p>
|
|
<video autoplay="true" src=""></video>
|
|
</div>
|
|
<div id="video-container" class="col-md-6"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
</div>
|
|
</footer>
|
|
|
|
</body>
|
|
|
|
<script th:inline="javascript">
|
|
|
|
// Get all the attributes from the template in Thymeleaf style
|
|
var sessionId = [[${sessionId}]];
|
|
var token = [[${token}]];
|
|
var nickName = [[${nickName}]];
|
|
var userName = [[${userName}]];
|
|
var sessionName = [[${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 ---
|
|
|
|
var OV = new OpenVidu();
|
|
var session = OV.initSession(sessionId);
|
|
|
|
|
|
// --- 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 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) {
|
|
// Delete the HTML element with the user's name and nickname
|
|
removeUserData(event.stream.connection);
|
|
});
|
|
|
|
|
|
// --- 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) {
|
|
|
|
// 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 ---
|
|
|
|
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) {
|
|
// Init the main video with ours and append our data
|
|
var userData = {nickName: nickName, userName: userName};
|
|
initMainVideo(event.element, userData);
|
|
appendUserData(event.element, userData);
|
|
});
|
|
|
|
|
|
// --- 5) Publish your stream ---
|
|
|
|
session.publish(publisher);
|
|
|
|
} else {
|
|
console.warn('You don\'t have permissions to publish');
|
|
initMainVideoThumbnail(); // Show SUBSCRIBER message in main video
|
|
}
|
|
} else {
|
|
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 ---
|
|
session.disconnect();
|
|
}
|
|
|
|
function appendUserData(videoElement, connection) {
|
|
var clientData;
|
|
var serverData;
|
|
var nodeId;
|
|
if (connection.nickName) { // Appending local video data
|
|
clientData = connection.nickName;
|
|
serverData = connection.userName;
|
|
nodeId = 'main-videodata';
|
|
} else {
|
|
clientData = JSON.parse(connection.data.split('%/%')[0]).clientData;
|
|
serverData = JSON.parse(connection.data.split('%/%')[1]).serverData;
|
|
nodeId = connection.connectionId;
|
|
}
|
|
var dataNode = document.createElement('div');
|
|
dataNode.className = "data-node";
|
|
dataNode.id = "data-" + nodeId;
|
|
dataNode.innerHTML = '<p class="nickName">' + clientData + '</p><p class="userName">'+ serverData + '</p>';
|
|
videoElement.parentNode.insertBefore(dataNode, videoElement.nextSibling);
|
|
addClickListener(videoElement, clientData, serverData);
|
|
}
|
|
|
|
function removeUserData(connection) {
|
|
var userNameRemoved = $("#data-" + connection.connectionId);
|
|
if ($(userNameRemoved).find('p.userName').html() === $('#main-video p.userName').html()) {
|
|
cleanMainVideo(); // The participant focused in the main video has left
|
|
}
|
|
$("#data-" + connection.connectionId).remove();
|
|
}
|
|
|
|
function removeAllUserData() {
|
|
$(".data-node").remove();
|
|
}
|
|
|
|
function cleanMainVideo() {
|
|
$('#main-video video').attr('src', '');
|
|
$('#main-video p').each(function () {
|
|
$(this).html('');
|
|
});
|
|
}
|
|
|
|
function addClickListener(videoElement, clientData, serverData) {
|
|
videoElement.addEventListener('click', function () {
|
|
var mainVideo = $('#main-video video');
|
|
if (mainVideo.attr('src') !== videoElement.src) {
|
|
$('#main-video p.nickName').html(clientData);
|
|
$('#main-video p.userName').html(serverData);
|
|
mainVideo.attr('src', videoElement.src);
|
|
}
|
|
});
|
|
}
|
|
|
|
function initMainVideo(videoElement, userData) {
|
|
$('#main-video video').attr("src", videoElement.src);
|
|
$('#main-video p.nickName').html(userData.nickName);
|
|
$('#main-video p.userName').html(userData.userName);
|
|
}
|
|
|
|
function initMainVideoThumbnail() {
|
|
$('#main-video video').css("background", "url('images/subscriber-msg.jpg') round");
|
|
}
|
|
|
|
function isPublisher() {
|
|
return userName.includes('publisher');
|
|
}
|
|
</script>
|
|
|
|
</html> |