如何用JavaScript创建按钮从JsSip收集双代理通话质量数据？

核心思路 #

JsSip 的通话实例（RTCSession）内置了 getStats() 方法，能获取 WebRTC 底层的通话统计数据，我们只需要给按钮绑定点击事件，调用该方法并解析所需指标即可。

步骤1：添加HTML按钮 #

在你的 index.html 中插入按钮元素：

<button id="fetchCallStatsBtn">获取通话质量数据</button>

步骤2：编写JavaScript逻辑 #

假设你已经通过 JsSip 建立了通话，且持有活跃的 currentSession 实例（通话建立后状态为 confirmed），以下是完整的处理代码：

// 获取按钮DOM元素
const statsBtn = document.getElementById('fetchCallStatsBtn');

// 绑定点击事件
statsBtn.addEventListener('click', async () => {
  // 校验当前是否有活跃通话
  if (!window.currentSession || window.currentSession.status !== 'confirmed') {
    alert('当前无活跃通话，请先建立连接');
    return;
  }

  try {
    // 异步获取通话统计数据
    const statsReport = await window.currentSession.getStats();
    
    // 初始化存储结构，区分本地发送/接收（对应远端接收/发送）的数据
    const qualityData = {
      本地发送端: {},
      远端接收端（本地视角）: {}
    };

    // 遍历统计报告，筛选音频相关的RTP数据
    statsReport.forEach(report => {
      // 本地发送音频的统计
      if (report.type === 'outbound-rtp' && report.kind === 'audio') {
        qualityData['本地发送端'] = {
          抖动值: `${report.jitter.toFixed(2)} ms`,
          已发送包数: report.packetsSent,
          已发送字节数: report.bytesSent
        };
      }
      // 本地接收音频的统计（对应远端的发送质量）
      else if (report.type === 'inbound-rtp' && report.kind === 'audio') {
        const packetLossRate = report.packetsReceived 
          ? `${((report.packetsLost / report.packetsReceived) * 100).toFixed(2)}%` 
          : 'N/A';
        
        qualityData['远端接收端（本地视角）'] = {
          抖动值: `${report.jitter.toFixed(2)} ms`,
          往返延迟: `${report.roundTripTime?.toFixed(2) || 'N/A'} ms`,
          丢包数: report.packetsLost,
          已接收包数: report.packetsReceived,
          丢包率: packetLossRate
        };
      }
    });

    // 输出数据：可以用console查看，也可以渲染到页面元素
    console.log('通话质量详情:', qualityData);
    alert(JSON.stringify(qualityData, null, 2));
  } catch (err) {
    console.error('获取统计数据失败:', err);
    alert('获取通话质量数据出错，请查看控制台日志');
  }
});

常见问题排查（针对你之前实现失败的情况） #

• 通话实例未正确绑定：确保 currentSession 是全局可访问的（比如挂载到 window），且在通话建立后完成赋值。
• 调用时机错误：必须在通话状态变为 confirmed（接通）后再调用 getStats()，未接通时调用会直接报错。
• 异步处理遗漏：getStats() 返回的是 Promise，必须用 async/await 或 .then() 处理异步逻辑，同步调用无法获取数据。
• 浏览器兼容性：部分浏览器的统计字段命名可能有差异，比如往返延迟 roundTripTime 可能需要从 transport 类型的报告中提取。

内容的提问来源于stack exchange，提问作者E.M