248 lines
8.7 KiB
Plaintext
248 lines
8.7 KiB
Plaintext
<html>
|
|
|
|
<head>
|
|
<title>openvidu-mvc-node</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.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-2.8.0.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 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>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div id="main-container" class="container">
|
|
<div id="logged">
|
|
<div id="session">
|
|
<div id="session-header">
|
|
<h1 id="session-title"><%= sessionName %></h1>
|
|
<form action="/leave-session" method="post">
|
|
<input type="hidden" name="sessionname" value="<%= sessionName %>"></input>
|
|
<input type="hidden" name="token" 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" playsinline="true"></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>
|
|
// Get all the attributes from the template in EJS style
|
|
var sessionName = <%- JSON.stringify(sessionName) %>;
|
|
var token = <%- JSON.stringify(token) %>;
|
|
var nickName = <%- JSON.stringify(nickName) %>;
|
|
var userName = <%- JSON.stringify(userName) %>;
|
|
|
|
console.warn('Request of TOKEN gone WELL (TOKEN:' + token + ')');
|
|
|
|
// --- 1) Get an OpenVidu object ---
|
|
|
|
OV = new OpenVidu();
|
|
|
|
// --- 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', (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', (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', (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) ---
|
|
|
|
session.connect(token, { clientData: nickName })
|
|
.then(() => {
|
|
|
|
// --- 5) Set page layout for active call ---
|
|
|
|
$('#session-title').text(sessionName);
|
|
$('#join').hide();
|
|
$('#session').show();
|
|
|
|
|
|
// 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 is not recognized as 'PUBLIHSER' role by OpenVidu Server
|
|
if (isPublisher()) {
|
|
|
|
// --- 6) Get your own camera stream ---
|
|
|
|
var publisher = OV.initPublisher('video-container', {
|
|
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', (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);
|
|
$(event.element).prop('muted', true); // Mute local video
|
|
});
|
|
|
|
|
|
// --- 8) Publish your stream ---
|
|
|
|
session.publish(publisher);
|
|
|
|
} else {
|
|
console.warn('You don\'t have permissions to publish');
|
|
initMainVideoThumbnail(); // Show SUBSCRIBER message in main video
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.warn('There was an error connecting to the session:', error.code, error.message);
|
|
});
|
|
|
|
|
|
function leaveSession() {
|
|
|
|
// --- 9) 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').get(0).srcObject = null;
|
|
$('#main-video p').each(function () {
|
|
$(this).html('');
|
|
});
|
|
}
|
|
|
|
function addClickListener(videoElement, clientData, serverData) {
|
|
videoElement.addEventListener('click', function () {
|
|
var mainVideo = $('#main-video video').get(0);
|
|
if (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");
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function initMainVideo(videoElement, userData) {
|
|
$('#main-video video').get(0).srcObject = videoElement.srcObject;
|
|
$('#main-video p.nickName').html(userData.nickName);
|
|
$('#main-video p.userName').html(userData.userName);
|
|
$('#main-video video').prop('muted', true);
|
|
}
|
|
|
|
function initMainVideoThumbnail() {
|
|
$('#main-video video').css("background", "url('images/subscriber-msg.jpg') round");
|
|
}
|
|
|
|
function isPublisher() {
|
|
return userName.includes('publisher');
|
|
}
|
|
</script>
|
|
|
|
</html> |