webRTC（十三）

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_ = 《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》无偿开源 徽信搜索公众号【编程进阶路】 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 |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) {

let values = [];

let nextPoint = 0;

let currentValue = 0;

let time = startTime;

for (let 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;

})();

const TimelineGraphView = (function() {

// Maximum