如何获取WebRTC指标？有无非浏览器内部页面的低耗获取方案？

1. 利用getStats() API（核心方案） #

你之前误以为只能在新建连接时使用，但实际上现有RTCPeerConnection实例完全可以调用getStats()，这是W3C标准API，资源消耗极低，也是官方推荐的指标获取方式。

• 调用方式：直接对已存在的连接实例调用方法，按需筛选指标：

  // 假设peerConn是页面中已创建的RTCPeerConnection实例
  peerConn.getStats().then(stats => {
    stats.forEach(report => {
      // 根据report.type筛选需要的指标类型
      switch(report.type) {
        case 'inbound-rtp':
          console.log('入站丢包率:', (report.packetsLost / report.packetsReceived).toFixed(2));
          console.log('当前接收比特率:', report.bytesReceived);
          break;
        case 'candidate-pair':
          console.log('ICE候选对状态:', report.state);
          break;
      }
    });
  });
  

• 优势：直接从连接实例提取原生数据，无需解析页面，性能开销可以忽略，数据维度完整。

2. 监听连接事件实时收集指标 #

通过绑定RTCPeerConnection的事件，在状态变化时同步记录关键指标：

• 监听iceconnectionstatechange：跟踪ICE连接的生命周期状态（如checking/connected/disconnected）
• 监听track事件：获取音视频轨道的基础传输状态
• 示例代码：

  peerConn.addEventListener('iceconnectionstatechange', () => {
    console.log('ICE连接状态更新:', peerConn.iceConnectionState);
  });
  

3. 浏览器原生调试工具（非页面解析） #

如果是调试场景下获取指标，可直接用浏览器DevTools的内置面板：

• Performance面板：录制会话后，在WebRTC分类下查看连接时序、指标波动曲线
• Network面板：筛选webrtc类型请求，查看候选对协商、传输数据包详情
• 优势：无需编写代码，直接通过调试工具获取，资源消耗远低于页面解析方案

注意事项 #

• 必须能访问到目标页面的RTCPeerConnection实例：如果是第三方嵌入的WebRTC应用，可能需要通过脚本注入获取实例，但需符合页面的内容安全策略（CSP）
• getStats()返回的报告字段会因浏览器略有差异，需要做简单的兼容性判断

内容的提问来源于stack exchange，提问作者askingstuff