webRTC（十三），androidstudio开发环境配置

Packets sent per second

• css

button {

margin: 10px 20px 25px 0;

vertical-align: top;

width: 134px;

}

table {

margin: 200px (50% - 100) 0 0;

}

textarea {

color: #444;

font-size: 0.9em;

font-weight: 300;

height: 20.0em;

padding: 5px;

width: calc(100% - 10px);

}

div#getUserMedia {

padding: 0 0 8px 0;

}

div.input {

display: inline-block;

margin: 0 4px 0 0;

vertical-align: top;

width: 310px;

}

div.input > div {

margin: 0 0 20px 0;

vertical-align: top;

}

div.output {

background-color: #eee;

display: inline-block;

font-family: ‘Inconsolata’, ‘Courier New’, monospace;

font-size: 0.9em;

padding: 10px 10px 10px 25px;

position: relative;

top: 10px;

white-space: pre;

width: 270px;

}

div.label {

display: inline-block;

font-weight: 400;

width: 120px;

}

div.graph-container {

background-color: #ccc;

float: left;

margin: 0.5em;

width: calc(50%-1em);

}

div#preview {

border-bottom: 1px solid #eee;

margin: 0 0 1em 0;

padding: 0 0 0.5em 0;

}

div#preview > div {

display: inline-block;

vertical-align: top;

width: calc(50% - 12px);

}

section#statistics div {

display: inline-block;

font-family: ‘Inconsolata’, ‘Courier New’, monospace;

vertical-align: top;

width: 308px;

}

section#statistics div#senderStats {

margin: 0 20px 0 0;

}

section#constraints > div {

margin: 0 0 20px 0;

}

h2 {

margin: 0 0 1em 0;

}

section#constraints label {

display: inline-block;

width: 156px;

}

section {

margin: 0 0 20px 0;

padding: 0 0 15px 0;

}

video {

background: #222;

margin: 0 0 0 0;

–width: 100%;

width: var(–width);

height: 225px;

}

@media screen and (max-width: 720px) {

button {

font-weight: 500;

height: 56px;

line-height: 1.3em;

width: 90px;

}

div#getUserMedia {

padding: 0 0 40px 0;

}

section#statistics div {

width: calc(50% - 14px);

}

}

• graph.js

/*

• Copyright © 2015 The WebRTC project authors. All Rights Reserved.

• Use of this source code is governed by a BSD-style license

• that can be found in the LICENSE file in the root of the source

• tree.

*/

// taken from chrome://webrtc-internals with jshint adaptions

‘use strict’;

/* exported TimelineDataSeries, TimelineGraphView */

// The maximum number of data points bufferred for each stats. Old data points

// will be shifted out when the buffer is full.

const MAX_STATS_DATA_POINT_BUFFER_SIZE = 1000;

const TimelineDataSeries = (function() {

/**

• @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 {};

}

let values = [];

for (let 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) {

let 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 |stepSi