在某些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的内容，我们可以分析端到端的过程中，具体是哪一个环节导致了延迟变大。通过分析结果，才能进行有效的优化。
其他
如果你也是专注前端多媒体或者对前端多媒体感兴趣，可以关注
