openvidu-test-load: webapp

pull/154/head
pabloFuente 2018-10-23 18:09:48 +02:00
parent 4008e1e6d9
commit 80bad5857c
5 changed files with 8305 additions and 0 deletions

View File

@ -0,0 +1,195 @@
var OPENVIDU_SERVER_URL;
var OPENVIDU_SERVER_SECRET;
var SESSION_ID;
var OV;
var session;
var rtcPeerConnectionStats = {};
window.onload = () => {
var url = new URL(window.location.href);
OPENVIDU_SERVER_URL = url.searchParams.get("publicurl");
OPENVIDU_SERVER_SECRET = url.searchParams.get("secret");
SESSION_ID = url.searchParams.get("sessionId");
USER_ID = url.searchParams.get("userId");
if (!OPENVIDU_SERVER_URL || !OPENVIDU_SERVER_SECRET || !SESSION_ID || !USER_ID) {
initFormValues();
document.getElementById('join-form').style.display = 'block';
} else {
joinSession();
}
};
function joinSession() {
OV = new OpenVidu();
session = OV.initSession();
session.on("streamCreated", event => {
var subscriber = session.subscribe(event.stream, insertVideoContainer(event));
subscriber.on('videoPlaying', e => {
var userId = event.stream.connection.data;
gatherStats(event.stream.getRTCPeerConnection(), userId);
rtcPeerConnectionStats[userId] = {
interval: window.setInterval(
() => {
gatherStats(event.stream.getRTCPeerConnection(), userId);
}, 1000)
}
});
});
session.on("streamDestroyed", event => {
var userId = event.stream.connection.data;
window.clearInterval(rtcPeerConnectionStats[userId].interval);
delete rtcPeerConnectionStats[userId];
document.getElementById('video-' + userId).outerHTML = "";
});
getToken().then(token => {
session.connect(token, USER_ID)
.then(() => {
var publisher = OV.initPublisher('local', { resolution: "540x320", frameRate: 30 });
session.publish(publisher);
})
.catch(error => {
console.log("There was an error connecting to the session:", error.code, error.message);
});
});
}
function leaveSession() {
session.disconnect();
}
window.onbeforeunload = () => {
if (session) leaveSession();
};
function insertVideoContainer(event) {
var commonTagStyle = "background-color: #0088aa; color: white; font-weight: bold; padding: 2px 5px; border-radius: 3px; font-family: 'Arial'";
var videoContainer = document.createElement('div');
videoContainer.id = 'video-' + event.stream.connection.data;
videoContainer.setAttribute("style", "display: inline-block; margin: 5px 5px 0 0");
var infoContainer = document.createElement('div');
infoContainer.setAttribute("style", "text-align: center; margin-bottom: 3px");
var userId = document.createElement('div');
userId.setAttribute("style", "float: left; " + commonTagStyle);
userId.innerText = event.stream.connection.data;
var resolution = document.createElement('div');
resolution.id = 'resolution-' + event.stream.connection.data;
resolution.setAttribute("style", "display: inline-block; " + commonTagStyle);
resolution.innerText = event.stream.videoDimensions.width + 'x' + event.stream.videoDimensions.height;
var bitrate = document.createElement('div');
bitrate.id = 'bitrate-' + event.stream.connection.data;
bitrate.setAttribute("style", "float: right; " + commonTagStyle);
infoContainer.appendChild(userId);
infoContainer.appendChild(resolution);
infoContainer.appendChild(bitrate);
videoContainer.appendChild(infoContainer);
document.body.appendChild(videoContainer);
return videoContainer;
}
function initFormValues() {
document.getElementById("form-publicurl").value = OPENVIDU_SERVER_URL;
document.getElementById("form-secret").value = OPENVIDU_SERVER_SECRET;
document.getElementById("form-sessionId").value = SESSION_ID;
document.getElementById("form-userId").value = USER_ID;
}
function joinWithForm() {
OPENVIDU_SERVER_URL = document.getElementById("form-publicurl").value;
OPENVIDU_SERVER_SECRET = document.getElementById("form-secret").value;
SESSION_ID = document.getElementById("form-sessionId").value;
USER_ID = document.getElementById("form-userId").value;
document.getElementById('join-form').style.display = 'none';
joinSession();
return false;
}
function getToken() {
return createSession().then(sessionId => createToken(sessionId));
}
function createSession() { // See https://openvidu.io/docs/reference-docs/REST-API/#post-apisessions
return new Promise((resolve, reject) => {
var request = new XMLHttpRequest();
request.open("POST", OPENVIDU_SERVER_URL + "api/sessions", true);
request.setRequestHeader('Content-Type', 'application/json');
request.setRequestHeader('Authorization', "Basic " + btoa("OPENVIDUAPP:" + OPENVIDU_SERVER_SECRET));
request.onreadystatechange = () => {
if (request.readyState === 4) {
if (request.status === 200 || request.status === 409) {
resolve(SESSION_ID);
} 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');
}
}
};
}
request.send(JSON.stringify({ customSessionId: SESSION_ID }));
});
}
function createToken() { // See https://openvidu.io/docs/reference-docs/REST-API/#post-apitokens
return new Promise((resolve, reject) => {
var request = new XMLHttpRequest();
request.open("POST", OPENVIDU_SERVER_URL + "api/tokens", true);
request.setRequestHeader('Content-Type', 'application/json');
request.setRequestHeader('Authorization', "Basic " + btoa("OPENVIDUAPP:" + OPENVIDU_SERVER_SECRET));
request.onreadystatechange = () => {
if (request.readyState === 4) {
if (request.status == 200) {
resolve(JSON.parse(request.response).token);
} else {
reject(new Error(request.responseText))
}
};
}
request.send(JSON.stringify({ session: SESSION_ID }));
});
}
function gatherStats(rtcPeerConnection, userId, errorCallback) {
return rtcPeerConnection.getStats(response => {
const fullReport = [];
response.result().forEach(report => {
const stat = {
id: report.id,
timestamp: report.timestamp,
type: report.type
};
report.names().forEach((name) => {
stat[name] = report.stat(name);
});
fullReport.push(stat);
});
if (!rtcPeerConnectionStats[userId].rtt) {
var activeCandidateStats = fullReport.find(report => report.type === 'googCandidatePair' && report.googActiveConnection === 'true');
if (!!activeCandidateStats) {
rtcPeerConnectionStats[userId] = {
rtt: activeCandidateStats.googRtt,
transport: activeCandidateStats.googTransportType,
candidateType: activeCandidateStats.googRemoteCandidateType,
localAddress: activeCandidateStats.googLocalAddress,
remoteAddress: activeCandidateStats.googRemoteAddress,
interval: rtcPeerConnectionStats[userId].interval
}
}
}
var videoStats = fullReport.find(report => report.type === 'ssrc' && report.mediaType === 'video');
if (!!videoStats) {
rtcPeerConnectionStats[userId].bitRate = (videoStats.bytesReceived - rtcPeerConnectionStats[userId].bytesReceived) * 8 / 1000;
rtcPeerConnectionStats[userId].jitter = videoStats.googJitterBufferMs;
rtcPeerConnectionStats[userId].bytesReceived = videoStats.bytesReceived;
rtcPeerConnectionStats[userId].delay = videoStats.googCurrentDelayMs;
rtcPeerConnectionStats[userId].packetsLost = videoStats.packetsLost;
document.querySelector('#bitrate-' + userId).innerText = Math.floor(rtcPeerConnectionStats[userId].bitRate) + ' kbps';
}
console.log(rtcPeerConnectionStats);
}, null, errorCallback);
}

View File

@ -0,0 +1,20 @@
-----BEGIN CERTIFICATE-----
MIIDUTCCAjmgAwIBAgIJAOakq4gNcqYkMA0GCSqGSIb3DQEBCwUAMD8xFjAUBgNV
BAMMDXd3dy5teWRvbS5jb20xGDAWBgNVBAoMD015IENvbXBhbnkgTFRELjELMAkG
A1UEBhMCVVMwHhcNMTgxMDIzMTAzNzA5WhcNMjgxMDIwMTAzNzA5WjA/MRYwFAYD
VQQDDA13d3cubXlkb20uY29tMRgwFgYDVQQKDA9NeSBDb21wYW55IExURC4xCzAJ
BgNVBAYTAlVTMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEArrmu8o+E
m5FGfKXEkVmAqpSwOReCLFy44k4L0F6VWtY0N894QxxgjVTk7Fawx2ZJXXCej9Ze
jUsmHa9l2jLfBZ7A5HDWJV0QVGJLUJKR9yMag+0G73prcbZd8aPzxuJz9ZDW79K+
KvmMDdKUcozLLA9kxBpWCyUrngi/MJkk8WtLwYwlP9Qk1bFvwC/dAiELbsKZhyPH
SAztnGtC4K8gtTtwmj2eesu3XfYkJXx7091WfjLZT7jPHwygiyCq6/ebTUr7QzRN
GsvHmaslhfZGYWiHl56hhZDcwCeO7qsJ9OEQfQjTlvng1oLhmgHpZiNGSo61JzOk
5xjLc2bSh7nE6QIDAQABo1AwTjAdBgNVHQ4EFgQUQZs0C0Kl8zME1ar0AEMtPdFP
VK0wHwYDVR0jBBgwFoAUQZs0C0Kl8zME1ar0AEMtPdFPVK0wDAYDVR0TBAUwAwEB
/zANBgkqhkiG9w0BAQsFAAOCAQEAo7nJFSFFhKqygRx24z5AoVykgZveAfeEBgH6
L9z+jzs90CnOT1d6eTKApcqPJ9AcnnyFZKVWQCnyE87MEmNXq7t/UdQIp8Gms3IY
e+17Dkaq6mEy/BzA7aKq4I2NYf3G20vS0ulB6mPgbKrzsSj7yDy2//UBdhnEFY6x
6Z8If7CndgcdFyP91sw7UW4r6IVKqaQ3I+oY2qojlOnLHnDpExPupQ8zBBKUNksO
Hc6mkrDw++56NMt347ANNIC5YOTr2n8iiBRsN3Rz+VRHgw6lLi+hJLNHwQWiyC7k
uR+1f/hfGo7MArvBczg2H4LyGhiVpTmjucT/VDeuFLm8hgPpJQ==
-----END CERTIFICATE-----

View File

@ -0,0 +1,23 @@
<html>
<head>
<title>openvidu-hello-world</title>
<link rel="shortcut icon" href="resources/images/favicon.ico" type="image/x-icon">
<script src="openvidu-browser-2.5.0.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="join-form" style="display: none">
<form onsubmit="return joinWithForm()">
<input id="form-publicurl" type="text" name="publicurl" placeholder="OpenVidu ip" required>
<input id="form-secret" type="text" name="secret" placeholder="OpenVidu secret" required>
<input id="form-sessionId" type="text" name="sessionId" placeholder="sessionId" required>
<input id="form-userId" type="text" name="userId" placeholder="userId" required>
<input type="submit" value="Join session">
</form>
</div>
<div id="local" style="display: inline-block"></div>
</body>
</html>

View File

@ -0,0 +1,28 @@
-----BEGIN PRIVATE KEY-----
MIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQCuua7yj4SbkUZ8
pcSRWYCqlLA5F4IsXLjiTgvQXpVa1jQ3z3hDHGCNVOTsVrDHZkldcJ6P1l6NSyYd
r2XaMt8FnsDkcNYlXRBUYktQkpH3IxqD7Qbvemtxtl3xo/PG4nP1kNbv0r4q+YwN
0pRyjMssD2TEGlYLJSueCL8wmSTxa0vBjCU/1CTVsW/AL90CIQtuwpmHI8dIDO2c
a0LgryC1O3CaPZ56y7dd9iQlfHvT3VZ+MtlPuM8fDKCLIKrr95tNSvtDNE0ay8eZ
qyWF9kZhaIeXnqGFkNzAJ47uqwn04RB9CNOW+eDWguGaAelmI0ZKjrUnM6TnGMtz
ZtKHucTpAgMBAAECggEAaAg850WWkj3sdxkIMfbVijtftY6OvjUzC+OmWxmF2gEC
NFy+YU8LGft7FlEDjqYTdqQwdLoRsBUXi8M8ZK+3ZJRCi4G3r6V6rJOd/kpWyIxJ
JFXDtGDyilEoHFEfO8LngkYMA905x0KwJibEpnO4IPLFb5Gyu44VK1JP6/KzMV5R
cq/ZxKsamWOurvODNNTEzeV9l+lyaPLlE2ki2ob9wn6B1u1xAyXBRV8iVSqulOu5
oO+WSzNEORCO4YJaPiknW1PMEf92dd8NiFFjzT9pjZ/q7ix9y6o4y1I/9COdLD1K
BlnO39eLydVy8i84F9eCJbyfJBAXJsJfYaoFybgwEQKBgQDnJ9KFhE4rv8GpgYav
x2rE4eIiQ9qBvJ+l6LTJFsL0TmIBsBliVjZyASbFEbtK2JdOqdRb1ko5FOaqI/c9
zibyMxob2Rl1HR3RtFj/dZQ7EIgwWC6J8vKBMicpDIL41luYYvqiuLg0o1cC4pFo
/eitCkhErM3h0JHi5YB8X847xQKBgQDBgTMhGNQe6SOineEyQ/7RdZ4fRsGpnfID
bJTqrBEAqnKdIzXI7Bx5mNLPoohA+OWIu97aTR5DI1r98M0RcuWBs/MxtivRyE5R
YWh0Lt5ZP6o0tl13gcVbcjed0qZw6umzJjaYkR1WCZUVUpUuDvfpF3NDEWMzuIlt
P4ZHwCiC1QKBgDZJHOCsTKtrkjCbsaTQYVuxbKj9ZHB5esi82NAs30X+rneVArEc
bBbj/FXlryWJricULUIQFkhHh1BHuAW0x2Kz65rEpnzhhKI+B3SfCVvBqyonW26c
NqVuwNGcFZoYxVQJUrEqTmBWR9XunZWZo64XrxcpugQhNlGh8kXDPiy9AoGADlZ8
a19jmEa+FTaNkSPopayJYtfjUaYaYJaTEjBdsibvByWsvo6ALaJdPHVWkzneCBuj
j5lXPLJJ87b7+ucAinPC+VP+OzUUWINXMgSnBQXqnq1Ej65V6Ui1RkRtgMBnQJb8
RKG8ArwDB+lulFMXm3XZXIbVSufJhwbF9FsQpWECgYA7JX738xOkgN7J5V7s6YKW
JIaPnW6dzpgQOsSRTsqVx2L5kYJc9dhwsaJLHI1SlE2y0NIo7y0IxtHHKmu8bWwo
6MXO6hSFTK6M+hCPoScHbgYF+mYxeYG4261wikq66POMSknfXLZYVYoGVk1o08Li
pqLqj7cen6NOM8mxRibX/Q==
-----END PRIVATE KEY-----

File diff suppressed because one or more lines are too long