1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
|
// 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 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 simple class to store the updates and stats data for a peer connection. */
var PeerConnectionRecord = (function() {
/** @constructor */
function PeerConnectionRecord() {
/** @private */
this.record_ = {
constraints: {},
servers: [],
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} servers STUN servers used by the peer connection.
* @param {!Object} constraints Media constraints.
*/
initialize: function(url, servers, constraints) {
this.record_.url = url;
this.record_.servers = servers;
this.record_.constraints = constraints;
},
/**
* @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 {string} type The type of the update.
* @param {string} value The value of the update.
*/
addUpdate: function(type, value) {
this.record_.updateLog.push({
time: (new Date()).toLocaleString(),
type: type,
value: 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;
<include src="tab_view.js"/>
<include src="data_series.js"/>
<include src="ssrc_info_manager.js"/>
<include src="stats_graph_helper.js"/>
<include src="stats_table.js"/>
<include src="peer_connection_update_table.js"/>
<include src="dump_creator.js"/>
function initialize() {
dumpCreator = new DumpCreator($('content-root'));
tabView = new TabView($('content-root'));
ssrcInfoManager = new SsrcInfoManager();
peerConnectionUpdateTable = new PeerConnectionUpdateTable();
statsTable = new StatsTable(ssrcInfoManager);
chrome.send('getAllUpdates');
// Requests stats from all peer connections every second.
window.setInterval(function() {
if (Object.keys(peerConnectionDataStore).length > 0)
chrome.send('getAllStats');
}, 1000);
}
document.addEventListener('DOMContentLoaded', initialize);
/**
* A helper function for getting a peer connection element id.
*
* @param {!Object.<string, number>} data The object containing the pid and lid
* of the peer connection.
* @return {string} The peer connection element id.
*/
function getPeerConnectionId(data) {
return data.pid + '-' + data.lid;
}
/**
* Extracts ssrc info from a setLocal/setRemoteDescription update.
*
* @param {!PeerConnectionUpdateEntry} data The peer connection update data.
*/
function extractSsrcInfo(data) {
if (data.type == 'setLocalDescription' ||
data.type == 'setRemoteDescription') {
ssrcInfoManager.addSsrcStreamInfo(data.value);
}
}
/**
* Helper for adding a peer connection update.
*
* @param {Element} peerConnectionElement
* @param {!PeerConnectionUpdateEntry} update The peer connection update data.
*/
function addPeerConnectionUpdate(peerConnectionElement, update) {
peerConnectionUpdateTable.addPeerConnectionUpdate(peerConnectionElement,
update);
extractSsrcInfo(update);
peerConnectionDataStore[peerConnectionElement.id].addUpdate(
update.type, update.value);
}
/** Browser message handlers. */
/**
* Removes all information about a peer connection.
*
* @param {!Object.<string, number>} data The object containing the pid and lid
* of a peer connection.
*/
function removePeerConnection(data) {
var element = $(getPeerConnectionId(data));
if (element) {
delete peerConnectionDataStore[element.id];
tabView.removeTab(element.id);
}
}
/**
* Adds a peer connection.
*
* @param {!Object} data The object containing the pid, lid, url, servers, and
* constraints of a peer connection.
*/
function addPeerConnection(data) {
var id = getPeerConnectionId(data);
if (!peerConnectionDataStore[id]) {
peerConnectionDataStore[id] = new PeerConnectionRecord();
}
peerConnectionDataStore[id].initialize(
data.url, data.servers, data.constraints);
var peerConnectionElement = $(id);
if (!peerConnectionElement) {
peerConnectionElement = tabView.addTab(id, data.url);
}
peerConnectionElement.innerHTML =
'<p>' + data.url + ' ' + data.servers + ' ' + data.constraints +
'</p>';
return peerConnectionElement;
}
/**
* Adds a peer connection update.
*
* @param {!PeerConnectionUpdateEntry} data The peer connection update data.
*/
function updatePeerConnection(data) {
var peerConnectionElement = $(getPeerConnectionId(data));
addPeerConnectionUpdate(peerConnectionElement, data);
}
/**
* Adds the information of all peer connections created so far.
*
* @param {Array.<!Object>} data An array of the information of all peer
* connections. Each array item contains pid, lid, url, servers,
* constraints, and an array of updates as the log.
*/
function updateAllPeerConnections(data) {
for (var i = 0; i < data.length; ++i) {
var peerConnection = addPeerConnection(data[i]);
var log = data[i].log;
if (!log)
continue;
for (var j = 0; j < log.length; ++j) {
addPeerConnectionUpdate(peerConnection, log[j]);
}
}
}
/**
* Handles the report of stats.
*
* @param {!Object} data The object containing pid, lid, and reports, where
* reports is an array of stats reports. Each report 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.
*/
function addStats(data) {
var peerConnectionElement = $(getPeerConnectionId(data));
if (!peerConnectionElement)
return;
for (var i = 0; i < data.reports.length; ++i) {
var report = data.reports[i];
statsTable.addStatsReport(peerConnectionElement, report);
drawSingleReport(peerConnectionElement, report);
}
}
/**
* Delegates to dumpCreator to update the recording status.
* @param {!Object.<string>} update Key-value pairs describing the status of the
* RTP recording.
*/
function updateDumpStatus(update) {
dumpCreator.onUpdate(update);
}
|