elias/vdo.ninja
1
0
Fork 0
mirror of https://github.com/eliasstepanik/vdo.ninja.git synced 2026-01-16 08:08:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #269 from jcalado/new-stats-ui

Browse Source 
new stats ui
This commit is contained in:
Steve Seguin 2020-09-05 23:21:48 -04:00 committed by GitHub
commit 7e839a0a5b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 150 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
main.css
View File

@ -1281,6 +1281,108 @@ input[type=checkbox]
}
.debugStats {
font-size: 0.8rem;
list-style-type: none;
left: 50px;
top: 50px;
width: 300px;
min-height: 200px;
max-height: 90vh;
overflow-y: auto;
background-color: rgba(0,0,0,0.95);
position: absolute;
z-index: 20;
color: white;
padding: 20px;
border: 2px solid #1d1d1d;
}
.debugStats::-webkit-scrollbar {
width: 0.5em;
}
.debugStats::-webkit-scrollbar-track {
background:black;
border-radius: 10px;
}
/* Handle */
.debugStats::-webkit-scrollbar-thumb {
background: rgb(119, 119, 119);
border-radius: 10px;
}
/* Handle on hover */
.debugStats::-webkit-scrollbar-thumb:hover {
background: rgb(158, 158, 158); ;
}
.debugStats h1 {
font-size: 1rem;
text-align: left;
text-transform: uppercase;
margin-bottom: 10px;
margin-top: -5px;
}
.debugStats h2 {
font-size: 0.8rem;
text-align: left;
text-transform: uppercase;
margin-top: 10px;
white-space: nowrap;
text-overflow: ellipsis;
display:block;
overflow: hidden;
}
.viewstats::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
.debugStats li {
display: flex;
margin: 5px 0px;
}
.debugStats li:nth-child(even) {
background: rgba(33,33,33,0.8);
padding: 2px 0px;
}
.debugStats li span:first-child {
flex: 1;
}
.debugStats li span:last-child {
flex: 1;
text-align: right;
}
.debugStats .close {
font-weight: bold;
color:white;
display: block;
background:none;
padding: 0;
margin: 0;
font-size: 1.5rem;
border:none;
top: 10px;
right: 10px;
}
.debugStats button:not(.close) {
margin: 10px 0px;
padding: 10px 0px;
background: #263250;
color: white;
border-radius: 0;
width: 100%;
font-weight: bold;
border-bottom: 2px solid #364c84;
}
@media only screen and (max-width: 390px) {
#chatBody{
z-index: 12;

91
main.js
View File

@ -1260,38 +1260,51 @@ setInterval(function(){checkConnection();},5000);
function printViewStats(menu, statsObj, streamID){ // Stats for viewing a remote video
menu.style.left="100px";
menu.style.top="100px";
menu.style.width="300px";
menu.style.minHeight="200px";
menu.style.backgroundColor="blue"; // white
menu.style.position="absolute";
menu.style.zIndex="20";
menu.interval = setInterval(printViewStats,3000, menu, statsObj, streamID);
menu.addEventListener('click', function(e) {
clearInterval(e.currentTarget.interval);
e.currentTarget.parentNode.removeChild(e.currentTarget);
});
menu.innerHTML ="Click to close.<br />";
menu.innerHTML +="Settings for StreamID: <b>"+streamID+"</b><br />";
menu.className = "debugStats remotestats";
menu.interval = setTimeout(printViewStats,3000, menu, statsObj, streamID);
menu.innerHTML="<h1>Statistics</h1>";
menu.innerHTML+="<button class='close'>×</button>";
menu.innerHTML+="StreamID: <b>"+streamID+"</b><br />";
menu.innerHTML+= printValues(statsObj);
document.getElementsByClassName('close')[0].addEventListener('click', function(e) {
clearTimeout(menu.interval);
e.currentTarget.parentNode.remove();
});
}
function printValues(obj) { // see: printViewStats
var out = "";
for (var key in obj) {
if (typeof obj[key] === "object") {
if (obj[key]!=null){
out += "<br /><u>"+key+"</u><br />"
out += "<li><h2 title='" + key + "'>"+key+"</h2></li>"
out += printValues(obj[key]);
}
} else {
if (key.startsWith("_")){
// if it starts with _, we don't want to show it.
} else {
out +="<b>"+key+"</b>: "+obj[key]+"<br />";
var unit = '';
var stat = key;
if(key == 'Bitrate_in_kbps') {
var unit = " kbps";
stat = "Bitrate";
}
if(key == 'type') {
var unit = "";
stat = 'Type';
}
if(key == 'packetLoss_in_percentage') {
var unit = " %";
stat = 'Packet Loss';
}
if(key == 'Buffer_Delay_in_ms') {
var unit = " ms";
stat = 'Buffer Delay';
}
out +="<li><span>"+stat+"</span><span>"+obj[key]+ unit + "</span></li>";
}
}
}
@ -1301,48 +1314,40 @@ function printValues(obj) { // see: printViewStats
function setupStatsMenu(menu){ // Stats for checking on our local video being published
menu.style.left= parseInt(Math.random()*20)+100+"px"
menu.style.top= parseInt(Math.random()*20)+100+"px"
menu.style.width="300px";
menu.style.minHeight="200px";
menu.style.backgroundColor= "red"; // white
menu.style.position="absolute";
menu.style.zIndex="20";
menu.style.border="1px solid black";
menu.style.padding="2px";
menu.className = 'debugStats viewstats';
menu.interval = setInterval(printMyStats,3000, menu);
menu.addEventListener('click', function(e) {
clearInterval(e.currentTarget.interval);
e.currentTarget.parentNode.removeChild(e.currentTarget);
});
menu.innerHTML = "";
printMyStats(menu);
}
function printMyStats(menu){ // see: setupStatsMenu
session.stats.outbound_connections = Object.keys(session.pcs).length;
session.stats.inbound_connections = Object.keys(session.rpcs).length;
menu.innerHTML="Click window to close<br /><br />";
menu.innerHTML = "";
menu.innerHTML+="<h1>Statistics</h1>";
menu.innerHTML+="<button class='close'>×</button>";
function printViewValues(obj) {
for (var key in obj) {
if (typeof obj[key] === "object") {
menu.innerHTML +="<br />";
printViewValues(obj[key]);
if (typeof obj[key] === "object") {
printViewValues(obj[key]);
} else {
menu.innerHTML +="<b>"+key+"</b>: "+obj[key]+"<br />";
menu.innerHTML +="<li><span>"+key+"</span><span>"+obj[key]+"</span></li>";
}
}
}
printViewValues(session.stats);
menu.innerHTML+="<br /><button style='margin:5px;padding:20px;' onclick='session.forcePLI(null,event);'>Send Video Keyframe to Remote Viewers</button>";
menu.innerHTML+="<button onclick='session.forcePLI(null,event);'>Send Keyframe to Viewers</button>";
for (var uuid in session.pcs){
printViewValues(session.pcs[uuid].stats);
}
document.getElementsByClassName('close')[0].addEventListener('click', function(e) {
clearInterval(menu.interval);
e.currentTarget.parentNode.remove();
});
}