Question

我正在完成视频通信研究生课程的WebRTC项目，它本质上是一个视频会议聊天室。连接到服务器的每个人都会添加到会议中。

我需要使用WebRTC中的stats API来显示每个RTCPeerConnection的一些相关性能统计信息（每秒丢失的数据包，抖动，重传等）。这有助于观察性能成本，因为更多对等体被添加到对话中。

然而，API似乎还没有完全充实。它显然经历了一些刷新并且与我见过的一些W3C规范不太匹配（虽然它可能已经过时了，或者我只是不明白阅读规范的细微差别，也不会让我感到惊讶）。

我对API的调用是similar to this one，但解释数据并不简单。例如，当循环遍历RTCStatsReport::results()中的所有项时，其中许多项具有重复的名称和令人困惑的值。我似乎无法找到任何有关其含义的信息。如果有人能帮助我理解一些重要的东西或者指出我失去的黄金之城（例如适当的文件），我将不胜感激。

Answer 1

您混淆的根源可能是Google Chrome的getStats()实施标准尚未更新（尚未更新）（您链接的示例是特定于Chrome的，因此我认为您正在使用Chrome）。

如果你尝试使用Firefox，你会发现它实现了getStats()到the standard（但是它不支持标准中的所有统计数据，并且整体数据比Chrome更少;＆＃39;旧的API）。

由于您没有指定浏览器，我将描述该标准，并使用Firefox来展示示例。您可能已经知道getStats()，但标准版本允许您过滤特定的MediaStreamTrack，或者传入null以获取与连接相关的所有数据：

var pc = new RTCPeerConnection(config)
...
pc.getStats(null, function(stats) { ...}, function(error) { ... });

还有一个更新的承诺版本。

数据在stats中返回，dictionary RTCStats { DOMHiResTimeStamp timestamp; RTCStatsType type; DOMString id; };是一个大雪球对象，每个记录都有唯一的ID。每条记录都有the following基类：

id

其中"inbound-rtp"是用于访问记录的属性名称的重复。派生类型描述为here。

您通常会在找到感兴趣的RTCStatsType之前枚举记录，例如dictionary RTCRTPStreamStats : RTCStats { DOMString ssrc; DOMString remoteId; boolean isRemote = false; DOMString mediaTrackId; DOMString transportId; DOMString codecId; unsigned long firCount; unsigned long pliCount; unsigned long nackCount; unsigned long sliCount; }; dictionary RTCInboundRTPStreamStats : RTCRTPStreamStats { unsigned long packetsReceived; unsigned long long bytesReceived; unsigned long packetsLost; double jitter; double fractionLost; };看起来像这样：

Id

RTCOutboundRTPStreamStats有相应的一个。

您还可以跟踪对其他记录的交叉引用。任何以mediaTrackId结尾的成员都是您可以用来查找其他记录的外键。例如，对于此RTP数据所属的跟踪，isRemote == false会链接到RTCMediaStreamTrackStats。

一个特别松散的情况是RTCP数据，它存储在与上面相同的字典中，这意味着您必须检查remoteId以了解您正在查看RTP数据而不是RTCP数据。使用remoteId查找另一个（请注意，这是最近的名称更改，因此Firefox仍在此处使用较旧的var pc1 = new RTCPeerConnection(), pc2 = new RTCPeerConnection(); var add = (pc, can) => can && pc.addIceCandidate(can).catch(log); pc1.onicecandidate = e => add(pc2, e.candidate); pc2.onicecandidate = e => add(pc1, e.candidate); pc2.oniceconnectionstatechange = () => update(statediv, pc2.iceConnectionState); pc2.onaddstream = e => v2.srcObject = e.stream; navigator.mediaDevices.getUserMedia({ video: true }) .then(stream => pc1.addStream(v1.srcObject = stream)) .then(() => pc1.createOffer()) .then(offer => pc1.setLocalDescription(offer)) .then(() => pc2.setRemoteDescription(pc1.localDescription)) .then(() => pc2.createAnswer()) .then(answer => pc2.setLocalDescription(answer)) .then(() => pc1.setRemoteDescription(pc2.localDescription)) .then(() => repeat(10, () => Promise.all([pc1.getStats(), pc2.getStats()]) .then(([s1, s2]) => { var s = ""; s1.forEach(stat => { if (stat.type == "outbound-rtp" && !stat.isRemote) { s += "<h4>Sender side</h4>" + dumpStats(stat); } }); s2.forEach(stat => { if (stat.type == "inbound-rtp" && !stat.isRemote) { s += "<h4>Receiver side</h4>" + dumpStats(stat); } }); update(statsdiv, "<small>"+ s +"</small>"); }))) .catch(failed); function dumpStats(o) { var s = ""; if (o.mozAvSyncDelay !== undefined || o.mozJitterBufferDelay !== undefined) { if (o.mozAvSyncDelay !== undefined) s += "A/V sync: " + o.mozAvSyncDelay + " ms"; if (o.mozJitterBufferDelay !== undefined) { s += " Jitter buffer delay: " + o.mozJitterBufferDelay + " ms"; } s += "<br>"; } s += "Timestamp: "+ new Date(o.timestamp).toTimeString() +" Type: "+ o.type +"<br>"; if (o.ssrc !== undefined) s += "SSRC: " + o.ssrc + " "; if (o.packetsReceived !== undefined) { s += "Recvd: " + o.packetsReceived + " packets"; if (o.bytesReceived !== undefined) { s += " ("+ (o.bytesReceived/1024000).toFixed(2) +" MB)"; } if (o.packetsLost !== undefined) s += " Lost: "+ o.packetsLost; } else if (o.packetsSent !== undefined) { s += "Sent: " + o.packetsSent + " packets"; if (o.bytesSent !== undefined) s += " ("+ (o.bytesSent/1024000).toFixed(2) +" MB)"; } else { s += "<br><br>"; } s += "<br>"; if (o.bitrateMean !== undefined) { s += " Avg. bitrate: "+ (o.bitrateMean/1000000).toFixed(2) +" Mbps"; if (o.bitrateStdDev !== undefined) { s += " ("+ (o.bitrateStdDev/1000000).toFixed(2) +" StdDev)"; } if (o.discardedPackets !== undefined) { s += " Discarded packts: "+ o.discardedPackets; } } s += "<br>"; if (o.framerateMean !== undefined) { s += " Avg. framerate: "+ (o.framerateMean).toFixed(2) +" fps"; if (o.framerateStdDev !== undefined) { s += " ("+ o.framerateStdDev.toFixed(2) +" StdDev)"; } } if (o.droppedFrames !== undefined) s += " Dropped frames: "+ o.droppedFrames; if (o.jitter !== undefined) s += " Jitter: "+ o.jitter; return s; } var wait = ms => new Promise(r => setTimeout(r, ms)); var repeat = (ms, func) => new Promise(r => (setInterval(func, ms), wait(ms).then(r))); var log = msg => div.innerHTML = div.innerHTML + msg +"<br>"; var update = (div, msg) => div.innerHTML = msg; var failed = e => log(e.name +": "+ e.message +", line "+ e.lineNumber);）。出站RTP的关联RTCP统计信息存储在入站字典中，反之亦然（有意义）。

这是在Firefox中运行的an example：

＆＃13;

<table><tr><td>
  <video id="v1" width="124" height="75" autoplay></video><br>
  <video id="v2" width="124" height="75" autoplay></video><br>
  <div id="statediv"></div></td>
<td><div id="div"></div><br><div id="statsdiv"></div></td>
</tr></table>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

＆＃13;

stats.forEach(stat => console.log(JSON.stringify(stat)))

＆＃13;

要查看支持的内容，请{{1}}转储所有内容。很难读，但它就在那里。

我相信很快就会为adapter.js计划一个polyfill，以弥补差距，直到Chrome更新其实施。

更新：我已更新示例以使用新的maplike语法，并更改了类型名称以包含破折号，以符合最新规范。

有人可以全面解释WebRTC统计API吗？

1 个答案: