ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

openvidu-test-load: webapp shows more stats

pull/154/head
pabloFuente 2018-10-24 10:41:18 +02:00
parent 02c09116fd
commit a9d9b806dc
1 changed files with 41 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
openvidu-test-load/webapp/app.js
View File

@ -68,24 +68,41 @@ window.onbeforeunload = () => {
}; };
function insertVideoContainer(event) { function insertVideoContainer(event) {
var commonTagStyle = "background-color: #0088aa; color: white; font-weight: bold; padding: 2px 5px; border-radius: 3px; font-family: 'Arial'"; var commonTagStyle = "background-color: #0088aa; color: white; font-size: 13px; font-weight: bold; padding: 1px 3px; border-radius: 3px; font-family: 'Arial'";
var videoContainer = document.createElement('div'); var videoContainer = document.createElement('div');
videoContainer.id = 'video-' + event.stream.connection.data; videoContainer.id = 'video-' + event.stream.connection.data;
videoContainer.setAttribute("style", "display: inline-block; margin: 5px 5px 0 0"); videoContainer.setAttribute("style", "display: inline-block; margin: 5px 5px 0 0");
var infoContainer = document.createElement('div'); var infoContainer = document.createElement('div');
infoContainer.setAttribute("style", "text-align: center; margin-bottom: 3px"); infoContainer.setAttribute("style", "display: flex; justify-content: space-between; margin-bottom: 3px");
var userId = document.createElement('div'); var userId = document.createElement('div');
userId.setAttribute("style", "float: left; " + commonTagStyle); userId.setAttribute("style", commonTagStyle);
userId.innerText = event.stream.connection.data; userId.innerText = event.stream.connection.data;
var resolution = document.createElement('div'); var resolution = document.createElement('div');
resolution.id = 'resolution-' + event.stream.connection.data; resolution.id = 'resolution-' + event.stream.connection.data;
resolution.setAttribute("style", "display: inline-block; " + commonTagStyle); resolution.setAttribute("style", "display: inline-block; " + commonTagStyle);
resolution.innerText = event.stream.videoDimensions.width + 'x' + event.stream.videoDimensions.height; resolution.innerText = event.stream.videoDimensions.width + 'x' + event.stream.videoDimensions.height;
var rtt = document.createElement('div');
rtt.id = 'rtt-' + event.stream.connection.data;
rtt.setAttribute("style", "display: inline-block; " + commonTagStyle);
var delayMs = document.createElement('div');
delayMs.id = 'delay-' + event.stream.connection.data;
delayMs.setAttribute("style", "display: inline-block; " + commonTagStyle);
var jitter = document.createElement('div');
jitter.id = 'jitter-' + event.stream.connection.data;
jitter.setAttribute("style", "display: inline-block; " + commonTagStyle);
var receiveBandwidth = document.createElement('div');
receiveBandwidth.id = 'receive-bandwidth-' + event.stream.connection.data;
receiveBandwidth.setAttribute("style", "display: inline-block; " + commonTagStyle);
var bitrate = document.createElement('div'); var bitrate = document.createElement('div');
bitrate.id = 'bitrate-' + event.stream.connection.data; bitrate.id = 'bitrate-' + event.stream.connection.data;
bitrate.setAttribute("style", "float: right; " + commonTagStyle); bitrate.setAttribute("style", commonTagStyle);
infoContainer.appendChild(userId); infoContainer.appendChild(userId);
infoContainer.appendChild(resolution); infoContainer.appendChild(resolution);
infoContainer.appendChild(rtt);
infoContainer.appendChild(delayMs);
infoContainer.appendChild(jitter);
infoContainer.appendChild(receiveBandwidth);
infoContainer.appendChild(jitter);
infoContainer.appendChild(bitrate); infoContainer.appendChild(bitrate);
videoContainer.appendChild(infoContainer); videoContainer.appendChild(infoContainer);
document.body.appendChild(videoContainer); document.body.appendChild(videoContainer);
@ -169,26 +186,33 @@ function gatherStats(rtcPeerConnection, userId, errorCallback) {
}); });
fullReport.push(stat); fullReport.push(stat);
}); });
if (!rtcPeerConnectionStats[userId].rtt) {
var activeCandidateStats = fullReport.find(report => report.type === 'googCandidatePair' && report.googActiveConnection === 'true'); var activeCandidateStats = fullReport.find(report => report.type === 'googCandidatePair' && report.googActiveConnection === 'true');
if (!!activeCandidateStats) { if (!!activeCandidateStats) {
rtcPeerConnectionStats[userId] = { rtcPeerConnectionStats[userId].rtt = activeCandidateStats.googRtt;
rtt: activeCandidateStats.googRtt, rtcPeerConnectionStats[userId].transport = activeCandidateStats.googTransportType;
transport: activeCandidateStats.googTransportType, rtcPeerConnectionStats[userId].candidateType = activeCandidateStats.googRemoteCandidateType;
candidateType: activeCandidateStats.googRemoteCandidateType, rtcPeerConnectionStats[userId].localAddress = activeCandidateStats.googLocalAddress;
localAddress: activeCandidateStats.googLocalAddress, rtcPeerConnectionStats[userId].remoteAddress = activeCandidateStats.googRemoteAddress;
remoteAddress: activeCandidateStats.googRemoteAddress, document.querySelector('#rtt-' + userId).innerText = 'RTT: ' + rtcPeerConnectionStats[userId].rtt + ' ms';
interval: rtcPeerConnectionStats[userId].interval
}
}
} }
var videoBwe = fullReport.find(report => report.type === 'VideoBwe');
if (!!videoBwe) {
rtcPeerConnectionStats[userId].availableSendBandwidth = Math.floor(videoBwe.googAvailableSendBandwidth / 1024);
rtcPeerConnectionStats[userId].availableReceiveBandwidth = Math.floor(videoBwe.googAvailableReceiveBandwidth / 1024);
}
var videoStats = fullReport.find(report => report.type === 'ssrc' && report.mediaType === 'video'); var videoStats = fullReport.find(report => report.type === 'ssrc' && report.mediaType === 'video');
if (!!videoStats) { if (!!videoStats) {
rtcPeerConnectionStats[userId].bitRate = (videoStats.bytesReceived - rtcPeerConnectionStats[userId].bytesReceived) * 8 / 1000; rtcPeerConnectionStats[userId].bitRate = (videoStats.bytesReceived - rtcPeerConnectionStats[userId].bytesReceived) * 8 / 1024;
rtcPeerConnectionStats[userId].jitter = videoStats.googJitterBufferMs; rtcPeerConnectionStats[userId].jitter = videoStats.googJitterBufferMs;
rtcPeerConnectionStats[userId].bytesReceived = videoStats.bytesReceived; rtcPeerConnectionStats[userId].bytesReceived = videoStats.bytesReceived;
rtcPeerConnectionStats[userId].delay = videoStats.googCurrentDelayMs; rtcPeerConnectionStats[userId].delay = videoStats.googCurrentDelayMs;
rtcPeerConnectionStats[userId].packetsLost = videoStats.packetsLost; rtcPeerConnectionStats[userId].packetsLost = videoStats.packetsLost;
document.querySelector('#delay-' + userId).innerText = 'Delay: ' + rtcPeerConnectionStats[userId].delay + ' ms';
document.querySelector('#jitter-' + userId).innerText = 'jitter: ' + rtcPeerConnectionStats[userId].jitter;
document.querySelector('#receive-bandwidth-' + userId).innerText = 'Bandwidth: ' + rtcPeerConnectionStats[userId].availableReceiveBandwidth + ' kbps';
document.querySelector('#bitrate-' + userId).innerText = Math.floor(rtcPeerConnectionStats[userId].bitRate) + ' kbps'; document.querySelector('#bitrate-' + userId).innerText = Math.floor(rtcPeerConnectionStats[userId].bitRate) + ' kbps';
} }
console.log(rtcPeerConnectionStats); console.log(rtcPeerConnectionStats);