From 83dc70eae5c6919ef0b4165391c3fea34f62283f Mon Sep 17 00:00:00 2001 From: hristoterezov Date: Fri, 17 Oct 2014 13:00:35 +0300 Subject: [PATCH] Adds local addresses and ports to connection quality tooltip. Aligns the values in the tooltip. Fixes issues with the statistics. --- connectionquality.js | 9 ++++----- css/videolayout_default.css | 15 ++++++++++++--- jitsipopover.js | 2 +- rtp_sts.js | 26 +++++++++++++++++++------- videolayout.js | 36 ++++++++++++++++++++++++------------ 5 files changed, 60 insertions(+), 28 deletions(-) diff --git a/connectionquality.js b/connectionquality.js index 7e7322609..c6e78e31e 100644 --- a/connectionquality.js +++ b/connectionquality.js @@ -62,8 +62,8 @@ var ConnectionQuality = (function () { */ function convertToMUCStats(stats) { return { - "bitrate_donwload": stats.bitrate.download, - "bitrate_uplpoad": stats.bitrate.upload, + "bitrate_download": stats.bitrate.download, + "bitrate_upload": stats.bitrate.upload, "packetLoss_total": stats.packetLoss.total, "packetLoss_download": stats.packetLoss.download, "packetLoss_upload": stats.packetLoss.upload @@ -78,8 +78,8 @@ var ConnectionQuality = (function () { function parseMUCStats(stats) { return { bitrate: { - download: stats.bitrate_donwload, - upload: stats.bitrate_uplpoad + download: stats.bitrate_download, + upload: stats.bitrate_upload }, packetLoss: { total: stats.packetLoss_total, @@ -101,7 +101,6 @@ var ConnectionQuality = (function () { return; } remoteStats[jid] = parseMUCStats(data); - console.log(remoteStats[jid]); VideoLayout.updateConnectionStats(jid, 100 - data.packetLoss_total,remoteStats[jid]); diff --git a/css/videolayout_default.css b/css/videolayout_default.css index 124181d3b..58f86498d 100644 --- a/css/videolayout_default.css +++ b/css/videolayout_default.css @@ -227,18 +227,27 @@ left: 0px; top: 0px; font-size: 8pt; - text-shadow: 1px 1px 1px rgba(0,0,0,1), -1px -1px -1px rgba(0,0,0,1); border: 0px; width: 18px; height: 13px; } .connection_info +{ + float: left; + padding-bottom: 5px; +} + +.connection_info > table +{ + white-space: nowrap; +} + +.connection_info, .connection_info > table { text-align: left; font-size: 11px; - white-space:nowrap; - /*width: 260px;*/ + color: #ffffff; } #localVideoContainer>span.status:hover, diff --git a/jitsipopover.js b/jitsipopover.js index d0619519c..5a99b8741 100644 --- a/jitsipopover.js +++ b/jitsipopover.js @@ -90,7 +90,7 @@ var JitsiPopover = (function () { of: this.element, using: function (position, elements) { var calcLeft = elements.target.left - elements.element.left + elements.target.width/2; - $(".jitsipopover").css({top: position.top, left: position.left, display: "block"}); + $(".jitsipopover").css({top: position.top, left: position.left, display: "table"}); $(".jitsipopover > .arrow").css({left: calcLeft}); $(".jitsipopover > .jitsiPopupmenuPadding").css({left: calcLeft - 50}); } diff --git a/rtp_sts.js b/rtp_sts.js index 246d99025..03cfff79c 100644 --- a/rtp_sts.js +++ b/rtp_sts.js @@ -197,8 +197,8 @@ StatsCollector.prototype.processStatsReport = function () { var now = this.currentStatsReport[idx]; if (now.stat('googAvailableReceiveBandwidth') || now.stat('googAvailableSendBandwidth')) { PeerStats.bandwidth = { - "download": Math.round((now.stat('googAvailableReceiveBandwidth') * 8) / 1000), - "upload": Math.round((now.stat('googAvailableSendBandwidth') * 8) / 1000) + "download": Math.round((now.stat('googAvailableReceiveBandwidth')) / 1000), + "upload": Math.round((now.stat('googAvailableSendBandwidth')) / 1000) }; } @@ -206,19 +206,22 @@ StatsCollector.prototype.processStatsReport = function () { { var ip = now.stat('googRemoteAddress'); var type = now.stat("googTransportType"); - if(!ip || !type) + var localIP = now.stat("googLocalAddress"); + var active = now.stat("googActiveConnection"); + if(!ip || !type || !localIP || !active) continue; var addressSaved = false; for(var i = 0; i < PeerStats.transport.length; i++) { - if(PeerStats.transport[i].ip == ip && PeerStats.transport[i].type == type) + if(PeerStats.transport[i].ip == ip && PeerStats.transport[i].type == type && + PeerStats.transport[i].localip == localIP) { addressSaved = true; } } if(addressSaved) continue; - PeerStats.transport.push({ip: ip, type: type}); + PeerStats.transport.push({localip: localIP, ip: ip, type: type}); continue; } @@ -261,13 +264,23 @@ StatsCollector.prototype.processStatsReport = function () { } } var packetsNow = now.stat(key); + if(!packetsNow || packetsNow < 0) + packetsNow = 0; + var packetsBefore = before.stat(key); + if(!packetsBefore || packetsBefore < 0) + packetsBefore = 0; var packetRate = packetsNow - packetsBefore; var currentLoss = now.stat('packetsLost'); + if(!currentLoss || currentLoss < 0) + currentLoss = 0; var previousLoss = before.stat('packetsLost'); + if(!previousLoss || previousLoss < 0) + previousLoss = 0; var lossRate = currentLoss - previousLoss; - + if(lossRate < 0) + lossRate = 0; var packetsTotal = (packetRate + lossRate); jidStats.setSsrcLoss(ssrc, {"packetsTotal": packetsTotal, "packetsLost": lossRate, @@ -308,7 +321,6 @@ StatsCollector.prototype.processStatsReport = function () { if(!jidStats.resolution) jidStats.resolution = null; - console.log(jid + " - resolution: " + resolution.height + "x" + resolution.width); if(resolution.height && resolution.width) { if(!jidStats.resolution) diff --git a/videolayout.js b/videolayout.js index 36acb1e48..7a502bab1 100644 --- a/videolayout.js +++ b/videolayout.js @@ -1152,6 +1152,7 @@ var VideoLayout = (function (my) { //
  • Mute
    • //
  • Eject
    • // + var popupmenuElement = document.createElement('ul'); popupmenuElement.className = 'popupmenu'; popupmenuElement.id @@ -1570,11 +1571,11 @@ var VideoLayout = (function (my) { resolution = resolutionValue.width + "x" + resolutionValue.height; } - var result = "Bitrate: ↓" + + var result = "
    Bitrate:↓" + downloadBitrate + " ↑" + - uploadBitrate + "
    " + - "Packet loss: " + packetLoss + "
    " + - "Resolution: " + resolution + "
    "; + uploadBitrate + "
    " + + "
    Packet loss: " + packetLoss + "
    " + + "Resolution:" + resolution + "
    "; if(this.videoContainer.id == "localVideoContainer") result += "
    "; + var localTransport = "Local address: " + + this.transport[0].localip.substring(0,this.transport[0].localip.indexOf(":")) + "" + transport = "Remote address: " + + this.transport[0].ip.substring(0,this.transport[0].ip.indexOf(":")) + ""; if(this.transport.length > 1) { - transport += "Ports: "; + transport += "Remote ports:"; + localTransport += "Local ports:"; } else { - transport += "Port: "; + transport += "Remote port:"; + localTransport += "Local port:"; } for(var i = 0; i < this.transport.length; i++) { transport += ((i !== 0)? ", " : "") + this.transport[i].ip.substring(this.transport[i].ip.indexOf(":")+1, this.transport[i].ip.length); + localTransport += ((i !== 0)? ", " : "") + + this.transport[i].localip.substring(this.transport[i].localip.indexOf(":")+1, + this.transport[i].localip.length); } - transport += "
    Transport: " + this.transport[0].type + "
    "; + transport += ""; + transport += localTransport + ""; + transport +="Transport:" + this.transport[0].type + ""; + } - result += "Estimated bandwidth: " + + result += ""; - result += transport; + result += transport + "
    Estimated bandwidth: " + "↓" + downloadBandwidth + " ↑" + - uploadBandwidth + "
    "; + uploadBandwidth + "
    "; }