2013-11-25 11:01:48 -08:00
|
|
|
<?xml version="1.0" encoding="UTF-8"?>
|
|
|
|
|
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
|
|
|
|
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
|
|
|
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!DOCTYPE html [
|
|
|
|
|
<!ENTITY % htmlDTD PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> %htmlDTD;
|
|
|
|
|
]>
|
|
|
|
|
|
|
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
|
<head>
|
|
|
|
|
<title>Webrtc Internals</title>
|
|
|
|
|
</head>
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function displayLogs(logs) {
|
|
|
|
|
var logsDiv = document.getElementById('logs');
|
|
|
|
|
while (logsDiv.lastChild) {
|
|
|
|
|
logsDiv.removeChild(logsDiv.lastChild);
|
|
|
|
|
}
|
|
|
|
|
logsDiv.appendChild(document.createElement('h3'))
|
|
|
|
|
.appendChild(document.createTextNode('Logging:'));
|
|
|
|
|
logs.forEach(function(logLine){
|
|
|
|
|
logsDiv.appendChild(document.createElement('div'))
|
|
|
|
|
.appendChild(document.createTextNode(logLine));
|
2013-11-25 14:38:41 -08:00
|
|
|
});
|
2013-11-25 11:01:48 -08:00
|
|
|
}
|
|
|
|
|
|
2014-02-26 11:12:37 -08:00
|
|
|
function candidateTypeString(cand) {
|
|
|
|
|
if (cand.type == "localcandidate") {
|
|
|
|
|
if (cand.candidateType == "relayed") {
|
|
|
|
|
return cand.candidateType + '-' + cand.mozLocalTransport;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return cand.candidateType;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function candidateAddrString(cand) {
|
|
|
|
|
return cand.ipAddress + ':' +
|
|
|
|
|
cand.portNumber + '/' +
|
|
|
|
|
cand.transport + '(' +
|
|
|
|
|
candidateTypeString(cand) + ')';
|
|
|
|
|
}
|
|
|
|
|
|
2014-02-20 09:35:35 -08:00
|
|
|
function buildCandPairTableRow(candPair, localCand, remoteCand) {
|
2013-11-25 11:01:48 -08:00
|
|
|
var row = document.createElement('tr');
|
|
|
|
|
row.onclick = function() {
|
2014-02-20 09:35:35 -08:00
|
|
|
WebrtcGlobalInformation.getLogging("CAND-PAIR(" + row.id, displayLogs);
|
2013-11-25 11:01:48 -08:00
|
|
|
}
|
|
|
|
|
|
2014-02-20 09:35:35 -08:00
|
|
|
if (localCand) {
|
2013-11-25 11:01:48 -08:00
|
|
|
row.appendChild(document.createElement('td'))
|
2014-02-26 11:12:37 -08:00
|
|
|
.appendChild(document.createTextNode(candidateAddrString(localCand)));
|
2013-11-25 11:01:48 -08:00
|
|
|
} else {
|
|
|
|
|
row.appendChild(document.createElement('td'))
|
|
|
|
|
.appendChild(document.createTextNode(candPair.localCandidateId));
|
|
|
|
|
}
|
|
|
|
|
|
2014-02-20 09:35:35 -08:00
|
|
|
if (remoteCand) {
|
2013-11-25 11:01:48 -08:00
|
|
|
row.appendChild(document.createElement('td'))
|
2014-02-26 11:12:37 -08:00
|
|
|
.appendChild(document.createTextNode(candidateAddrString(remoteCand)));
|
2013-11-25 11:01:48 -08:00
|
|
|
} else {
|
|
|
|
|
row.appendChild(document.createElement('td'))
|
|
|
|
|
.appendChild(document.createTextNode(candPair.remoteCandidateId));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
row.appendChild(document.createElement('td'))
|
|
|
|
|
.appendChild(document.createTextNode(candPair.state));
|
|
|
|
|
row.appendChild(document.createElement('td'))
|
|
|
|
|
.appendChild(document.createTextNode(candPair.mozPriority));
|
|
|
|
|
|
|
|
|
|
row.appendChild(document.createElement('td'))
|
|
|
|
|
.appendChild(document.createTextNode(candPair.nominated ? '*' : ''));
|
|
|
|
|
row.appendChild(document.createElement('td'))
|
|
|
|
|
.appendChild(document.createTextNode(candPair.selected ? '*' : ''));
|
|
|
|
|
return row;
|
|
|
|
|
}
|
|
|
|
|
|
2014-02-20 09:35:35 -08:00
|
|
|
function buildCandTableRow(cand) {
|
2013-11-25 11:01:48 -08:00
|
|
|
var row = document.createElement('tr');
|
|
|
|
|
|
|
|
|
|
row.appendChild(document.createElement('td'))
|
|
|
|
|
.appendChild(document.createTextNode(cand.ipAddress + ':' +
|
2014-02-26 11:12:37 -08:00
|
|
|
cand.portNumber + '/' +
|
|
|
|
|
cand.transport));
|
2013-11-25 11:01:48 -08:00
|
|
|
|
|
|
|
|
row.appendChild(document.createElement('td'))
|
2014-02-26 11:12:37 -08:00
|
|
|
.appendChild(document.createTextNode(candidateTypeString(cand)));
|
2013-11-25 11:01:48 -08:00
|
|
|
return row;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function buildCandPairTableHeader() {
|
|
|
|
|
var headerRow = document.createElement('tr');
|
|
|
|
|
headerRow.appendChild(document.createElement('th'))
|
|
|
|
|
.appendChild(document.createTextNode('Local candidate'));
|
|
|
|
|
headerRow.appendChild(document.createElement('th'))
|
|
|
|
|
.appendChild(document.createTextNode('Remote candidate'));
|
|
|
|
|
headerRow.appendChild(document.createElement('th'))
|
|
|
|
|
.appendChild(document.createTextNode('ICE State'));
|
|
|
|
|
headerRow.appendChild(document.createElement('th'))
|
|
|
|
|
.appendChild(document.createTextNode('Priority'));
|
|
|
|
|
headerRow.appendChild(document.createElement('th'))
|
|
|
|
|
.appendChild(document.createTextNode('Nominated'));
|
|
|
|
|
headerRow.appendChild(document.createElement('th'))
|
|
|
|
|
.appendChild(document.createTextNode('Selected'));
|
|
|
|
|
return headerRow;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function buildCandTableHeader(isLocal) {
|
|
|
|
|
var headerRow = document.createElement('tr');
|
|
|
|
|
headerRow.appendChild(document.createElement('th'))
|
|
|
|
|
.appendChild(document.createTextNode(isLocal ?
|
|
|
|
|
'Local candidate addr' :
|
|
|
|
|
'Remote candidate addr'));
|
|
|
|
|
headerRow.appendChild(document.createElement('th'))
|
|
|
|
|
.appendChild(document.createTextNode('Type'));
|
|
|
|
|
return headerRow;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function buildEmptyCandPairTable() {
|
|
|
|
|
var candPairTable = document.createElement('table');
|
|
|
|
|
candPairTable.appendChild(buildCandPairTableHeader());
|
|
|
|
|
return candPairTable;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function buildEmptyCandTable(local) {
|
|
|
|
|
var candTable = document.createElement('table');
|
|
|
|
|
candTable.appendChild(buildCandTableHeader(local));
|
|
|
|
|
return candTable;
|
|
|
|
|
}
|
|
|
|
|
|
2014-01-16 13:09:25 -08:00
|
|
|
function round00(num) {
|
|
|
|
|
return Math.round(num * 100) / 100;
|
|
|
|
|
}
|
|
|
|
|
|
2014-03-12 14:13:20 -07:00
|
|
|
function dumpAvStat(stat) {
|
|
|
|
|
var div = document.createElement('div');
|
|
|
|
|
var statsString = "";
|
|
|
|
|
if (stat.mozAvSyncDelay !== undefined) {
|
|
|
|
|
statsString += "A/V sync: " + stat.mozAvSyncDelay + " ms ";
|
|
|
|
|
}
|
|
|
|
|
if (stat.mozJitterBufferDelay !== undefined) {
|
|
|
|
|
statsString += "Jitter-buffer delay: " + stat.mozJitterBufferDelay + " ms";
|
|
|
|
|
}
|
|
|
|
|
div.appendChild(document.createTextNode(statsString));
|
|
|
|
|
return div;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function dumpRtpStat(stat, label) {
|
2014-01-21 11:00:06 -08:00
|
|
|
var div = document.createElement('div');
|
|
|
|
|
var statsString = " " + label + new Date(stat.timestamp).toTimeString() +
|
|
|
|
|
" " + stat.type + " SSRC: " + stat.ssrc;
|
|
|
|
|
if (stat.packetsReceived !== undefined) {
|
|
|
|
|
statsString += " Received: " + stat.packetsReceived + " packets";
|
|
|
|
|
if (stat.bytesReceived !== undefined) {
|
|
|
|
|
statsString += " (" + round00(stat.bytesReceived/1024) + " Kb)";
|
|
|
|
|
}
|
2014-03-14 12:22:30 -07:00
|
|
|
statsString += " Lost: " + stat.packetsLost + " Jitter: " + stat.jitter;
|
|
|
|
|
if (stat.mozRtt !== undefined) {
|
|
|
|
|
statsString += " RTT: " + stat.mozRtt + " ms";
|
|
|
|
|
}
|
2014-01-21 11:00:06 -08:00
|
|
|
} else if (stat.packetsSent !== undefined) {
|
|
|
|
|
statsString += " Sent: " + stat.packetsSent + " packets";
|
|
|
|
|
if (stat.bytesSent !== undefined) {
|
|
|
|
|
statsString += " (" + round00(stat.bytesSent/1024) + " Kb)";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
div.appendChild(document.createTextNode(statsString));
|
|
|
|
|
return div;
|
|
|
|
|
}
|
|
|
|
|
|
2014-02-20 09:35:35 -08:00
|
|
|
function buildPcDiv(stats, pcDivHeading) {
|
2013-11-25 11:01:48 -08:00
|
|
|
var newPcDiv = document.createElement('div');
|
|
|
|
|
|
|
|
|
|
var heading = document.createElement('h3');
|
2014-05-05 09:35:57 -07:00
|
|
|
|
|
|
|
|
if (stats.closed) {
|
|
|
|
|
heading.appendChild(document.createTextNode("Closed "));
|
|
|
|
|
}
|
|
|
|
|
|
2014-02-20 09:35:35 -08:00
|
|
|
heading.appendChild(document.createTextNode(pcDivHeading));
|
2014-05-05 09:35:57 -07:00
|
|
|
|
|
|
|
|
heading.appendChild(document.createTextNode(" " +
|
|
|
|
|
new Date(stats.timestamp).toTimeString()));
|
|
|
|
|
|
2013-11-25 11:01:48 -08:00
|
|
|
newPcDiv.appendChild(heading);
|
|
|
|
|
|
2014-02-20 09:35:35 -08:00
|
|
|
// First, ICE stats
|
|
|
|
|
var iceHeading = document.createElement('h4');
|
|
|
|
|
iceHeading.appendChild(document.createTextNode("ICE statistics"));
|
|
|
|
|
newPcDiv.appendChild(iceHeading);
|
2013-11-25 11:01:48 -08:00
|
|
|
|
2014-02-20 09:35:35 -08:00
|
|
|
var iceTablesByComponent = {};
|
2013-11-25 11:01:48 -08:00
|
|
|
|
2014-02-20 09:35:35 -08:00
|
|
|
function getIceTables(componentId) {
|
|
|
|
|
if (!iceTablesByComponent[componentId]) {
|
|
|
|
|
iceTablesByComponent[componentId] = {
|
|
|
|
|
candidatePairTable: buildEmptyCandPairTable(),
|
|
|
|
|
localCandidateTable: buildEmptyCandTable(true),
|
|
|
|
|
remoteCandidateTable: buildEmptyCandTable(false)
|
2013-11-25 11:01:48 -08:00
|
|
|
};
|
|
|
|
|
}
|
2014-02-20 09:35:35 -08:00
|
|
|
return iceTablesByComponent[componentId];
|
|
|
|
|
}
|
2013-11-25 11:01:48 -08:00
|
|
|
|
2014-02-20 09:35:35 -08:00
|
|
|
// Candidates
|
|
|
|
|
var candidateMap = {}; // Used later to speed up recording of candidate pairs
|
2013-11-25 11:01:48 -08:00
|
|
|
|
2014-02-20 09:35:35 -08:00
|
|
|
if (stats.iceCandidateStats) {
|
|
|
|
|
stats.iceCandidateStats.forEach(function(cand) {
|
|
|
|
|
var tables = getIceTables(cand.componentId);
|
|
|
|
|
|
|
|
|
|
candidateMap[cand.id] = cand;
|
|
|
|
|
|
|
|
|
|
if (cand.type == "localcandidate") {
|
|
|
|
|
tables.localCandidateTable.appendChild(buildCandTableRow(cand));
|
|
|
|
|
} else {
|
|
|
|
|
tables.remoteCandidateTable.appendChild(buildCandTableRow(cand));
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
2013-11-25 11:01:48 -08:00
|
|
|
|
2014-02-20 09:35:35 -08:00
|
|
|
// Candidate pairs
|
|
|
|
|
if (stats.iceCandidatePairStats) {
|
|
|
|
|
stats.iceCandidatePairStats.forEach(function(candPair) {
|
|
|
|
|
var candPairTable =
|
|
|
|
|
getIceTables(candPair.componentId).candidatePairTable;
|
|
|
|
|
candPairTable.appendChild(
|
|
|
|
|
buildCandPairTableRow(candPair,
|
|
|
|
|
candidateMap[candPair.localCandidateId],
|
|
|
|
|
candidateMap[candPair.remoteCandidateId]));
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Now that tables are completely built, put them on the page.
|
|
|
|
|
for (var cid in iceTablesByComponent) {
|
|
|
|
|
if (iceTablesByComponent.hasOwnProperty(cid)) {
|
|
|
|
|
var tables = iceTablesByComponent[cid];
|
2013-11-25 11:01:48 -08:00
|
|
|
newPcDiv.appendChild(document.createElement('h4'))
|
|
|
|
|
.appendChild(document.createTextNode(cid));
|
2014-02-20 09:35:35 -08:00
|
|
|
newPcDiv.appendChild(tables.candidatePairTable);
|
|
|
|
|
newPcDiv.appendChild(tables.localCandidateTable);
|
|
|
|
|
newPcDiv.appendChild(tables.remoteCandidateTable);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// end of ICE stats
|
|
|
|
|
|
|
|
|
|
// Now, RTP stats
|
|
|
|
|
var rtpHeading = document.createElement('h4');
|
|
|
|
|
rtpHeading.appendChild(document.createTextNode("RTP statistics"));
|
|
|
|
|
newPcDiv.appendChild(rtpHeading);
|
|
|
|
|
|
|
|
|
|
// Build map from id -> remote RTP stats (ie; stats obtained from RTCP
|
|
|
|
|
// from the other end). This allows us to pair up local/remote stats for
|
|
|
|
|
// the same stream more easily.
|
|
|
|
|
var remoteRtpStatsMap = {};
|
|
|
|
|
|
|
|
|
|
var addRemoteStatToMap = function (rtpStat) {
|
|
|
|
|
if (rtpStat.isRemote) {
|
|
|
|
|
remoteRtpStatsMap[rtpStat.id] = rtpStat;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (stats.inboundRTPStreamStats) {
|
|
|
|
|
stats.inboundRTPStreamStats.forEach(addRemoteStatToMap);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (stats.outboundRTPStreamStats) {
|
|
|
|
|
stats.outboundRTPStreamStats.forEach(addRemoteStatToMap);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var addRtpStatPairToDocument = function (rtpStat) {
|
|
|
|
|
if (!rtpStat.isRemote) {
|
|
|
|
|
newPcDiv.appendChild(document.createElement('h5'))
|
|
|
|
|
.appendChild(document.createTextNode(rtpStat.id));
|
2014-03-12 14:13:20 -07:00
|
|
|
if (rtpStat.mozAvSyncDelay !== undefined ||
|
|
|
|
|
rtpStat.mozJitterBufferDelay !== undefined) {
|
|
|
|
|
newPcDiv.appendChild(dumpAvStat(rtpStat));
|
|
|
|
|
}
|
|
|
|
|
newPcDiv.appendChild(dumpRtpStat(rtpStat, "Local: "));
|
2014-02-20 09:35:35 -08:00
|
|
|
|
|
|
|
|
// Might not be receiving RTCP, so we have no idea what the
|
|
|
|
|
// statistics look like from the perspective of the other end.
|
|
|
|
|
if (rtpStat.remoteId) {
|
|
|
|
|
var remoteRtpStat = remoteRtpStatsMap[rtpStat.remoteId];
|
2014-03-12 14:13:20 -07:00
|
|
|
newPcDiv.appendChild(dumpRtpStat(remoteRtpStat, "Remote: "));
|
2014-02-20 09:35:35 -08:00
|
|
|
}
|
2013-11-25 11:01:48 -08:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2014-02-20 09:35:35 -08:00
|
|
|
if (stats.outboundRTPStreamStats) {
|
|
|
|
|
stats.outboundRTPStreamStats.forEach(addRtpStatPairToDocument);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (stats.inboundRTPStreamStats) {
|
|
|
|
|
stats.inboundRTPStreamStats.forEach(addRtpStatPairToDocument);
|
|
|
|
|
}
|
|
|
|
|
|
2013-11-25 11:01:48 -08:00
|
|
|
return newPcDiv;
|
|
|
|
|
}
|
|
|
|
|
|
2014-02-20 09:35:35 -08:00
|
|
|
function displayStats(globalReport) {
|
2013-11-25 11:01:48 -08:00
|
|
|
console.log("Got stats callback.");
|
2014-02-20 09:35:35 -08:00
|
|
|
globalReport.reports.forEach(function (report) {
|
|
|
|
|
var pcDivHeading = 'PeerConnection:' + report.pcid;
|
2013-11-25 11:01:48 -08:00
|
|
|
|
2014-02-20 09:35:35 -08:00
|
|
|
var pcDiv = document.getElementById(pcDivHeading);
|
|
|
|
|
var newPcDiv = buildPcDiv(report, pcDivHeading);
|
|
|
|
|
newPcDiv.id = pcDivHeading;
|
2013-11-25 11:01:48 -08:00
|
|
|
|
2014-02-20 09:35:35 -08:00
|
|
|
if (!pcDiv) {
|
|
|
|
|
document.getElementById('stats').appendChild(newPcDiv);
|
|
|
|
|
} else {
|
|
|
|
|
document.getElementById('stats').replaceChild(newPcDiv, pcDiv);
|
|
|
|
|
}
|
|
|
|
|
});
|
2013-11-25 11:01:48 -08:00
|
|
|
|
2014-02-20 09:35:35 -08:00
|
|
|
globalReport.errors.forEach(function (error) {
|
|
|
|
|
var pcDivHeading = 'PeerConnection:' + error.pcid;
|
|
|
|
|
|
|
|
|
|
var pcDiv = document.getElementById(pcDivHeading);
|
|
|
|
|
var newPcDiv = buildPcDiv(error, pcDivHeading);
|
|
|
|
|
newPcDiv.id = pcDivHeading;
|
|
|
|
|
|
|
|
|
|
if (pcDiv) {
|
|
|
|
|
document.getElementById('stats').replaceChild(newPcDiv, pcDiv);
|
|
|
|
|
} else {
|
|
|
|
|
document.getElementById('stats').appendChild(newPcDiv);
|
|
|
|
|
}
|
|
|
|
|
});
|
2013-11-25 11:01:48 -08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
2014-02-20 09:35:35 -08:00
|
|
|
<body id="body" onload="WebrtcGlobalInformation.getAllStats(displayStats)">
|
2013-11-25 11:01:48 -08:00
|
|
|
<div id="stats">
|
|
|
|
|
</div>
|
2014-02-20 09:35:35 -08:00
|
|
|
<button onclick="WebrtcGlobalInformation.getLogging('', displayLogs)">
|
|
|
|
|
Show/refresh logging
|
|
|
|
|
</button>
|
2013-11-25 11:01:48 -08:00
|
|
|
<div id="logs">
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
<!-- vim: softtabstop=2:shiftwidth=2:expandtab
|
|
|
|
|
-->
|
