WebRTC-前端分析端到端延迟

在某些WebRTC业务场景中对延迟非常敏感。对于前端来说WebRTC是黑盒的，发生问题时排查原因非常困难。好在WebRTC提供了googTimingFrameInfo这个字段来用于分析端到端的分段延迟。

使用流程

获取Receiver

当PeerConnection建立连接成功后，先通过PeerConnection的getReceivers方法来获取到接收的Receiver数组。一般情况，一个PeerConnection会接收一路视频和一路音频(当然也有特殊情况会有一路音频+多路视频)。

const receiverArr: RTCRtpReceiver[] = peerConnection.getReceivers();
for (let i = 0; i < receiverArr.length; ++i) {
  if (receiverArr[i].track.kind === "video") {
    const receiver: RTCRtpReceiver = receiverArr[i];
    // 找到receiver
    break;
  }
}

获取googTimingFrameInfo内容

通过RTCRtpReceiver.getStats方法获取googTimingFrameInfo的内容

reveiver.getStats().then((report: RTCStatsReport) => {
  report.forEach((stats: RTCStats) => {
    if (stats.type === "inbound-rtp") {
      console.log("googTimingFrameInfo:", stats.googTimingFrameInfo);
    }
  })
})

解析googTimingFrameInfo的内容

/**
*  解析googTimingFrameInfo的方法
*/
function parseGoogTimingFrameInfo (googTimingFrameInfoStr: string): void {
  const arr: string[] = googTimingFrameInfoStr.split(',');
  if (arr.length === 15) {
    const capture_time_ms: number = parseInt(arr[1]);
    const encode_start_ms: number = parseInt(arr[2]);
    const encode_finish_ms: number = parseInt(arr[3]);
    const packetization_finish_ms: number = parseInt(arr[4]);
    const pacer_exit_ms: number = parseInt(arr[5]);
    const receive_start_ms: number = parseInt(arr[8]);
    const receive_finish_ms: number = parseInt(arr[9]);
    const decode_start_ms: number = parseInt(arr[10]);
    const decode_finish_ms: number = parseInt(arr[11]);
    const render_time_ms: number = parseInt(arr[12]);
    console.log(`采集到送编码耗时:${encode_start_ms - capture_time_ms}`);
    console.log(`编码耗时:${encode_finish_ms - encode_start_ms}`);
    console.log(`打包耗时:${packetization_finish_ms - encode_finish_ms}`);
    console.log(`打包完成到发送耗时:${pacer_exit_ms - packetization_finish_ms}`);
    console.log(`接收耗时:${receive_finish_ms - receive_start_ms}`);
    console.log(`接收完成到送解码耗时:${decode_start_ms - receive_finish_ms}`);
    console.log(`解码耗时:${decode_finish_ms - decode_start_ms}`);
    console.log(`解码完成到送渲染耗时:${render_time_ms - decode_finish_ms}`);
  }
}

总结

通过解析googTimingFrameInfo的内容，我们可以分析端到端的过程中，具体是哪一个环节导致了延迟变大。通过分析结果，才能进行有效的优化。

其他

如果你也是专注前端多媒体或者对前端多媒体感兴趣，可以搜索微信公众号"前端多媒体"