src/content/browser/resources/media/webrtc_internals.js

   1 // Copyright (c) 2013 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5
   6 var peerConnectionsListElem = null;
   7 var ssrcInfoManager = null;
   8 var peerConnectionUpdateTable = null;
   9 var statsTable = null;
  10 var dumpCreator = null;
  11 /** A map from peer connection id to the PeerConnectionRecord. */
  12 var peerConnectionDataStore = {};
  13
  14 /** A simple class to store the updates and stats data for a peer connection. */
  15 var PeerConnectionRecord = (function() {
  16   /** @constructor */
  17   function PeerConnectionRecord() {
  18     /** @private */
  19     this.record_ = {
  20       constraints: {},
  21       servers: [],
  22       stats: {},
  23       updateLog: [],
  24       url: '',
  25     };
  26   };
  27
  28   PeerConnectionRecord.prototype = {
  29     /** @override */
  30     toJSON: function() {
  31       return this.record_;
  32     },
  33
  34     /**
  35      * Adds the initilization info of the peer connection.
  36      * @param {string} url The URL of the web page owning the peer connection.
  37      * @param {Array} servers STUN servers used by the peer connection.
  38      * @param {!Object} constraints Media constraints.
  39      */
  40     initialize: function(url, servers, constraints) {
  41       this.record_.url = url;
  42       this.record_.servers = servers;
  43       this.record_.constraints = constraints;
  44     },
  45
  46     /**
  47      * @param {string} dataSeriesId The TimelineDataSeries identifier.
  48      * @return {!TimelineDataSeries}
  49      */
  50     getDataSeries: function(dataSeriesId) {
  51       return this.record_.stats[dataSeriesId];
  52     },
  53
  54     /**
  55      * @param {string} dataSeriesId The TimelineDataSeries identifier.
  56      * @param {!TimelineDataSeries} dataSeries The TimelineDataSeries to set to.
  57      */
  58     setDataSeries: function(dataSeriesId, dataSeries) {
  59       this.record_.stats[dataSeriesId] = dataSeries;
  60     },
  61
  62     /**
  63      * @param {string} type The type of the update.
  64      * @param {string} value The value of the update.
  65      */
  66     addUpdate: function(type, value) {
  67       this.record_.updateLog.push({
  68         time: (new Date()).toLocaleString(),
  69         type: type,
  70         value: value,
  71       });
  72     },
  73   };
  74
  75   return PeerConnectionRecord;
  76 })();
  77
  78 // The maximum number of data points bufferred for each stats. Old data points
  79 // will be shifted out when the buffer is full.
  80 var MAX_STATS_DATA_POINT_BUFFER_SIZE = 1000;
  81
  82 <include src="data_series.js"/>
  83 <include src="ssrc_info_manager.js"/>
  84 <include src="stats_graph_helper.js"/>
  85 <include src="stats_table.js"/>
  86 <include src="peer_connection_update_table.js"/>
  87 <include src="dump_creator.js"/>
  88
  89
  90 function initialize() {
  91   peerConnectionsListElem = $('peer-connections-list');
  92   dumpCreator = new DumpCreator(peerConnectionsListElem);
  93   ssrcInfoManager = new SsrcInfoManager();
  94   peerConnectionUpdateTable = new PeerConnectionUpdateTable();
  95   statsTable = new StatsTable(ssrcInfoManager);
  96
  97   chrome.send('getAllUpdates');
  98
  99   // Requests stats from all peer connections every second.
 100   window.setInterval(function() {
 101     if (peerConnectionsListElem.getElementsByTagName('li').length > 0)
 102       chrome.send('getAllStats');
 103   }, 1000);
 104 }
 105 document.addEventListener('DOMContentLoaded', initialize);
 106
 107
 108 /**
 109  * A helper function for getting a peer connection element id.
 110  *
 111  * @param {!Object.<string, number>} data The object containing the pid and lid
 112  *     of the peer connection.
 113  * @return {string} The peer connection element id.
 114  */
 115 function getPeerConnectionId(data) {
 116   return data.pid + '-' + data.lid;
 117 }
 118
 119
 120 /**
 121  * Extracts ssrc info from a setLocal/setRemoteDescription update.
 122  *
 123  * @param {!PeerConnectionUpdateEntry} data The peer connection update data.
 124  */
 125 function extractSsrcInfo(data) {
 126   if (data.type == 'setLocalDescription' ||
 127       data.type == 'setRemoteDescription') {
 128     ssrcInfoManager.addSsrcStreamInfo(data.value);
 129   }
 130 }
 131
 132
 133 /**
 134  * Helper for adding a peer connection update.
 135  *
 136  * @param {Element} peerConnectionElement
 137  * @param {!PeerConnectionUpdateEntry} update The peer connection update data.
 138  */
 139 function addPeerConnectionUpdate(peerConnectionElement, update) {
 140   peerConnectionUpdateTable.addPeerConnectionUpdate(peerConnectionElement,
 141                                                     update);
 142   extractSsrcInfo(update);
 143   peerConnectionDataStore[peerConnectionElement.id].addUpdate(
 144       update.type, update.value);
 145 }
 146
 147
 148 /** Browser message handlers. */
 149
 150
 151 /**
 152  * Removes all information about a peer connection.
 153  *
 154  * @param {!Object.<string, number>} data The object containing the pid and lid
 155  *     of a peer connection.
 156  */
 157 function removePeerConnection(data) {
 158   var element = $(getPeerConnectionId(data));
 159   if (element) {
 160     delete peerConnectionDataStore[element.id];
 161     peerConnectionsListElem.removeChild(element);
 162   }
 163 }
 164
 165
 166 /**
 167  * Adds a peer connection.
 168  *
 169  * @param {!Object} data The object containing the pid, lid, url, servers, and
 170  *     constraints of a peer connection.
 171  */
 172 function addPeerConnection(data) {
 173   var id = getPeerConnectionId(data);
 174
 175   if (!peerConnectionDataStore[id]) {
 176     peerConnectionDataStore[id] = new PeerConnectionRecord();
 177   }
 178   peerConnectionDataStore[id].initialize(
 179       data.url, data.servers, data.constraints);
 180
 181   var peerConnectionElement = $(id);
 182   if (!peerConnectionElement) {
 183     peerConnectionElement = document.createElement('li');
 184     peerConnectionsListElem.appendChild(peerConnectionElement);
 185     peerConnectionElement.id = id;
 186   }
 187   peerConnectionElement.innerHTML =
 188       '<h3>PeerConnection ' + peerConnectionElement.id + '</h3>' +
 189       '<div>' + data.url + ' ' + data.servers + ' ' + data.constraints +
 190       '</div>';
 191
 192   // Clicking the heading can expand or collapse the peer connection item.
 193   peerConnectionElement.firstChild.title = 'Click to collapse or expand';
 194   peerConnectionElement.firstChild.addEventListener('click', function(e) {
 195     if (e.target.parentElement.className == '')
 196       e.target.parentElement.className = 'peer-connection-hidden';
 197     else
 198       e.target.parentElement.className = '';
 199   });
 200
 201   return peerConnectionElement;
 202 }
 203
 204
 205 /**
 206  * Adds a peer connection update.
 207  *
 208  * @param {!PeerConnectionUpdateEntry} data The peer connection update data.
 209  */
 210 function updatePeerConnection(data) {
 211   var peerConnectionElement = $(getPeerConnectionId(data));
 212   addPeerConnectionUpdate(peerConnectionElement, data);
 213 }
 214
 215
 216 /**
 217  * Adds the information of all peer connections created so far.
 218  *
 219  * @param {Array.<!Object>} data An array of the information of all peer
 220  *     connections. Each array item contains pid, lid, url, servers,
 221  *     constraints, and an array of updates as the log.
 222  */
 223 function updateAllPeerConnections(data) {
 224   for (var i = 0; i < data.length; ++i) {
 225     var peerConnection = addPeerConnection(data[i]);
 226
 227     var log = data[i].log;
 228     if (!log)
 229       continue;
 230     for (var j = 0; j < log.length; ++j) {
 231       addPeerConnectionUpdate(peerConnection, log[j]);
 232     }
 233   }
 234 }
 235
 236
 237 /**
 238  * Handles the report of stats.
 239  *
 240  * @param {!Object} data The object containing pid, lid, and reports, where
 241  *     reports is an array of stats reports. Each report contains id, type,
 242  *     and stats, where stats is the object containing timestamp and values,
 243  *     which is an array of strings, whose even index entry is the name of the
 244  *     stat, and the odd index entry is the value.
 245  */
 246 function addStats(data) {
 247   var peerConnectionElement = $(getPeerConnectionId(data));
 248   if (!peerConnectionElement)
 249     return;
 250
 251   for (var i = 0; i < data.reports.length; ++i) {
 252     var report = data.reports[i];
 253     statsTable.addStatsReport(peerConnectionElement, report);
 254     drawSingleReport(peerConnectionElement, report);
 255   }
 256 }
 257
 258
 259 /**
 260  * Delegates to dumpCreator to update the recording status.
 261  * @param {!Object.<string>} update Key-value pairs describing the status of the
 262  *     RTP recording.
 263  */
 264 function updateDumpStatus(update) {
 265   dumpCreator.onUpdate(update);
 266 }