261 lines
8.9 KiB
JavaScript
261 lines
8.9 KiB
JavaScript
var OV;
|
|
var session;
|
|
var isIE = navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0;
|
|
var isFirstVideoCreatedByPublisher = true;
|
|
|
|
|
|
/* OPENVIDU METHODS */
|
|
|
|
function joinSession() {
|
|
|
|
var mySessionId = document.getElementById("sessionId").value;
|
|
var myUserName = document.getElementById("userName").value;
|
|
|
|
// --- 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', 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(subscriber, 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);
|
|
});
|
|
|
|
|
|
// --- 4) Connect to the session with a valid user token ---
|
|
|
|
// 'getToken' method is simulating what your server-side should do.
|
|
// 'token' parameter should be retrieved and returned by your own backend
|
|
getToken(mySessionId).then(function(token) {
|
|
|
|
// First param is the token got from OpenVidu Server. Second param can be retrieved by every user on event
|
|
// 'streamCreated' (property Stream.connection.data), and will be appended to DOM as the user's nickname
|
|
session.connect(token, { clientData: myUserName })
|
|
.then(function() {
|
|
|
|
// --- 5) Set page layout for active call ---
|
|
|
|
document.getElementById('session-title').innerText = mySessionId;
|
|
document.getElementById('join').style.display = 'none';
|
|
document.getElementById('session').style.display = 'block';
|
|
|
|
// --- 6) Get your own camera stream with the desired properties ---
|
|
|
|
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', function (event) {
|
|
if (isFirstVideoCreatedByPublisher) {
|
|
// Calling StreamManger.addVideoElement inside initMainVideo method will
|
|
// trigger a new videoElementCreated event in IExplorer. We must ignore it the second
|
|
// time to avoid an infinite recursive call to this same event handler
|
|
isFirstVideoCreatedByPublisher = false;
|
|
initMainVideo(publisher, myUserName);
|
|
appendUserData(publisher, event.element, myUserName);
|
|
event.element['muted'] = true;
|
|
}
|
|
});
|
|
|
|
// --- 8) Publish your stream ---
|
|
|
|
session.publish(publisher);
|
|
|
|
})
|
|
.catch(function(error) {
|
|
console.log('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();
|
|
|
|
// Removing all HTML elements with 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';
|
|
}
|
|
|
|
|
|
|
|
/* APPLICATION SPECIFIC METHODS */
|
|
|
|
window.addEventListener('load', function () {
|
|
generateParticipantInfo();
|
|
});
|
|
|
|
window.onbeforeunload = function () {
|
|
if (session) session.disconnect();
|
|
};
|
|
|
|
function generateParticipantInfo() {
|
|
document.getElementById("sessionId").value = "Sessionb";
|
|
document.getElementById("userName").value = "Participant" + Math.floor(Math.random() * 100);
|
|
}
|
|
|
|
function appendUserData(streamManager, videoElement, connection) {
|
|
var userData;
|
|
var nodeId;
|
|
if (typeof connection === "string") {
|
|
userData = connection;
|
|
nodeId = connection;
|
|
} else {
|
|
userData = JSON.parse(connection.data).clientData;
|
|
nodeId = connection.connectionId;
|
|
}
|
|
nodeId = "data-" + nodeId;
|
|
if (!document.getElementById(nodeId)) {
|
|
// Only if data node does not exist
|
|
var dataNode = document.createElement('div');
|
|
dataNode.className = "data-node";
|
|
dataNode.id = nodeId;
|
|
dataNode.innerHTML = "<p>" + userData + "</p>";
|
|
videoElement.parentNode.insertBefore(dataNode, videoElement.nextSibling);
|
|
addClickListener(streamManager, videoElement, userData);
|
|
}
|
|
}
|
|
|
|
function removeUserData(connection) {
|
|
var dataNode = document.getElementById("data-" + connection.connectionId);
|
|
dataNode.parentNode.removeChild(dataNode);
|
|
}
|
|
|
|
function removeAllUserData() {
|
|
var nicknameElements = document.getElementsByClassName('data-node');
|
|
while (nicknameElements[0]) {
|
|
nicknameElements[0].parentNode.removeChild(nicknameElements[0]);
|
|
}
|
|
}
|
|
|
|
function addClickListener(streamManager, videoElement, userData) {
|
|
videoElement.addEventListener('mousedown', function () {
|
|
var mainVideo;
|
|
var differentVideo;
|
|
if (isIE) {
|
|
mainVideo = $('#main-video object').get(0);
|
|
differentVideo = true;
|
|
} else {
|
|
mainVideo = $('#main-video video').get(0);
|
|
differentVideo = mainVideo.srcObject !== videoElement.srcObject
|
|
}
|
|
if (differentVideo) {
|
|
$('#main-video').fadeOut("fast", function() {
|
|
$('#main-video p').html(userData);
|
|
streamManager.addVideoElement(mainVideo);
|
|
$('#main-video').fadeIn("fast");
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function initMainVideo(publisher, userData) {
|
|
var mainVideo = document.querySelector('#main-video video');
|
|
if (isIE && !mainVideo) {
|
|
// If IE and the main video has already been inserted by the plugin,
|
|
// search for an object element instead of a video element
|
|
mainVideo = document.querySelector('#main-video object');
|
|
}
|
|
publisher.addVideoElement(mainVideo);
|
|
document.querySelector('#main-video p').innerHTML = userData;
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* --------------------------
|
|
* SERVER-SIDE RESPONSIBILITY
|
|
* --------------------------
|
|
* These methods retrieve the mandatory user token from OpenVidu Server.
|
|
* This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION (by using
|
|
* the API REST, openvidu-java-client or openvidu-node-client):
|
|
* 1) Initialize a session in OpenVidu Server (POST /api/sessions)
|
|
* 2) Generate a token in OpenVidu Server (POST /api/tokens)
|
|
* 3) The token must be consumed in Session.connect() method
|
|
*/
|
|
|
|
var OPENVIDU_SERVER_URL = "https://" + location.hostname + ":4443";
|
|
var OPENVIDU_SERVER_SECRET = "MY_SECRET";
|
|
|
|
function getToken(mySessionId) {
|
|
return createSession(mySessionId).then(function(sessionId) { return createToken(sessionId); });
|
|
}
|
|
|
|
function createSession(sessionId) { // See https://openvidu.io/docs/reference-docs/REST-API/#post-apisessions
|
|
return new Promise(function(resolve, reject) {
|
|
$.ajax({
|
|
type: "POST",
|
|
url: OPENVIDU_SERVER_URL + "/api/sessions",
|
|
data: JSON.stringify({ customSessionId: sessionId }),
|
|
headers: {
|
|
"Authorization": "Basic " + btoa("OPENVIDUAPP:" + OPENVIDU_SERVER_SECRET),
|
|
"Content-Type": "application/json"
|
|
},
|
|
success: function(response) { resolve(response.id); },
|
|
error: function(error) {
|
|
if (error.status === 409) {
|
|
resolve(sessionId);
|
|
} else {
|
|
console.warn('No connection to OpenVidu Server. This may be a certificate error at ' + OPENVIDU_SERVER_URL);
|
|
if (window.confirm('No connection to OpenVidu Server. This may be a certificate error at \"' + OPENVIDU_SERVER_URL + '\"\n\nClick OK to navigate and accept it. ' +
|
|
'If no certificate warning is shown, then check that your OpenVidu Server is up and running at "' + OPENVIDU_SERVER_URL + '"')) {
|
|
location.assign(OPENVIDU_SERVER_URL + '/accept-certificate');
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function createToken(sessionId) { // See https://openvidu.io/docs/reference-docs/REST-API/#post-apitokens
|
|
return new Promise(function(resolve, reject) {
|
|
$.ajax({
|
|
type: "POST",
|
|
url: OPENVIDU_SERVER_URL + "/api/tokens",
|
|
data: JSON.stringify({ session: sessionId }),
|
|
headers: {
|
|
"Authorization": "Basic " + btoa("OPENVIDUAPP:" + OPENVIDU_SERVER_SECRET),
|
|
"Content-Type": "application/json"
|
|
},
|
|
success: function(response) { resolve(response.token); },
|
|
error: function(error) { reject(error); }
|
|
});
|
|
});
|
|
} |