如何使用Google Chrome调试WebRTC通话

WebRTC是一种开源技术，可为 Web 应用程序提供实时通信功能，并被设计为与最新的网络技术协同工作。在 WebRTC 的帮助下，现在可以创建高质量和低延迟的视频、音频和数据共享应用程序，这些应用程序可以直接在 Web 浏览器中运行，而无需任何插件或其他软件。

我们在构建视频通话的全球边缘网络时，经历了WebRTC调试的阵痛，想讨论一下Google Chrome的WebRTC Internal Tool是如何调试WebRTC通话的。

Chrome调试工具webrtc-internals

Google 的 Chrome（87 或更高版本）WebRTC 内部工具是一套内置于 Chrome 浏览器中的调试工具。

webrtc-internals 能够查看有关 WebRTC 调用中媒体流的实时信息。有关视频和音频轨道、使用的编解码器以及流的一般质量的详细信息都包含在该数据中。这些知识对于解决音频和视频质量差的问题非常有帮助。

webrtc-internals 还提供有关 WebRTC 调用中使用的网络配置的详细信息，例如 STUN/ TURN服务器和 ICE 候选者。在尝试解决连接问题时，例如当一侧无法连接到另一侧时，这个信息可能会非常有用。

以下是一些可以使用此工具调试的问题示例：

• 可以帮助确定网络连接问题的根本原因，例如防火墙或 NAT 遍历问题，这些问题可能会阻止 WebRTC 通信。
• 该工具可以协助诊断与信号有关的困难，如要约/应答协商、ICE候选交换和连接建立等问题。
• 该工具提供实时的音视频质量统计，包括丢包、延迟、抖动等，可用于定位和解决影响媒体流质量的问题。
• 该工具可用于查找 WebRTC 性能问题，例如高 CPU 或网络利用率，这些问题可能会影响用户体验。

访问chrome://webrtc-internals，在新标签中启动Chrome浏览器中的WebRTC内部工具。

上面的页面显示了当前活动的 WebRTC 会话的故障排除信息。我们将在本文的下一部分中详细介绍如何使用此信息来解决该问题。

WebRTC-Internals API 概述

要使用 Chrome 提供的内部工具开始对 WebRTC 进行故障排除，必须首先创建对等连接。

在这里，如下图所示，我们正在设置对等连接，以在 webRTC 示例存储库的单个选项卡中演示基​​本对等连接演示。

webrtc-internals 允许以巨大的 JSON 格式下载统计信息和对等连接更新，如下图所示。

下载此文档可以以获得更详细和广泛的演练。

我们可以检查 WebRTC 调用的各个组件，并查看有关媒体流、点对点数据传输和网络配置的实时信息，chrome://webrtc-internals如下图所示。

getUserMedia API 追踪

MediaStream也称为 WebRTC 中的 getUserMedia API，它允许 Web 应用程序访问用户的摄像头和麦克风来实时捕获音频和视频流。

检查 getUserMedia API 跟踪结果时，返回getUserMedia call和getUserMedia result。

getUserMedia call提供有关活动对等连接的音频和视频是否已连接的信息。

getUserMedia result使用 getAudioTracks() 返回有关正在进行的流音频的信息， 使用 getVideoTracks()返回有关视频轨道的信息，以及默认标签信息，例如 External Microphone (Built-in)音频和FaceTime HD Camera (Built-in)视频，如下图所示。

RTCPeerConnection API 跟踪

RTCPeerConnection API 在对等连接期间提供对不同方法和事件的访问。这些事件和活动提供有关连接状态的信息。下图显示了 RTCPeerConnection 事件和方法的 API 跟踪。

通过使用这些事件和方法，我们将推动分析以解决问题。在这里，我们将介绍活动连接中涉及的一些过程和操作。

transceiverAdded：它通过对等连接提供有关音频和视频轨道的信息。这种方法使我们能够确定轨道是否存在。

getTransceivers()[0]:{
 mid: null,
 kind:'audio',
 sender:{
   track:'7467de30-3dc7-4d79-876f-18ced4430512',
   streams:['qlqRff8U2Bs4giVlXSCHwLpad1z4Xq1PACWx'],
 },
 receiver:{
   track:'478c3cc5-0a7d-4542-830e-3e65698edd9b',
   streams:[],
 },
 direction:'sendrecv',
 currentDirection:null,
}

createOffer：这种方法演示了我们想要接收音频、视频和 IceRestart 。获取更多详细信息。

createOffer

options: {offerToReceiveVideo: 1, offerToReceiveAudio: 1, voiceActivityDetection: true, iceRestart: false}

createOfferOnSuccess：此方法显示 createOffer 事件的结果，包括类型

setLocalDescription：这是 WebRTC 中的一种方法，用于为对等连接设置本地会话描述。并显示 setLocalDescription 调用中使用的类型和 SDP。

setLocalDescriptionOnSuccess：此回调显示 setLocalDescription 的结果。

signalingstatechange：这是 WebRTC 中的一个事件，当对等连接的信令状态发生变化时触发。信令状态表示 WebRTC 协商过程的当前状态，可以有不同的值，例如“stable”、“have-local-offer”和“have-remote-offer”。

Icegatheringstatechange：是 WebRTC 中的一个事件，当对等连接的 ICE（交互式连接建立）收集状态发生变化时触发。

setRemoteDescription：这是 WebRTC 中的一种方法，用于为对等连接设置远程会话描述。

setRemoteDescriptionOnSuccess：此回调显示 setRemoteDescription 事件的结果。

Connectionstatechange：这是一个事件，只要两个对等点之间的连接状态发生变化，WebRTC 就会触发该事件。可能的连接状态是“新建”、“正在连接”、“已连接”、“断开连接”、“失败”和“关闭”。

WebRTC 以图表的形式提供相同的数据，其中每个指标的变化在时间线上可见，并显示相关信息，例如网络和媒体性能指标。例如，当数据包丢失开始增加、带宽减少或延迟增加时，

结论

谷歌的Chrome WebRTC内部工具为开发者提供了一套强大的调试工具，用于排除WebRTC相关问题的故障。查看有关媒体流、点对点数据传输和网络配置的实时信息的能力，对于解决与视频和音频质量差、网络连接等有关的问题具有难以置信的价值。如果你正在进行一个WebRTC项目，一定要利用这个宝贵的工具。