- 统计信息
//统计信息
window.setInterval(()=>{
if (!pc) {
return;
}
const sender = pc.getSenders()[0];
if (!sender) {
return;
}
sender.getStats()
.then(res=>{
res.forEach(report =>{
let bytes;
let packets;
if (report.type === ‘outbound-rtp’) {
if (report.isRemote) {
return;
}
const now = report.timestamp;
bytes = report.bytesSent;
packets = report.packetsSent;
if (lastResult && lastResult.has(report.id)) {
const bitrate = 8 * (bytes - lastResult.get(report.id).bytesSent) /(now - lastResult.get(report.id).timestamp);
// append to chart
bitrateSeries.addPoint(now, bitrate);
bitrateGraph.setDataSeries([bitrateSeries]);
bitrateGraph.updateEndDate();
// calculate number of packets and app end to chart
packetSeries.addPoint(now, packets - lastResult.get(report.id).packetsSent);
packetGraph.setDataSeries([packetSeries]);
packetGraph.updateEndDate();
}
}
});
lastResult = res;
}).catch(err=>{
console.error(err);
});
},1000);
- 效果
- html
Connect Sig Server
Leave
kps
Local:
Remote:
- 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),
};
},