Skip to content

Instantly share code, notes, and snippets.

@leader22 leader22/util.js

Created Dec 12, 2019
Embed
What would you like to do?
Dump of chrome://webrtc-internals by Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.79 Safari/537.36"
// Copyright (c) 2012 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// #import {assertInstanceof} from './assert.m.js';
// #import {dispatchSimpleEvent} from './cr.m.js';
// // Copyright (c) 2013 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/**
* @fileoverview Assertion support.
*/
/**
* Verify |condition| is truthy and return |condition| if so.
* @template T
* @param {T} condition A condition to check for truthiness. Note that this
* may be used to test whether a value is defined or not, and we don't want
* to force a cast to Boolean.
* @param {string=} opt_message A message to show on failure.
* @return {T} A non-null |condition|.
* @closurePrimitive {asserts.truthy}
*/
/* #export */ function assert(condition, opt_message) {
if (!condition) {
let message = "Assertion failed";
if (opt_message) {
message = message + ": " + opt_message;
}
const error = new Error(message);
const global = (function() {
const thisOrSelf = this || self;
/** @type {boolean} */
thisOrSelf.traceAssertionsForTesting;
return thisOrSelf;
})();
if (global.traceAssertionsForTesting) {
console.warn(error.stack);
}
throw error;
}
return condition;
}
/**
* Call this from places in the code that should never be reached.
*
* For example, handling all the values of enum with a switch() like this:
*
* function getValueFromEnum(enum) {
* switch (enum) {
* case ENUM_FIRST_OF_TWO:
* return first
* case ENUM_LAST_OF_TWO:
* return last;
* }
* assertNotReached();
* return document;
* }
*
* This code should only be hit in the case of serious programmer error or
* unexpected input.
*
* @param {string=} opt_message A message to show when this is hit.
* @closurePrimitive {asserts.fail}
*/
/* #export */ function assertNotReached(opt_message) {
assert(false, opt_message || "Unreachable code hit");
}
/**
* @param {*} value The value to check.
* @param {function(new: T, ...)} type A user-defined constructor.
* @param {string=} opt_message A message to show when this is hit.
* @return {T}
* @template T
*/
/* #export */ function assertInstanceof(value, type, opt_message) {
// We don't use assert immediately here so that we avoid constructing an error
// message if we don't have to.
if (!(value instanceof type)) {
assertNotReached(
opt_message ||
"Value " + value + " is not a[n] " + (type.name || typeof type)
);
}
return value;
}
/**
* Alias for document.getElementById. Found elements must be HTMLElements.
* @param {string} id The ID of the element to find.
* @return {HTMLElement} The found element or null if not found.
*/
/* #export */ function $(id) {
// Disable getElementById restriction here, since we are instructing other
// places to re-use the $() that is defined here.
// eslint-disable-next-line no-restricted-properties
const el = document.getElementById(id);
return el ? assertInstanceof(el, HTMLElement) : null;
}
// TODO(devlin): This should return SVGElement, but closure compiler is missing
// those externs.
/**
* Alias for document.getElementById. Found elements must be SVGElements.
* @param {string} id The ID of the element to find.
* @return {Element} The found element or null if not found.
*/
/* #export */ function getSVGElement(id) {
// Disable getElementById restriction here, since it is not suitable for SVG
// elements.
// eslint-disable-next-line no-restricted-properties
const el = document.getElementById(id);
return el ? assertInstanceof(el, Element) : null;
}
/**
* @return {?Element} The currently focused element (including elements that are
* behind a shadow root), or null if nothing is focused.
*/
/* #export */ function getDeepActiveElement() {
let a = document.activeElement;
while (a && a.shadowRoot && a.shadowRoot.activeElement) {
a = a.shadowRoot.activeElement;
}
return a;
}
//
/**
* @param {Node} el A node to search for ancestors with |className|.
* @param {string} className A class to search for.
* @return {Element} A node with class of |className| or null if none is found.
*/
/* #export */ function findAncestorByClass(el, className) {
return /** @type {Element} */ (findAncestor(el, function(el) {
return el.classList && el.classList.contains(className);
}));
}
/**
* Return the first ancestor for which the {@code predicate} returns true.
* @param {Node} node The node to check.
* @param {function(Node):boolean} predicate The function that tests the
* nodes.
* @return {Node} The found ancestor or null if not found.
*/
/* #export */ function findAncestor(node, predicate) {
let last = false;
while (node != null && !(last = predicate(node))) {
node = node.parentNode;
}
return last ? node : null;
}
/**
* Disables text selection and dragging, with optional whitelist callbacks.
* @param {function(Event):boolean=} opt_allowSelectStart Unless this function
* is defined and returns true, the onselectionstart event will be
* surpressed.
* @param {function(Event):boolean=} opt_allowDragStart Unless this function
* is defined and returns true, the ondragstart event will be surpressed.
*/
/* #export */ function disableTextSelectAndDrag(
opt_allowSelectStart,
opt_allowDragStart
) {
// Disable text selection.
document.onselectstart = function(e) {
if (!(opt_allowSelectStart && opt_allowSelectStart.call(this, e))) {
e.preventDefault();
}
};
// Disable dragging.
document.ondragstart = function(e) {
if (!(opt_allowDragStart && opt_allowDragStart.call(this, e))) {
e.preventDefault();
}
};
}
/**
* Check the directionality of the page.
* @return {boolean} True if Chrome is running an RTL UI.
*/
/* #export */ function isRTL() {
return document.documentElement.dir == "rtl";
}
/**
* Get an element that's known to exist by its ID. We use this instead of just
* calling getElementById and not checking the result because this lets us
* satisfy the JSCompiler type system.
* @param {string} id The identifier name.
* @return {!HTMLElement} the Element.
*/
/* #export */ function getRequiredElement(id) {
return assertInstanceof(
$(id),
HTMLElement,
"Missing required element: " + id
);
}
/**
* Query an element that's known to exist by a selector. We use this instead of
* just calling querySelector and not checking the result because this lets us
* satisfy the JSCompiler type system.
* @param {string} selectors CSS selectors to query the element.
* @param {(!Document|!DocumentFragment|!Element)=} opt_context An optional
* context object for querySelector.
* @return {!HTMLElement} the Element.
*/
/* #export */ function queryRequiredElement(selectors, opt_context) {
const element = (opt_context || document).querySelector(selectors);
return assertInstanceof(
element,
HTMLElement,
"Missing required element: " + selectors
);
}
// Handle click on a link. If the link points to a chrome: or file: url, then
// call into the browser to do the navigation.
["click", "auxclick"].forEach(function(eventName) {
document.addEventListener(eventName, function(e) {
if (e.button > 1) {
return;
} // Ignore buttons other than left and middle.
if (e.defaultPrevented) {
return;
}
const eventPath = e.path;
let anchor = null;
if (eventPath) {
for (let i = 0; i < eventPath.length; i++) {
const element = eventPath[i];
if (element.tagName === "A" && element.href) {
anchor = element;
break;
}
}
}
// Fallback if Event.path is not available.
let el = e.target;
if (
!anchor &&
el.nodeType == Node.ELEMENT_NODE &&
el.webkitMatchesSelector("A, A *")
) {
while (el.tagName != "A") {
el = el.parentElement;
}
anchor = el;
}
if (!anchor) {
return;
}
anchor = /** @type {!HTMLAnchorElement} */ (anchor);
if (
(anchor.protocol == "file:" || anchor.protocol == "about:") &&
(e.button == 0 || e.button == 1)
) {
chrome.send("navigateToUrl", [
anchor.href,
anchor.target,
e.button,
e.altKey,
e.ctrlKey,
e.metaKey,
e.shiftKey
]);
e.preventDefault();
}
});
});
/**
* Creates a new URL which is the old URL with a GET param of key=value.
* @param {string} url The base URL. There is not sanity checking on the URL so
* it must be passed in a proper format.
* @param {string} key The key of the param.
* @param {string} value The value of the param.
* @return {string} The new URL.
*/
/* #export */ function appendParam(url, key, value) {
const param = encodeURIComponent(key) + "=" + encodeURIComponent(value);
if (url.indexOf("?") == -1) {
return url + "?" + param;
}
return url + "&" + param;
}
/**
* Creates an element of a specified type with a specified class name.
* @param {string} type The node type.
* @param {string} className The class name to use.
* @return {Element} The created element.
*/
/* #export */ function createElementWithClassName(type, className) {
const elm = document.createElement(type);
elm.className = className;
return elm;
}
/**
* transitionend does not always fire (e.g. when animation is aborted
* or when no paint happens during the animation). This function sets up
* a timer and emulate the event if it is not fired when the timer expires.
* @param {!HTMLElement} el The element to watch for transitionend.
* @param {number=} opt_timeOut The maximum wait time in milliseconds for the
* transitionend to happen. If not specified, it is fetched from |el|
* using the transitionDuration style value.
*/
/* #export */ function ensureTransitionEndEvent(el, opt_timeOut) {
if (opt_timeOut === undefined) {
const style = getComputedStyle(el);
opt_timeOut = parseFloat(style.transitionDuration) * 1000;
// Give an additional 50ms buffer for the animation to complete.
opt_timeOut += 50;
}
let fired = false;
el.addEventListener("transitionend", function f(e) {
el.removeEventListener("transitionend", f);
fired = true;
});
window.setTimeout(function() {
if (!fired) {
cr.dispatchSimpleEvent(el, "transitionend", true);
}
}, opt_timeOut);
}
/**
* Alias for document.scrollTop getter.
* @param {!HTMLDocument} doc The document node where information will be
* queried from.
* @return {number} The Y document scroll offset.
*/
/* #export */ function scrollTopForDocument(doc) {
return doc.documentElement.scrollTop || doc.body.scrollTop;
}
/**
* Alias for document.scrollTop setter.
* @param {!HTMLDocument} doc The document node where information will be
* queried from.
* @param {number} value The target Y scroll offset.
*/
/* #export */ function setScrollTopForDocument(doc, value) {
doc.documentElement.scrollTop = doc.body.scrollTop = value;
}
/**
* Alias for document.scrollLeft getter.
* @param {!HTMLDocument} doc The document node where information will be
* queried from.
* @return {number} The X document scroll offset.
*/
/* #export */ function scrollLeftForDocument(doc) {
return doc.documentElement.scrollLeft || doc.body.scrollLeft;
}
/**
* Alias for document.scrollLeft setter.
* @param {!HTMLDocument} doc The document node where information will be
* queried from.
* @param {number} value The target X scroll offset.
*/
/* #export */ function setScrollLeftForDocument(doc, value) {
doc.documentElement.scrollLeft = doc.body.scrollLeft = value;
}
/**
* Replaces '&', '<', '>', '"', and ''' characters with their HTML encoding.
* @param {string} original The original string.
* @return {string} The string with all the characters mentioned above replaced.
*/
/* #export */ function HTMLEscape(original) {
return original
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#39;");
}
/**
* Shortens the provided string (if necessary) to a string of length at most
* |maxLength|.
* @param {string} original The original string.
* @param {number} maxLength The maximum length allowed for the string.
* @return {string} The original string if its length does not exceed
* |maxLength|. Otherwise the first |maxLength| - 1 characters with '...'
* appended.
*/
/* #export */ function elide(original, maxLength) {
if (original.length <= maxLength) {
return original;
}
return original.substring(0, maxLength - 1) + "\u2026";
}
/**
* Quote a string so it can be used in a regular expression.
* @param {string} str The source string.
* @return {string} The escaped string.
*/
/* #export */ function quoteString(str) {
return str.replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1");
}
/**
* Calls |callback| and stops listening the first time any event in |eventNames|
* is triggered on |target|.
* @param {!EventTarget} target
* @param {!Array<string>|string} eventNames Array or space-delimited string of
* event names to listen to (e.g. 'click mousedown').
* @param {function(!Event)} callback Called at most once. The
* optional return value is passed on by the listener.
*/
/* #export */ function listenOnce(target, eventNames, callback) {
if (!Array.isArray(eventNames)) {
eventNames = eventNames.split(/ +/);
}
const removeAllAndCallCallback = function(event) {
eventNames.forEach(function(eventName) {
target.removeEventListener(eventName, removeAllAndCallCallback, false);
});
return callback(event);
};
eventNames.forEach(function(eventName) {
target.addEventListener(eventName, removeAllAndCallCallback, false);
});
}
// /* is_ios */
/**
* @param {!Event} e
* @return {boolean} Whether a modifier key was down when processing |e|.
*/
/* #export */ function hasKeyModifiers(e) {
return !!(e.altKey || e.ctrlKey || e.metaKey || e.shiftKey);
}
/**
* @param {!Element} el
* @return {boolean} Whether the element is interactive via text input.
*/
function isTextInputElement(el) {
return el.tagName == "INPUT" || el.tagName == "TEXTAREA";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>WebRTC Internals</title>
<style>
/* Copyright (c) 2013 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
.peer-connection-dump-root {
font-size: 0.8em;
padding-bottom: 3px;
}
.update-log-container {
float: left;
width: 50em;
overflow: auto;
}
.update-log-failure {
background-color: #be2026;
}
.update-log-legacy-api-usage {
background-color: #fed14b;
}
.ssrc-info-block {
color: #999;
font-size: 0.8em;
}
.stats-graph-container {
clear: both;
margin: 0.5em 0 0.5em 0;
}
.stats-graph-sub-container {
float: left;
margin: 0.5em;
}
.stats-graph-sub-container > div {
float: left;
}
.stats-graph-sub-container > div:first-child {
float: none;
}
.stats-table-container {
float: left;
padding: 0 0 0 0;
overflow: auto;
}
.stats-table-container > div:first-child {
font-size: 0.8em;
font-weight: bold;
text-align: center;
padding: 0 0 1em 0;
}
.stats-table-active-connection {
font-weight: bold;
}
body {
font-family: "Lucida Grande", sans-serif;
}
table {
border: none;
margin: 0 1em 1em 0;
}
td {
border: none;
font-size: 0.8em;
padding: 0 1em 0.5em 0;
min-width: 10em;
word-break: break-all;
}
table > tr {
vertical-align: top;
}
th {
border: none;
font-size: 0.8em;
padding: 0 0 0.5em 0;
}
.tab-head {
background-color: rgb(220, 220, 220);
margin: 10px 2px 0 2px;
text-decoration: underline;
cursor: pointer;
display: inline-block;
overflow: hidden;
width: 20em;
height: 3em;
}
.active-tab-head {
background-color: turquoise;
font-weight: bold;
}
.tab-body {
border: 1px solid turquoise;
border-top-width: 3px;
padding: 0 10px 500px 10px;
display: none;
}
.active-tab-body {
display: block;
}
.user-media-request-div-class {
background-color: lightgray;
margin: 10px 0 10px 0;
}
.user-media-request-div-class > div {
margin: 5px 0 5px 0;
}
.audio-diagnostic-dumps-info {
max-width: 60em;
}
</style>
<script src="chrome://resources/js/util.js"></script>
<script src="webrtc_internals.js"></script>
</head>
<body>
<p id="content-root"></p>
</body>
</html>
// Copyright (c) 2013 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
var USER_MEDIA_TAB_ID = "user-media-tab-id";
const OPTION_GETSTATS_STANDARD = "Standardized (promise-based) getStats() API";
const OPTION_GETSTATS_LEGACY =
"Legacy Non-Standard (callback-based) getStats() API";
let currentGetStatsMethod = OPTION_GETSTATS_STANDARD;
var tabView = null;
var ssrcInfoManager = null;
var peerConnectionUpdateTable = null;
var statsTable = null;
var dumpCreator = null;
/** A map from peer connection id to the PeerConnectionRecord. */
var peerConnectionDataStore = {};
/** A list of getUserMedia requests. */
var userMediaRequests = [];
/** Maps from id (see getPeerConnectionId) to StatsRatesCalculator. */
statsRatesCalculatorById = new Map();
/** A simple class to store the updates and stats data for a peer connection. */
var PeerConnectionRecord = (function() {
/** @constructor */
function PeerConnectionRecord() {
/** @private */
this.record_ = {
constraints: {},
rtcConfiguration: [],
stats: {},
updateLog: [],
url: ""
};
}
PeerConnectionRecord.prototype = {
/** @override */
toJSON: function() {
return this.record_;
},
/**
* Adds the initilization info of the peer connection.
* @param {string} url The URL of the web page owning the peer connection.
* @param {Array} rtcConfiguration
* @param {!Object} constraints Media constraints.
*/
initialize: function(url, rtcConfiguration, constraints) {
this.record_.url = url;
this.record_.rtcConfiguration = rtcConfiguration;
this.record_.constraints = constraints;
},
resetStats: function() {
this.record_.stats = {};
},
/**
* @param {string} dataSeriesId The TimelineDataSeries identifier.
* @return {!TimelineDataSeries}
*/
getDataSeries: function(dataSeriesId) {
return this.record_.stats[dataSeriesId];
},
/**
* @param {string} dataSeriesId The TimelineDataSeries identifier.
* @param {!TimelineDataSeries} dataSeries The TimelineDataSeries to set to.
*/
setDataSeries: function(dataSeriesId, dataSeries) {
this.record_.stats[dataSeriesId] = dataSeries;
},
/**
* @param {!Object} update The object contains keys "time", "type", and
* "value".
*/
addUpdate: function(update) {
var time = new Date(parseFloat(update.time));
this.record_.updateLog.push({
time: time.toLocaleString(),
type: update.type,
value: update.value
});
}
};
return PeerConnectionRecord;
})();
// The maximum number of data points bufferred for each stats. Old data points
// will be shifted out when the buffer is full.
var MAX_STATS_DATA_POINT_BUFFER_SIZE = 1000;
// // Copyright 2013 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/**
* A TabView provides the ability to create tabs and switch between tabs. It's
* responsible for creating the DOM and managing the visibility of each tab.
* The first added tab is active by default and the others hidden.
*/
var TabView = (function() {
"use strict";
/**
* @constructor
* @param {Element} root The root DOM element containing the tabs.
*/
function TabView(root) {
this.root_ = root;
this.ACTIVE_TAB_HEAD_CLASS_ = "active-tab-head";
this.ACTIVE_TAB_BODY_CLASS_ = "active-tab-body";
this.TAB_HEAD_CLASS_ = "tab-head";
this.TAB_BODY_CLASS_ = "tab-body";
/**
* A mapping for an id to the tab elements.
* @type {!Object<!TabDom>}
* @private
*/
this.tabElements_ = {};
this.headBar_ = null;
this.activeTabId_ = null;
this.initializeHeadBar_();
}
// Creates a simple object containing the tab head and body elements.
function TabDom(h, b) {
this.head = h;
this.body = b;
}
TabView.prototype = {
/**
* Adds a tab with the specified id and title.
* @param {string} id
* @param {string} title
* @return {!Element} The tab body element.
*/
addTab: function(id, title) {
if (this.tabElements_[id]) {
throw "Tab already exists: " + id;
}
var head = document.createElement("span");
head.className = this.TAB_HEAD_CLASS_;
head.textContent = title;
head.title = title;
this.headBar_.appendChild(head);
head.addEventListener("click", this.switchTab_.bind(this, id));
var body = document.createElement("div");
body.className = this.TAB_BODY_CLASS_;
body.id = id;
this.root_.appendChild(body);
this.tabElements_[id] = new TabDom(head, body);
if (!this.activeTabId_) {
this.switchTab_(id);
}
return this.tabElements_[id].body;
},
/** Removes the tab. @param {string} id */
removeTab: function(id) {
if (!this.tabElements_[id]) {
return;
}
this.tabElements_[id].head.parentNode.removeChild(
this.tabElements_[id].head
);
this.tabElements_[id].body.parentNode.removeChild(
this.tabElements_[id].body
);
delete this.tabElements_[id];
if (this.activeTabId_ == id) {
this.switchTab_(Object.keys(this.tabElements_)[0]);
}
},
/**
* Switches the specified tab into view.
*
* @param {string} activeId The id the of the tab that should be switched to
* active state.
* @private
*/
switchTab_: function(activeId) {
if (this.activeTabId_ && this.tabElements_[this.activeTabId_]) {
this.tabElements_[this.activeTabId_].body.classList.remove(
this.ACTIVE_TAB_BODY_CLASS_
);
this.tabElements_[this.activeTabId_].head.classList.remove(
this.ACTIVE_TAB_HEAD_CLASS_
);
}
this.activeTabId_ = activeId;
if (this.tabElements_[activeId]) {
this.tabElements_[activeId].body.classList.add(
this.ACTIVE_TAB_BODY_CLASS_
);
this.tabElements_[activeId].head.classList.add(
this.ACTIVE_TAB_HEAD_CLASS_
);
}
},
/** Initializes the bar containing the tab heads. */
initializeHeadBar_: function() {
this.headBar_ = document.createElement("div");
this.root_.appendChild(this.headBar_);
this.headBar_.style.textAlign = "center";
}
};
return TabView;
})();
// // Copyright (c) 2013 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/**
* A TimelineDataSeries collects an ordered series of (time, value) pairs,
* and converts them to graph points. It also keeps track of its color and
* current visibility state.
* It keeps MAX_STATS_DATA_POINT_BUFFER_SIZE data points at most. Old data
* points will be dropped when it reaches this size.
*/
var TimelineDataSeries = (function() {
"use strict";
/**
* @constructor
*/
function TimelineDataSeries() {
// List of DataPoints in chronological order.
this.dataPoints_ = [];
// Default color. Should always be overridden prior to display.
this.color_ = "red";
// Whether or not the data series should be drawn.
this.isVisible_ = true;
this.cacheStartTime_ = null;
this.cacheStepSize_ = 0;
this.cacheValues_ = [];
}
TimelineDataSeries.prototype = {
/**
* @override
*/
toJSON: function() {
if (this.dataPoints_.length < 1) {
return {};
}
var values = [];
for (var i = 0; i < this.dataPoints_.length; ++i) {
values.push(this.dataPoints_[i].value);
}
return {
startTime: this.dataPoints_[0].time,
endTime: this.dataPoints_[this.dataPoints_.length - 1].time,
values: JSON.stringify(values)
};
},
/**
* Adds a DataPoint to |this| with the specified time and value.
* DataPoints are assumed to be received in chronological order.
*/
addPoint: function(timeTicks, value) {
var time = new Date(timeTicks);
this.dataPoints_.push(new DataPoint(time, value));
if (this.dataPoints_.length > MAX_STATS_DATA_POINT_BUFFER_SIZE) {
this.dataPoints_.shift();
}
},
isVisible: function() {
return this.isVisible_;
},
show: function(isVisible) {
this.isVisible_ = isVisible;
},
getColor: function() {
return this.color_;
},
setColor: function(color) {
this.color_ = color;
},
getCount: function() {
return this.dataPoints_.length;
},
/**
* Returns a list containing the values of the data series at |count|
* points, starting at |startTime|, and |stepSize| milliseconds apart.
* Caches values, so showing/hiding individual data series is fast.
*/
getValues: function(startTime, stepSize, count) {
// Use cached values, if we can.
if (
this.cacheStartTime_ == startTime &&
this.cacheStepSize_ == stepSize &&
this.cacheValues_.length == count
) {
return this.cacheValues_;
}
// Do all the work.
this.cacheValues_ = this.getValuesInternal_(startTime, stepSize, count);
this.cacheStartTime_ = startTime;
this.cacheStepSize_ = stepSize;
return this.cacheValues_;
},
/**
* Returns the cached |values| in the specified time period.
*/
getValuesInternal_: function(startTime, stepSize, count) {
var values = [];
var nextPoint = 0;
var currentValue = 0;
var time = startTime;
for (var i = 0; i < count; ++i) {
while (
nextPoint < this.dataPoints_.length &&
this.dataPoints_[nextPoint].time < time
) {
currentValue = this.dataPoints_[nextPoint].value;
++nextPoint;
}
values[i] = currentValue;
time += stepSize;
}
return values;
}
};
/**
* A single point in a data series. Each point has a time, in the form of
* milliseconds since the Unix epoch, and a numeric value.
* @constructor
*/
function DataPoint(time, value) {
this.time = time;
this.value = value;
}
return TimelineDataSeries;
})();
// // Copyright (c) 2013 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/**
* Get the ssrc if |report| is an ssrc report.
*
* @param {!Object} report The object contains id, type, and stats, where stats
* is the object containing timestamp and values, which is an array of
* strings, whose even index entry is the name of the stat, and the odd
* index entry is the value.
* @return {?string} The ssrc.
*/
function GetSsrcFromReport(report) {
if (report.type != "ssrc") {
console.warn("Trying to get ssrc from non-ssrc report.");
return null;
}
// If the 'ssrc' name-value pair exists, return the value; otherwise, return
// the report id.
// The 'ssrc' name-value pair only exists in an upcoming Libjingle change. Old
// versions use id to refer to the ssrc.
//
// TODO(jiayl): remove the fallback to id once the Libjingle change is rolled
// to Chrome.
if (report.stats && report.stats.values) {
for (var i = 0; i < report.stats.values.length - 1; i += 2) {
if (report.stats.values[i] == "ssrc") {
return report.stats.values[i + 1];
}
}
}
return report.id;
}
/**
* SsrcInfoManager stores the ssrc stream info extracted from SDP.
*/
var SsrcInfoManager = (function() {
"use strict";
/**
* @constructor
*/
function SsrcInfoManager() {
/**
* Map from ssrc id to an object containing all the stream properties.
* @type {!Object<!Object<string>>}
* @private
*/
this.streamInfoContainer_ = {};
/**
* The string separating attibutes in an SDP.
* @type {string}
* @const
* @private
*/
this.ATTRIBUTE_SEPARATOR_ = /[\r,\n]/;
/**
* The regex separating fields within an ssrc description.
* @type {RegExp}
* @const
* @private
*/
this.FIELD_SEPARATOR_REGEX_ = / .*:/;
/**
* The prefix string of an ssrc description.
* @type {string}
* @const
* @private
*/
this.SSRC_ATTRIBUTE_PREFIX_ = "a=ssrc:";
/**
* The className of the ssrc info parent element.
* @type {string}
* @const
*/
this.SSRC_INFO_BLOCK_CLASS = "ssrc-info-block";
}
SsrcInfoManager.prototype = {
/**
* Extracts the stream information from |sdp| and saves it.
* For example:
* a=ssrc:1234 msid:abcd
* a=ssrc:1234 label:hello
*
* @param {string} sdp The SDP string.
*/
addSsrcStreamInfo: function(sdp) {
var attributes = sdp.split(this.ATTRIBUTE_SEPARATOR_);
for (var i = 0; i < attributes.length; ++i) {
// Check if this is a ssrc attribute.
if (attributes[i].indexOf(this.SSRC_ATTRIBUTE_PREFIX_) != 0) {
continue;
}
var nextFieldIndex = attributes[i].search(this.FIELD_SEPARATOR_REGEX_);
if (nextFieldIndex == -1) {
continue;
}
var ssrc = attributes[i].substring(
this.SSRC_ATTRIBUTE_PREFIX_.length,
nextFieldIndex
);
if (!this.streamInfoContainer_[ssrc]) {
this.streamInfoContainer_[ssrc] = {};
}
// Make |rest| starting at the next field.
var rest = attributes[i].substring(nextFieldIndex + 1);
var name, value;
while (rest.length > 0) {
nextFieldIndex = rest.search(this.FIELD_SEPARATOR_REGEX_);
if (nextFieldIndex == -1) {
nextFieldIndex = rest.length;
}
// The field name is the string before the colon.
name = rest.substring(0, rest.indexOf(":"));
// The field value is from after the colon to the next field.
value = rest.substring(rest.indexOf(":") + 1, nextFieldIndex);
this.streamInfoContainer_[ssrc][name] = value;
// Move |rest| to the start of the next field.
rest = rest.substring(nextFieldIndex + 1);
}
}
},
/**
* @param {string} sdp The ssrc id.
* @return {!Object<string>} The object containing the ssrc infomation.
*/
getStreamInfo: function(ssrc) {
return this.streamInfoContainer_[ssrc];
},
/**
* Populate the ssrc information into |parentElement|, each field as a
* DIV element.
*
* @param {!Element} parentElement The parent element for the ssrc info.
* @param {string} ssrc The ssrc id.
*/
populateSsrcInfo: function(parentElement, ssrc) {
if (!this.streamInfoContainer_[ssrc]) {
return;
}
parentElement.className = this.SSRC_INFO_BLOCK_CLASS;
var fieldElement;
for (var property in this.streamInfoContainer_[ssrc]) {
fieldElement = document.createElement("div");
parentElement.appendChild(fieldElement);
fieldElement.textContent =
property + ":" + this.streamInfoContainer_[ssrc][property];
}
}
};
return SsrcInfoManager;
})();
// // Copyright (c) 2013 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
//
// This file contains helper methods to draw the stats timeline graphs.
// Each graph represents a series of stats report for a PeerConnection,
// e.g. 1234-0-ssrc-abcd123-bytesSent is the graph for the series of bytesSent
// for ssrc-abcd123 of PeerConnection 0 in process 1234.
// The graphs are drawn as CANVAS, grouped per report type per PeerConnection.
// Each group has an expand/collapse button and is collapsed initially.
//
// // Copyright (c) 2013 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/**
* A TimelineGraphView displays a timeline graph on a canvas element.
*/
var TimelineGraphView = (function() {
"use strict";
// Maximum number of labels placed vertically along the sides of the graph.
var MAX_VERTICAL_LABELS = 6;
// Vertical spacing between labels and between the graph and labels.
var LABEL_VERTICAL_SPACING = 4;
// Horizontal spacing between vertically placed labels and the edges of the
// graph.
var LABEL_HORIZONTAL_SPACING = 3;
// Horizintal spacing between two horitonally placed labels along the bottom
// of the graph.
var LABEL_LABEL_HORIZONTAL_SPACING = 25;
// Length of ticks, in pixels, next to y-axis labels. The x-axis only has
// one set of labels, so it can use lines instead.
var Y_AXIS_TICK_LENGTH = 10;
var GRID_COLOR = "#CCC";
var TEXT_COLOR = "#000";
var BACKGROUND_COLOR = "#FFF";
var MAX_DECIMAL_PRECISION = 2;
/**
* @constructor
*/
function TimelineGraphView(divId, canvasId) {
this.scrollbar_ = { position_: 0, range_: 0 };
this.graphDiv_ = $(divId);
this.canvas_ = $(canvasId);
// Set the range and scale of the graph. Times are in milliseconds since
// the Unix epoch.
// All measurements we have must be after this time.
this.startTime_ = 0;
// The current rightmost position of the graph is always at most this.
this.endTime_ = 1;
this.graph_ = null;
// Horizontal scale factor, in terms of milliseconds per pixel.
this.scale_ = 1000;
// Initialize the scrollbar.
this.updateScrollbarRange_(true);
}
TimelineGraphView.prototype = {
setScale: function(scale) {
this.scale_ = scale;
},
// Returns the total length of the graph, in pixels.
getLength_: function() {
var timeRange = this.endTime_ - this.startTime_;
// Math.floor is used to ignore the last partial area, of length less
// than this.scale_.
return Math.floor(timeRange / this.scale_);
},
/**
* Returns true if the graph is scrolled all the way to the right.
*/
graphScrolledToRightEdge_: function() {
return this.scrollbar_.position_ == this.scrollbar_.range_;
},
/**
* Update the range of the scrollbar. If |resetPosition| is true, also
* sets the slider to point at the rightmost position and triggers a
* repaint.
*/
updateScrollbarRange_: function(resetPosition) {
var scrollbarRange = this.getLength_() - this.canvas_.width;
if (scrollbarRange < 0) {
scrollbarRange = 0;
}
// If we've decreased the range to less than the current scroll position,
// we need to move the scroll position.
if (this.scrollbar_.position_ > scrollbarRange) {
resetPosition = true;
}
this.scrollbar_.range_ = scrollbarRange;
if (resetPosition) {
this.scrollbar_.position_ = scrollbarRange;
this.repaint();
}
},
/**
* Sets the date range displayed on the graph, switches to the default
* scale factor, and moves the scrollbar all the way to the right.
*/
setDateRange: function(startDate, endDate) {
this.startTime_ = startDate.getTime();
this.endTime_ = endDate.getTime();
// Safety check.
if (this.endTime_ <= this.startTime_) {
this.startTime_ = this.endTime_ - 1;
}
this.updateScrollbarRange_(true);
},
/**
* Updates the end time at the right of the graph to be the current time.
* Specifically, updates the scrollbar's range, and if the scrollbar is
* all the way to the right, keeps it all the way to the right. Otherwise,
* leaves the view as-is and doesn't redraw anything.
*/
updateEndDate: function(opt_date) {
this.endTime_ = opt_date || new Date().getTime();
this.updateScrollbarRange_(this.graphScrolledToRightEdge_());
},
getStartDate: function() {
return new Date(this.startTime_);
},
/**
* Replaces the current TimelineDataSeries with |dataSeries|.
*/
setDataSeries: function(dataSeries) {
// Simply recreates the Graph.
this.graph_ = new Graph();
for (var i = 0; i < dataSeries.length; ++i) {
this.graph_.addDataSeries(dataSeries[i]);
}
this.repaint();
},
/**
* Adds |dataSeries| to the current graph.
*/
addDataSeries: function(dataSeries) {
if (!this.graph_) {
this.graph_ = new Graph();
}
this.graph_.addDataSeries(dataSeries);
this.repaint();
},
/**
* Draws the graph on |canvas_| when visible.
*/
repaint: function() {
if (this.canvas_.offsetParent === null) {
return; // do not repaint graphs that are not visible.
}
this.repaintTimerRunning_ = false;
var width = this.canvas_.width;
var height = this.canvas_.height;
var context = this.canvas_.getContext("2d");
// Clear the canvas.
context.fillStyle = BACKGROUND_COLOR;
context.fillRect(0, 0, width, height);
// Try to get font height in pixels. Needed for layout.
var fontHeightString = context.font.match(/([0-9]+)px/)[1];
var fontHeight = parseInt(fontHeightString);
// Safety check, to avoid drawing anything too ugly.
if (
fontHeightString.length == 0 ||
fontHeight <= 0 ||
fontHeight * 4 > height ||
width < 50
) {
return;
}
// Save current transformation matrix so we can restore it later.
context.save();
// The center of an HTML canvas pixel is technically at (0.5, 0.5). This
// makes near straight lines look bad, due to anti-aliasing. This
// translation reduces the problem a little.
context.translate(0.5, 0.5);
// Figure out what time values to display.
var position = this.scrollbar_.position_;
// If the entire time range is being displayed, align the right edge of
// the graph to the end of the time range.
if (this.scrollbar_.range_ == 0) {
position = this.getLength_() - this.canvas_.width;
}
var visibleStartTime = this.startTime_ + position * this.scale_;
// Make space at the bottom of the graph for the time labels, and then
// draw the labels.
var textHeight = height;
height -= fontHeight + LABEL_VERTICAL_SPACING;
this.drawTimeLabels(context, width, height, textHeight, visibleStartTime);
// Draw outline of the main graph area.
context.strokeStyle = GRID_COLOR;
context.strokeRect(0, 0, width - 1, height - 1);
if (this.graph_) {
// Layout graph and have them draw their tick marks.
this.graph_.layout(
width,
height,
fontHeight,
visibleStartTime,
this.scale_
);
this.graph_.drawTicks(context);
// Draw the lines of all graphs, and then draw their labels.
this.graph_.drawLines(context);
this.graph_.drawLabels(context);
}
// Restore original transformation matrix.
context.restore();
},
/**
* Draw time labels below the graph. Takes in start time as an argument
* since it may not be |startTime_|, when we're displaying the entire
* time range.
*/
drawTimeLabels: function(context, width, height, textHeight, startTime) {
// Draw the labels 1 minute apart.
var timeStep = 1000 * 60;
// Find the time for the first label. This time is a perfect multiple of
// timeStep because of how UTC times work.
var time = Math.ceil(startTime / timeStep) * timeStep;
context.textBaseline = "bottom";
context.textAlign = "center";
context.fillStyle = TEXT_COLOR;
context.strokeStyle = GRID_COLOR;
// Draw labels and vertical grid lines.
while (true) {
var x = Math.round((time - startTime) / this.scale_);
if (x >= width) {
break;
}
var text = new Date(time).toLocaleTimeString();
context.fillText(text, x, textHeight);
context.beginPath();
context.lineTo(x, 0);
context.lineTo(x, height);
context.stroke();
time += timeStep;
}
},
getDataSeriesCount: function() {
if (this.graph_) {
return this.graph_.dataSeries_.length;
}
return 0;
},
hasDataSeries: function(dataSeries) {
if (this.graph_) {
return this.graph_.hasDataSeries(dataSeries);
}
return false;
}
};
/**
* A Graph is responsible for drawing all the TimelineDataSeries that have
* the same data type. Graphs are responsible for scaling the values, laying
* out labels, and drawing both labels and lines for its data series.
*/
var Graph = (function() {
/**
* @constructor
*/
function Graph() {
this.dataSeries_ = [];
// Cached properties of the graph, set in layout.
this.width_ = 0;
this.height_ = 0;
this.fontHeight_ = 0;
this.startTime_ = 0;
this.scale_ = 0;
// The lowest/highest values adjusted by the vertical label step size
// in the displayed range of the graph. Used for scaling and setting
// labels. Set in layoutLabels.
this.min_ = 0;
this.max_ = 0;
// Cached text of equally spaced labels. Set in layoutLabels.
this.labels_ = [];
}
/**
* A Label is the label at a particular position along the y-axis.
* @constructor
*/
function Label(height, text) {
this.height = height;
this.text = text;
}
Graph.prototype = {
addDataSeries: function(dataSeries) {
this.dataSeries_.push(dataSeries);
},
hasDataSeries: function(dataSeries) {
for (var i = 0; i < this.dataSeries_.length; ++i) {
if (this.dataSeries_[i] == dataSeries) {
return true;
}
}
return false;
},
/**
* Returns a list of all the values that should be displayed for a given
* data series, using the current graph layout.
*/
getValues: function(dataSeries) {
if (!dataSeries.isVisible()) {
return null;
}
return dataSeries.getValues(this.startTime_, this.scale_, this.width_);
},
/**
* Updates the graph's layout. In particular, both the max value and
* label positions are updated. Must be called before calling any of the
* drawing functions.
*/
layout: function(width, height, fontHeight, startTime, scale) {
this.width_ = width;
this.height_ = height;
this.fontHeight_ = fontHeight;
this.startTime_ = startTime;
this.scale_ = scale;
// Find largest value.
var max = 0,
min = 0;
for (var i = 0; i < this.dataSeries_.length; ++i) {
var values = this.getValues(this.dataSeries_[i]);
if (!values) {
continue;
}
for (var j = 0; j < values.length; ++j) {
if (values[j] > max) {
max = values[j];
} else if (values[j] < min) {
min = values[j];
}
}
}
this.layoutLabels_(min, max);
},
/**
* Lays out labels and sets |max_|/|min_|, taking the time units into
* consideration. |maxValue| is the actual maximum value, and
* |max_| will be set to the value of the largest label, which
* will be at least |maxValue|. Similar for |min_|.
*/
layoutLabels_: function(minValue, maxValue) {
if (maxValue - minValue < 1024) {
this.layoutLabelsBasic_(minValue, maxValue, MAX_DECIMAL_PRECISION);
return;
}
// Find appropriate units to use.
var units = ["", "k", "M", "G", "T", "P"];
// Units to use for labels. 0 is '1', 1 is K, etc.
// We start with 1, and work our way up.
var unit = 1;
minValue /= 1024;
maxValue /= 1024;
while (units[unit + 1] && maxValue - minValue >= 1024) {
minValue /= 1024;
maxValue /= 1024;
++unit;
}
// Calculate labels.
this.layoutLabelsBasic_(minValue, maxValue, MAX_DECIMAL_PRECISION);
// Append units to labels.
for (var i = 0; i < this.labels_.length; ++i) {
this.labels_[i] += " " + units[unit];
}
// Convert |min_|/|max_| back to unit '1'.
this.min_ *= Math.pow(1024, unit);
this.max_ *= Math.pow(1024, unit);
},
/**
* Same as layoutLabels_, but ignores units. |maxDecimalDigits| is the
* maximum number of decimal digits allowed. The minimum allowed
* difference between two adjacent labels is 10^-|maxDecimalDigits|.
*/
layoutLabelsBasic_: function(minValue, maxValue, maxDecimalDigits) {
this.labels_ = [];
var range = maxValue - minValue;
// No labels if the range is 0.
if (range == 0) {
this.min_ = this.max_ = maxValue;
return;
}
// The maximum number of equally spaced labels allowed. |fontHeight_|
// is doubled because the top two labels are both drawn in the same
// gap.
var minLabelSpacing = 2 * this.fontHeight_ + LABEL_VERTICAL_SPACING;
// The + 1 is for the top label.
var maxLabels = 1 + this.height_ / minLabelSpacing;
if (maxLabels < 2) {
maxLabels = 2;
} else if (maxLabels > MAX_VERTICAL_LABELS) {
maxLabels = MAX_VERTICAL_LABELS;
}
// Initial try for step size between conecutive labels.
var stepSize = Math.pow(10, -maxDecimalDigits);
// Number of digits to the right of the decimal of |stepSize|.
// Used for formating label strings.
var stepSizeDecimalDigits = maxDecimalDigits;
// Pick a reasonable step size.
while (true) {
// If we use a step size of |stepSize| between labels, we'll need:
//
// Math.ceil(range / stepSize) + 1
//
// labels. The + 1 is because we need labels at both at 0 and at
// the top of the graph.
// Check if we can use steps of size |stepSize|.
if (Math.ceil(range / stepSize) + 1 <= maxLabels) {
break;
}
// Check |stepSize| * 2.
if (Math.ceil(range / (stepSize * 2)) + 1 <= maxLabels) {
stepSize *= 2;
break;
}
// Check |stepSize| * 5.
if (Math.ceil(range / (stepSize * 5)) + 1 <= maxLabels) {
stepSize *= 5;
break;
}
stepSize *= 10;
if (stepSizeDecimalDigits > 0) {
--stepSizeDecimalDigits;
}
}
// Set the min/max so it's an exact multiple of the chosen step size.
this.max_ = Math.ceil(maxValue / stepSize) * stepSize;
this.min_ = Math.floor(minValue / stepSize) * stepSize;
// Create labels.
for (var label = this.max_; label >= this.min_; label -= stepSize) {
this.labels_.push(label.toFixed(stepSizeDecimalDigits));
}
},
/**
* Draws tick marks for each of the labels in |labels_|.
*/
drawTicks: function(context) {
var x1;
var x2;
x1 = this.width_ - 1;
x2 = this.width_ - 1 - Y_AXIS_TICK_LENGTH;
context.fillStyle = GRID_COLOR;
context.beginPath();
for (var i = 1; i < this.labels_.length - 1; ++i) {
// The rounding is needed to avoid ugly 2-pixel wide anti-aliased
// lines.
var y = Math.round((this.height_ * i) / (this.labels_.length - 1));
context.moveTo(x1, y);
context.lineTo(x2, y);
}
context.stroke();
},
/**
* Draws a graph line for each of the data series.
*/
drawLines: function(context) {
// Factor by which to scale all values to convert them to a number from
// 0 to height - 1.
var scale = 0;
var bottom = this.height_ - 1;
if (this.max_) {
scale = bottom / (this.max_ - this.min_);
}
// Draw in reverse order, so earlier data series are drawn on top of
// subsequent ones.
for (var i = this.dataSeries_.length - 1; i >= 0; --i) {
var values = this.getValues(this.dataSeries_[i]);
if (!values) {
continue;
}
context.strokeStyle = this.dataSeries_[i].getColor();
context.beginPath();
for (var x = 0; x < values.length; ++x) {
// The rounding is needed to avoid ugly 2-pixel wide anti-aliased
// horizontal lines.
context.lineTo(
x,
bottom - Math.round((values[x] - this.min_) * scale)
);
}
context.stroke();
}
},
/**
* Draw labels in |labels_|.
*/
drawLabels: function(context) {
if (this.labels_.length == 0) {
return;
}
var x = this.width_ - LABEL_HORIZONTAL_SPACING;
// Set up the context.
context.fillStyle = TEXT_COLOR;
context.textAlign = "right";
// Draw top label, which is the only one that appears below its tick
// mark.
context.textBaseline = "top";
context.fillText(this.labels_[0], x, 0);
// Draw all the other labels.
context.textBaseline = "bottom";
var step = (this.height_ - 1) / (this.labels_.length - 1);
for (var i = 1; i < this.labels_.length; ++i) {
context.fillText(this.labels_[i], x, step * i);
}
}
};
return Graph;
})();
return TimelineGraphView;
})();
var STATS_GRAPH_CONTAINER_HEADING_CLASS = "stats-graph-container-heading";
var RECEIVED_PROPAGATION_DELTA_LABEL =
"googReceivedPacketGroupPropagationDeltaDebug";
var RECEIVED_PACKET_GROUP_ARRIVAL_TIME_LABEL =
"googReceivedPacketGroupArrivalTimeDebug";
// Specifies which stats should be drawn on the 'bweCompound' graph and how.
var bweCompoundGraphConfig = {
googAvailableSendBandwidth: { color: "red" },
googTargetEncBitrateCorrected: { color: "purple" },
googActualEncBitrate: { color: "orange" },
googRetransmitBitrate: { color: "blue" },
googTransmitBitrate: { color: "green" }
};
// Converts the last entry of |srcDataSeries| from the total amount to the
// amount per second.
var totalToPerSecond = function(srcDataSeries) {
var length = srcDataSeries.dataPoints_.length;
if (length >= 2) {
var lastDataPoint = srcDataSeries.dataPoints_[length - 1];
var secondLastDataPoint = srcDataSeries.dataPoints_[length - 2];
return Math.floor(
((lastDataPoint.value - secondLastDataPoint.value) * 1000) /
(lastDataPoint.time - secondLastDataPoint.time)
);
}
return 0;
};
// Converts the value of total bytes to bits per second.
var totalBytesToBitsPerSecond = function(srcDataSeries) {
return totalToPerSecond(srcDataSeries) * 8;
};
// Specifies which stats should be converted before drawn and how.
// |convertedName| is the name of the converted value, |convertFunction|
// is the function used to calculate the new converted value based on the
// original dataSeries.
var dataConversionConfig = {
packetsSent: {
convertedName: "packetsSentPerSecond",
convertFunction: totalToPerSecond
},
bytesSent: {
convertedName: "bitsSentPerSecond",
convertFunction: totalBytesToBitsPerSecond
},
packetsReceived: {
convertedName: "packetsReceivedPerSecond",
convertFunction: totalToPerSecond
},
bytesReceived: {
convertedName: "bitsReceivedPerSecond",
convertFunction: totalBytesToBitsPerSecond
},
// This is due to a bug of wrong units reported for googTargetEncBitrate.
// TODO (jiayl): remove this when the unit bug is fixed.
googTargetEncBitrate: {
convertedName: "googTargetEncBitrateCorrected",
convertFunction: function(srcDataSeries) {
var length = srcDataSeries.dataPoints_.length;
var lastDataPoint = srcDataSeries.dataPoints_[length - 1];
if (lastDataPoint.value < 5000) {
return lastDataPoint.value * 1000;
}
return lastDataPoint.value;
}
}
};
// The object contains the stats names that should not be added to the graph,
// even if they are numbers.
var statsNameBlackList = {
ssrc: true,
googTrackId: true,
googComponent: true,
googLocalAddress: true,
googRemoteAddress: true,
googFingerprint: true
};
function isStandardReportBlacklisted(report) {
// Codec stats reflect what has been negotiated. There are LOTS of them and
// they don't change over time on their own.
if (report.type == "codec") {
return true;
}
// Unused data channels can stay in "connecting" indefinitely and their
// counters stay zero.
if (
report.type == "data-channel" &&
readReportStat(report, "state") == "connecting"
) {
return true;
}
// The same is true for transports and "new".
if (
report.type == "transport" &&
readReportStat(report, "dtlsState") == "new"
) {
return true;
}
// Local and remote candidates don't change over time and there are several of
// them.
if (report.type == "local-candidate" || report.type == "remote-candidate") {
return true;
}
return false;
}
function readReportStat(report, stat) {
let values = report.stats.values;
for (let i = 0; i < values.length; i += 2) {
if (values[i] == stat) {
return values[i + 1];
}
}
return undefined;
}
function isStandardStatBlacklisted(report, statName) {
// The datachannelid is an identifier, but because it is a number it shows up
// as a graph if we don't blacklist it.
if (report.type == "data-channel" && statName == "datachannelid") {
return true;
}
// The priority does not change over time on its own; plotting uninteresting.
if (report.type == "candidate-pair" && statName == "priority") {
return true;
}
return false;
}
var graphViews = {};
let graphElementsByPeerConnectionId = new Map();
// Returns number parsed from |value|, or NaN if the stats name is black-listed.
function getNumberFromValue(name, value) {
if (statsNameBlackList[name]) {
return NaN;
}
if (isNaN(value)) {
return NaN;
}
return parseFloat(value);
}
// Adds the stats report |report| to the timeline graph for the given
// |peerConnectionElement|.
function drawSingleReport(peerConnectionElement, report, isLegacyReport) {
var reportType = report.type;
var reportId = report.id;
var stats = report.stats;
if (!stats || !stats.values) {
return;
}
const childrenBefore = peerConnectionElement.hasChildNodes()
? Array.from(peerConnectionElement.childNodes)
: [];
for (var i = 0; i < stats.values.length - 1; i = i + 2) {
var rawLabel = stats.values[i];
// Propagation deltas are handled separately.
if (rawLabel == RECEIVED_PROPAGATION_DELTA_LABEL) {
drawReceivedPropagationDelta(
peerConnectionElement,
report,
stats.values[i + 1]
);
continue;
}
var rawDataSeriesId = reportId + "-" + rawLabel;
var rawValue = getNumberFromValue(rawLabel, stats.values[i + 1]);
if (isNaN(rawValue)) {
// We do not draw non-numerical values, but still want to record it in the
// data series.
addDataSeriesPoints(
peerConnectionElement,
rawDataSeriesId,
rawLabel,
[stats.timestamp],
[stats.values[i + 1]]
);
continue;
}
var finalDataSeriesId = rawDataSeriesId;
var finalLabel = rawLabel;
var finalValue = rawValue;
// We need to convert the value if dataConversionConfig[rawLabel] exists.
if (isLegacyReport && dataConversionConfig[rawLabel]) {
// Updates the original dataSeries before the conversion.
addDataSeriesPoints(
peerConnectionElement,
rawDataSeriesId,
rawLabel,
[stats.timestamp],
[rawValue]
);
// Convert to another value to draw on graph, using the original
// dataSeries as input.
finalValue = dataConversionConfig[rawLabel].convertFunction(
peerConnectionDataStore[peerConnectionElement.id].getDataSeries(
rawDataSeriesId
)
);
finalLabel = dataConversionConfig[rawLabel].convertedName;
finalDataSeriesId = reportId + "-" + finalLabel;
}
// Updates the final dataSeries to draw.
addDataSeriesPoints(
peerConnectionElement,
finalDataSeriesId,
finalLabel,
[stats.timestamp],
[finalValue]
);
if (
!isLegacyReport &&
(isStandardReportBlacklisted(report) ||
isStandardStatBlacklisted(report, rawLabel))
) {
// We do not want to draw certain standard reports but still want to
// record them in the data series.
continue;
}
// Updates the graph.
var graphType = bweCompoundGraphConfig[finalLabel]
? "bweCompound"
: finalLabel;
var graphViewId =
peerConnectionElement.id + "-" + reportId + "-" + graphType;
if (!graphViews[graphViewId]) {
graphViews[graphViewId] = createStatsGraphView(
peerConnectionElement,
report,
graphType
);
var date = new Date(stats.timestamp);
graphViews[graphViewId].setDateRange(date, date);
}
// Adds the new dataSeries to the graphView. We have to do it here to cover
// both the simple and compound graph cases.
var dataSeries = peerConnectionDataStore[
peerConnectionElement.id
].getDataSeries(finalDataSeriesId);
if (!graphViews[graphViewId].hasDataSeries(dataSeries)) {
graphViews[graphViewId].addDataSeries(dataSeries);
}
graphViews[graphViewId].updateEndDate();
}
const childrenAfter = peerConnectionElement.hasChildNodes()
? Array.from(peerConnectionElement.childNodes)
: [];
for (let i = 0; i < childrenAfter.length; ++i) {
if (!childrenBefore.includes(childrenAfter[i])) {
let graphElements = graphElementsByPeerConnectionId.get(
peerConnectionElement.id
);
if (!graphElements) {
graphElements = [];
graphElementsByPeerConnectionId.set(
peerConnectionElement.id,
graphElements
);
}
graphElements.push(childrenAfter[i]);
}
}
}
function removeStatsReportGraphs(peerConnectionElement) {
const graphElements = graphElementsByPeerConnectionId.get(
peerConnectionElement.id
);
if (graphElements) {
for (let i = 0; i < graphElements.length; ++i) {
peerConnectionElement.removeChild(graphElements[i]);
}
graphElementsByPeerConnectionId.delete(peerConnectionElement.id);
}
Object.keys(graphViews).forEach(key => {
if (key.startsWith(peerConnectionElement.id)) {
delete graphViews[key];
}
});
}
// Makes sure the TimelineDataSeries with id |dataSeriesId| is created,
// and adds the new data points to it. |times| is the list of timestamps for
// each data point, and |values| is the list of the data point values.
function addDataSeriesPoints(
peerConnectionElement,
dataSeriesId,
label,
times,
values
) {
var dataSeries = peerConnectionDataStore[
peerConnectionElement.id
].getDataSeries(dataSeriesId);
if (!dataSeries) {
dataSeries = new TimelineDataSeries();
peerConnectionDataStore[peerConnectionElement.id].setDataSeries(
dataSeriesId,
dataSeries
);
if (bweCompoundGraphConfig[label]) {
dataSeries.setColor(bweCompoundGraphConfig[label].color);
}
}
for (var i = 0; i < times.length; ++i) {
dataSeries.addPoint(times[i], values[i]);
}
}
// Draws the received propagation deltas using the packet group arrival time as
// the x-axis. For example, |report.stats.values| should be like
// ['googReceivedPacketGroupArrivalTimeDebug', '[123456, 234455, 344566]',
// 'googReceivedPacketGroupPropagationDeltaDebug', '[23, 45, 56]', ...].
function drawReceivedPropagationDelta(peerConnectionElement, report, deltas) {
var reportId = report.id;
var stats = report.stats;
var times = null;
// Find the packet group arrival times.
for (var i = 0; i < stats.values.length - 1; i = i + 2) {
if (stats.values[i] == RECEIVED_PACKET_GROUP_ARRIVAL_TIME_LABEL) {
times = stats.values[i + 1];
break;
}
}
// Unexpected.
if (times == null) {
return;
}
// Convert |deltas| and |times| from strings to arrays of numbers.
try {
deltas = JSON.parse(deltas);
times = JSON.parse(times);
} catch (e) {
console.log(e);
return;
}
// Update the data series.
var dataSeriesId = reportId + "-" + RECEIVED_PROPAGATION_DELTA_LABEL;
addDataSeriesPoints(
peerConnectionElement,
dataSeriesId,
RECEIVED_PROPAGATION_DELTA_LABEL,
times,
deltas
);
// Update the graph.
var graphViewId =
peerConnectionElement.id +
"-" +
reportId +
"-" +
RECEIVED_PROPAGATION_DELTA_LABEL;
var date = new Date(times[times.length - 1]);
if (!graphViews[graphViewId]) {
graphViews[graphViewId] = createStatsGraphView(
peerConnectionElement,
report,
RECEIVED_PROPAGATION_DELTA_LABEL
);
graphViews[graphViewId].setScale(10);
graphViews[graphViewId].setDateRange(date, date);
var dataSeries = peerConnectionDataStore[
peerConnectionElement.id
].getDataSeries(dataSeriesId);
graphViews[graphViewId].addDataSeries(dataSeries);
}
graphViews[graphViewId].updateEndDate(date);
}
// Get report types for SSRC reports. Returns 'audio' or 'video' where this type
// can be deduced from existing stats labels. Otherwise empty string for
// non-SSRC reports or where type (audio/video) can't be deduced.
function getSsrcReportType(report) {
if (report.type != "ssrc") {
return "";
}
if (report.stats && report.stats.values) {
// Known stats keys for audio send/receive streams.
if (
report.stats.values.indexOf("audioOutputLevel") != -1 ||
report.stats.values.indexOf("audioInputLevel") != -1
) {
return "audio";
}
// Known stats keys for video send/receive streams.
// TODO(pbos): Change to use some non-goog-prefixed stats when available for
// video.
if (
report.stats.values.indexOf("googFrameRateReceived") != -1 ||
report.stats.values.indexOf("googFrameRateSent") != -1
) {
return "video";
}
}
return "";
}
// Ensures a div container to hold all stats graphs for one track is created as
// a child of |peerConnectionElement|.
function ensureStatsGraphTopContainer(peerConnectionElement, report) {
var containerId =
peerConnectionElement.id +
"-" +
report.type +
"-" +
report.id +
"-graph-container";
var container = $(containerId);
if (!container) {
container = document.createElement("details");
container.id = containerId;
container.className = "stats-graph-container";
peerConnectionElement.appendChild(container);
container.innerHTML = "<summary><span></span></summary>";
container.firstChild.firstChild.className = STATS_GRAPH_CONTAINER_HEADING_CLASS;
container.firstChild.firstChild.textContent =
"Stats graphs for " + report.id + " (" + report.type + ")";
var statsType = getSsrcReportType(report);
if (statsType != "") {
container.firstChild.firstChild.textContent += " (" + statsType + ")";
}
if (report.type == "ssrc") {
var ssrcInfoElement = document.createElement("div");
container.firstChild.appendChild(ssrcInfoElement);
ssrcInfoManager.populateSsrcInfo(
ssrcInfoElement,
GetSsrcFromReport(report)
);
}
}
return container;
}
// Creates the container elements holding a timeline graph
// and the TimelineGraphView object.
function createStatsGraphView(peerConnectionElement, report, statsName) {
var topContainer = ensureStatsGraphTopContainer(
peerConnectionElement,
report
);
var graphViewId =
peerConnectionElement.id + "-" + report.id + "-" + statsName;
var divId = graphViewId + "-div";
var canvasId = graphViewId + "-canvas";
var container = document.createElement("div");
container.className = "stats-graph-sub-container";
topContainer.appendChild(container);
container.innerHTML =
"<div>" +
statsName +
"</div>" +
"<div id=" +
divId +
"><canvas id=" +
canvasId +
"></canvas></div>";
if (statsName == "bweCompound") {
container.insertBefore(
createBweCompoundLegend(peerConnectionElement, report.id),
$(divId)
);
}
return new TimelineGraphView(divId, canvasId);
}
// Creates the legend section for the bweCompound graph.
// Returns the legend element.
function createBweCompoundLegend(peerConnectionElement, reportId) {
var legend = document.createElement("div");
for (var prop in bweCompoundGraphConfig) {
var div = document.createElement("div");
legend.appendChild(div);
div.innerHTML = "<input type=checkbox checked>" + prop;
div.style.color = bweCompoundGraphConfig[prop].color;
div.dataSeriesId = reportId + "-" + prop;
div.graphViewId =
peerConnectionElement.id + "-" + reportId + "-bweCompound";
div.firstChild.addEventListener("click", function(event) {
var target = peerConnectionDataStore[
peerConnectionElement.id
].getDataSeries(event.target.parentNode.dataSeriesId);
target.show(event.target.checked);
graphViews[event.target.parentNode.graphViewId].repaint();
});
}
return legend;
}
// // Copyright (c) 2019 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
const CalculatorModifier = Object.freeze({
kNone: Object.freeze({ postfix: "", multiplier: 1 }),
kMillisecondsFromSeconds: Object.freeze({
postfix: "_in_ms",
multiplier: 1000
})
});
class Metric {
constructor(name, value) {
this.name = name;
this.value = value;
}
toString() {
return '{"' + this.name + '":"' + this.value + '"}';
}
}
// Represents a companion dictionary to an RTCStats object of an RTCStatsReport.
// The CalculatedStats object contains additional metrics associated with the
// original RTCStats object. Typically, the RTCStats object contains
// accumulative counters, but in chrome://webrc-internals/ we also want graphs
// for the average rate over the last second, so we have CalculatedStats
// containing calculated Metrics.
class CalculatedStats {
constructor(id) {
this.id = id;
// A map Original Name -> Array of Metrics, where Original Name refers to
// the name of the metric in the original RTCStats object, and the Metrics
// are calculated metrics. For example, if the original RTCStats report
// contains framesReceived, and from that we've calculated
// [framesReceived/s] and [framesReceived-framesDecoded], then there will be
// a mapping from "framesReceived" to an array of two Metric objects,
// "[framesReceived/s]" and "[framesReceived-framesDecoded]".
this.calculatedMetricsByOriginalName = new Map();
}
addCalculatedMetric(originalName, metric) {
let calculatedMetrics = this.calculatedMetricsByOriginalName.get(
originalName
);
if (!calculatedMetrics) {
calculatedMetrics = [];
this.calculatedMetricsByOriginalName.set(originalName, calculatedMetrics);
}
calculatedMetrics.push(metric);
}
// Gets the calculated metrics associated with |originalName| in the order
// that they were added, or an empty list if there are no associated metrics.
getCalculatedMetrics(originalName) {
let calculatedMetrics = this.calculatedMetricsByOriginalName.get(
originalName
);
if (!calculatedMetrics) {
return [];
}
return calculatedMetrics;
}
toString() {
let str = '{id:"' + this.id + '"';
for (let originalName of this.calculatedMetricsByOriginalName.keys()) {
const calculatedMetrics = this.calculatedMetricsByOriginalName.get(
originalName
);
str += "," + originalName + ":[";
for (let i = 0; i < calculatedMetrics.length; i++) {
str += calculatedMetrics[i].toString();
if (i + 1 < calculatedMetrics.length) {
str += ",";
}
str += "]";
}
}
str += "}";
return str;
}
}
// Contains the metrics of an RTCStatsReport, as well as calculated metrics
// associated with metrics from the original report. Convertible to and from the
// "internal reports" format used by webrtc_internals.js to pass stats from C++
// to JavaScript.
class StatsReport {
constructor() {
// Represents an RTCStatsReport. It is a Map RTCStats.id -> RTCStats.
// https://w3c.github.io/webrtc-pc/#dom-rtcstatsreport
this.statsById = new Map();
// RTCStats.id -> CalculatedStats
this.calculatedStatsById = new Map();
}
// |internalReports| is an array, each element represents an RTCStats object,
// but the format is a little different from the spec. This is the format:
// {
// id: "string",
// type: "string",
// stats: {
// timestamp: <milliseconds>,
// values: ["member1", value1, "member2", value2...]
// }
// }
static fromInternalsReportList(internalReports) {
const result = new StatsReport();
internalReports.forEach(internalReport => {
if (!internalReport.stats || !internalReport.stats.values) {
return; // continue;
}
const stats = {
id: internalReport.id,
type: internalReport.type,
timestamp: internalReport.stats.timestamp / 1000.0 // ms -> s
};
const values = internalReport.stats.values;
for (let i = 0; i < values.length; i += 2) {
// Metric "name: value".
stats[values[i]] = values[i + 1];
}
result.statsById.set(stats.id, stats);
});
return result;
}
toInternalsReportList() {
const result = [];
for (let stats of this.statsById.values()) {
const internalReport = {
id: stats.id,
type: stats.type,
stats: {
timestamp: stats.timestamp * 1000.0, // s -> ms
values: []
}
};
Object.keys(stats).forEach(metricName => {
if (
metricName == "id" ||
metricName == "type" ||
metricName == "timestamp"
) {
return; // continue;
}
internalReport.stats.values.push(metricName);
internalReport.stats.values.push(stats[metricName]);
const calculatedMetrics = this.getCalculatedMetrics(
stats.id,
metricName
);
calculatedMetrics.forEach(calculatedMetric => {
internalReport.stats.values.push(calculatedMetric.name);
// Treat calculated metrics that are undefined as 0 to ensure graphs
// can be created anyway.
internalReport.stats.values.push(
calculatedMetric.value ? calculatedMetric.value : 0
);
});
});
result.push(internalReport);
}
return result;
}
toString() {
let str = "";
for (let stats of this.statsById.values()) {
if (str != "") {
str += ",";
}
str += JSON.stringify(stats);
}
let str2 = "";
for (let stats of this.calculatedStatsById.values()) {
if (str2 != "") {
str2 += ",";
}
str2 += stats.toString();
}
return "[original:" + str + "],calculated:[" + str2 + "]";
}
get(id) {
return this.statsById.get(id);
}
getByType(type) {
const result = [];
for (let stats of this.statsById.values()) {
if (stats.type == type) {
result.push(stats);
}
}
return result;
}
addCalculatedMetric(id, insertAtOriginalMetricName, name, value) {
let calculatedStats = this.calculatedStatsById.get(id);
if (!calculatedStats) {
calculatedStats = new CalculatedStats(id);
this.calculatedStatsById.set(id, calculatedStats);
}
calculatedStats.addCalculatedMetric(
insertAtOriginalMetricName,
new Metric(name, value)
);
}
getCalculatedMetrics(id, originalMetricName) {
const calculatedStats = this.calculatedStatsById.get(id);
return calculatedStats
? calculatedStats.getCalculatedMetrics(originalMetricName)
: [];
}
}
// Calculates the rate "delta accumulative / delta samples" and returns it. If
// a rate cannot be calculated, such as the metric is missing in the current
// or previous report, undefined is returned.
class RateCalculator {
constructor(
accumulativeMetric,
samplesMetric,
modifier = CalculatorModifier.kNone
) {
this.accumulativeMetric = accumulativeMetric;
this.samplesMetric = samplesMetric;
this.modifier = modifier;
}
getCalculatedMetricName() {
if (this.samplesMetric == "timestamp") {
return "[" + this.accumulativeMetric + "/s]";
}
return (
"[" +
this.accumulativeMetric +
"/" +
this.samplesMetric +
this.modifier.postfix +
"]"
);
}
calculate(id, previousReport, currentReport) {
return (
RateCalculator.calculateRate(
id,
previousReport,
currentReport,
this.accumulativeMetric,
this.samplesMetric
) * this.modifier.multiplier
);
}
static calculateRate(
id,
previousReport,
currentReport,
accumulativeMetric,
samplesMetric
) {
if (!previousReport || !currentReport) {
return undefined;
}
const previousStats = previousReport.get(id);
const currentStats = currentReport.get(id);
if (!previousStats || !currentStats) {
return undefined;
}
const deltaTime = currentStats.timestamp - previousStats.timestamp;
if (deltaTime <= 0) {
return undefined;
}
// Try to convert whatever the values are to numbers. This gets around the
// fact that some types that are not supported by base::Value (e.g. uint32,
// int64, uint64 and double) are passed as strings.
const previousValue = Number(previousStats[accumulativeMetric]);
const currentValue = Number(currentStats[accumulativeMetric]);
if (typeof previousValue != "number" || typeof currentValue != "number") {
return undefined;
}
const previousSamples = Number(previousStats[samplesMetric]);
const currentSamples = Number(currentStats[samplesMetric]);
if (
typeof previousSamples != "number" ||
typeof currentSamples != "number"
) {
return undefined;
}
const deltaValue = currentValue - previousValue;
const deltaSamples = currentSamples - previousSamples;
return deltaValue / deltaSamples;
}
}
// Looks up codec and payload type from a codecId reference, constructing an
// informative string about which codec is used.
class CodecCalculator {
getCalculatedMetricName() {
return "[codec]";
}
calculate(id, previousReport, currentReport) {
const targetStats = currentReport.get(id);
const codecStats = currentReport.get(targetStats.codecId);
if (!codecStats) {
return undefined;
}
// If mimeType is 'video/VP8' then codec is 'VP8'.
const codec = codecStats.mimeType.substr(
codecStats.mimeType.indexOf("/") + 1
);
return codec + " (payloadType: " + codecStats.payloadType + ")";
}
}
// Calculates "RMS" audio level, which is the average audio level between the
// previous and current report, in the interval [0,1]. Calculated per:
// https://w3c.github.io/webrtc-stats/#dom-rtcinboundrtpstreamstats-totalaudioenergy
class AudioLevelRmsCalculator {
getCalculatedMetricName() {
return "[Audio_Level_in_RMS]";
}
calculate(id, previousReport, currentReport) {
const averageAudioLevelSquared = RateCalculator.calculateRate(
id,
previousReport,
currentReport,
"totalAudioEnergy",
"totalSamplesDuration"
);
return Math.sqrt(averageAudioLevelSquared);
}
}
// Calculates "metricA - metricB", only looking at the current report.
class DifferenceCalculator {
constructor(metricA, metricB) {
this.metricA = metricA;
this.metricB = metricB;
}
getCalculatedMetricName() {
return "[" + this.metricA + "-" + this.metricB + "]";
}
calculate(id, previousReport, currentReport) {
const currentStats = currentReport.get(id);
return currentStats[this.metricA] - currentStats[this.metricB];
}
}
// Keeps track of previous and current stats report and calculates all
// calculated metrics.
class StatsRatesCalculator {
constructor() {
this.previousReport = null;
this.currentReport = null;
}
addStatsReport(report) {
this.previousReport = this.currentReport;
this.currentReport = report;
this.updateCalculatedMetrics_();
}
// Updates all "calculated metrics", which are metrics derived from standard
// values, such as converting total counters (e.g. bytesSent) to rates (e.g.
// bytesSent/s).
updateCalculatedMetrics_() {
const statsCalculators = [
{
type: "data-channel",
metricCalculators: {
messagesSent: new RateCalculator("messagesSent", "timestamp"),
messagesReceived: new RateCalculator("messagesReceived", "timestamp"),
bytesSent: new RateCalculator("bytesSent", "timestamp"),
bytesReceived: new RateCalculator("bytesReceived", "timestamp")
}
},
{
type: "media-source",
metricCalculators: {
totalAudioEnergy: new AudioLevelRmsCalculator()
}
},
{
type: "track",
metricCalculators: {
framesSent: new RateCalculator("framesSent", "timestamp"),
framesReceived: [
new RateCalculator("framesReceived", "timestamp"),
new DifferenceCalculator("framesReceived", "framesDecoded")
],
totalAudioEnergy: new AudioLevelRmsCalculator(),
jitterBufferDelay: new RateCalculator(
"jitterBufferDelay",
"jitterBufferEmittedCount",
CalculatorModifier.kMillisecondsFromSeconds
)
}
},
{
type: "outbound-rtp",
metricCalculators: {
bytesSent: new RateCalculator("bytesSent", "timestamp"),
packetsSent: new RateCalculator("packetsSent", "timestamp"),
totalPacketSendDelay: new RateCalculator(
"totalPacketSendDelay",
"packetsSent",
CalculatorModifier.kMillisecondsFromSeconds
),
framesEncoded: new RateCalculator("framesEncoded", "timestamp"),
totalEncodedBytesTarget: new RateCalculator(
"totalEncodedBytesTarget",
"timestamp"
),
totalEncodeTime: new RateCalculator(
"totalEncodeTime",
"framesEncoded",
CalculatorModifier.kMillisecondsFromSeconds
),
qpSum: new RateCalculator("qpSum", "framesEncoded"),
codecId: new CodecCalculator()
}
},
{
type: "inbound-rtp",
metricCalculators: {
bytesReceived: new RateCalculator("bytesReceived", "timestamp"),
packetsReceived: new RateCalculator("packetsReceived", "timestamp"),
framesDecoded: new RateCalculator("framesDecoded", "timestamp"),
totalDecodeTime: new RateCalculator(
"totalDecodeTime",
"framesDecoded",
CalculatorModifier.kMillisecondsFromSeconds
),
qpSum: new RateCalculator("qpSum", "framesDecoded"),
codecId: new CodecCalculator()
}
},
{
type: "transport",
metricCalculators: {
bytesSent: new RateCalculator("bytesSent", "timestamp"),
bytesReceived: new RateCalculator("bytesReceived", "timestamp")
// TODO(https://crbug.com/webrtc/10568): Add packetsSent and
// packetsReceived once implemented.
}
},
{
type: "candidate-pair",
metricCalculators: {
bytesSent: new RateCalculator("bytesSent", "timestamp"),
bytesReceived: new RateCalculator("bytesReceived", "timestamp"),
// TODO(https://crbug.com/webrtc/10569): Add packetsSent and
// packetsReceived once implemented.
requestsSent: new RateCalculator("requestsSent", "timestamp"),
requestsReceived: new RateCalculator("requestsReceived", "timestamp"),
responsesSent: new RateCalculator("responsesSent", "timestamp"),
responsesReceived: new RateCalculator(
"responsesReceived",
"timestamp"
),
consentRequestsSent: new RateCalculator(
"consentRequestsSent",
"timestamp"
),
consentRequestsReceived: new RateCalculator(
"consentRequestsReceived",
"timestamp"
),
totalRoundTripTime: new RateCalculator(
"totalRoundTripTime",
"responsesReceived",
CalculatorModifier.kMillisecondsFromSeconds
)
}
}
];
statsCalculators.forEach(statsCalculator => {
this.currentReport.getByType(statsCalculator.type).forEach(stats => {
Object.keys(statsCalculator.metricCalculators).forEach(
originalMetric => {
let metricCalculators =
statsCalculator.metricCalculators[originalMetric];
if (!Array.isArray(metricCalculators)) {
metricCalculators = [metricCalculators];
}
metricCalculators.forEach(metricCalculator => {
this.currentReport.addCalculatedMetric(
stats.id,
originalMetric,
metricCalculator.getCalculatedMetricName(),
metricCalculator.calculate(
stats.id,
this.previousReport,
this.currentReport
)
);
});
}
);
});
});
}
}
// // Copyright (c) 2013 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/**
* Maintains the stats table.
* @param {SsrcInfoManager} ssrcInfoManager The source of the ssrc info.
*/
var StatsTable = (function(ssrcInfoManager) {
"use strict";
/**
* @param {SsrcInfoManager} ssrcInfoManager The source of the ssrc info.
* @constructor
*/
function StatsTable(ssrcInfoManager) {
/**
* @type {SsrcInfoManager}
* @private
*/
this.ssrcInfoManager_ = ssrcInfoManager;
}
StatsTable.prototype = {
/**
* Adds |report| to the stats table of |peerConnectionElement|.
*
* @param {!Element} peerConnectionElement The root element.
* @param {!Object} report The object containing stats, which is the object
* containing timestamp and values, which is an array of strings, whose
* even index entry is the name of the stat, and the odd index entry is
* the value.
*/
addStatsReport: function(peerConnectionElement, report) {
if (report.type == "codec") {
return;
}
var statsTable = this.ensureStatsTable_(peerConnectionElement, report);
if (report.stats) {
this.addStatsToTable_(
statsTable,
report.stats.timestamp,
report.stats.values
);
}
},
clearStatsLists: function(peerConnectionElement) {
let containerId = peerConnectionElement.id + "-table-container";
let container = $(containerId);
if (container) {
peerConnectionElement.removeChild(container);
this.ensureStatsTableContainer_(peerConnectionElement);
}
},
/**
* Ensure the DIV container for the stats tables is created as a child of
* |peerConnectionElement|.
*
* @param {!Element} peerConnectionElement The root element.
* @return {!Element} The stats table container.
* @private
*/
ensureStatsTableContainer_: function(peerConnectionElement) {
var containerId = peerConnectionElement.id + "-table-container";
var container = $(containerId);
if (!container) {
container = document.createElement("div");
container.id = containerId;
container.className = "stats-table-container";
var head = document.createElement("div");
head.textContent = "Stats Tables";
container.appendChild(head);
peerConnectionElement.appendChild(container);
}
return container;
},
/**
* Ensure the stats table for track specified by |report| of PeerConnection
* |peerConnectionElement| is created.
*
* @param {!Element} peerConnectionElement The root element.
* @param {!Object} report The object containing stats, which is the object
* containing timestamp and values, which is an array of strings, whose
* even index entry is the name of the stat, and the odd index entry is
* the value.
* @return {!Element} The stats table element.
* @private
*/
ensureStatsTable_: function(peerConnectionElement, report) {