WebRTC 通话质量调优：Troubleshooting 小工具

这样的状况，基于 WebRTC 开发产品的你是否是也曾遇到过？

一个基于 WebRTC 的视频通话是否能成功创建起来，直接影响它的不必定是代码质量、服务端稳定性，还多是用户端那些你难以察觉的软硬件兼容性问题，还有谜同样的用户操做。但用户却不会管那么多。他们的第一反应绝对是“你这个应用有 Bug 啊！”

咱们声网的工程师们也曾一度为之困扰。直到，他们本身写了个 Troubleshooting 小工具。如今这个小工具开源了。这个小工具是基于 Agroa SDK 的接口实现，不只适用于 Agora 开发者，一样适用于刚刚接触 WebRTC 的开发者。

Agora WebRTC Troubleshooting

这个工具能够运行于 PC 端浏览器和手机端浏览器，能够帮助你自动检测设备浏览器是否能正常运行 WebRTC 应用。可检测的项目包括：

• 浏览器兼容性

• 麦克风录音是否正常

• 扬声器播放是否正常

• 目前设备可支持哪些分辨率

• 网络链接及当前网络下的音视频码率、丢包率

• 摄像头（用户可选）

测试工具地址在这里，能够给本身的浏览器作作“体检”：

https://webdemo.agora.io/agora_webrtc_troubleshooting/

这个小工具使用起来很简单，能够说老小咸宜，只须要按照页面提示一步步操做便可。

若是你是基于 WebRTC 开发应用的独立开发者，可让你的用户经过这个 Web demo 地址测试以上项目。只不过，在测试“网络链接”这一项时，该工具是测试用户端与 Agora 服务端的网络链接状态与丢包状况，仅此测试项结果可能会与未集成 Agora SDK 的 WebRTC 应用的实际体验不一样。

若是你是 Agora 开发者，那么你还能够更进一步，能够基于源代码修改出一份适用于本身 App 的测试工具，还能够将它集成到产品中。咱们已经有部分 Agora 开发者这么去作了。下面，咱们简单讲解一下源代码，并告诉你如何修改。

代码原理解析

测试工具中调用了多个 Agora SDK 接口，例如经过AgoraRTC.checkSystemRequirements接口来检测浏览器兼容性；利用stream.getStats来获取网络链接状态数据；使用stream.getAudioLevel来检测当前的音量等。开发者也能够在本身的应用中，利用起这些接口，将相应功能加入到产品中。

浏览器兼容性

这里使用了 Agora Web SDK 的AgoraRTC.checkSystemRequirements接口来自动检测浏览器是否支持当前的语音、视频通话。

/** whether your browser fully supports Agora Web SDK */
AgoraRTC.checkSystemRequirements(): boolean
/**
 * some browser info got from
 * object `navigator` in BOM
 */
navigator.appVersion
navigator.appName
复制代码

检测麦克风

第一步：使用 AgoraRTC.createStream建立音频流

第二步：使用stream.getAudioLevel来检测当前的音量

/** create an audio stream and try to init/play it */
AgoraRTC.createStream(): stream
/**
 * accumulate audio level to check
 * if it is in an ideal range
 */
stream.getAudioLevel(): number
复制代码

检测扬声器

在这里，咱们直接使用了 HTML5 的音频组件，让用户来确认是否听到了正在播放的音频。

测分辨率

第一步：使用AgoraRTC.createStream基于不一样的参数建立视频流

第二步：使用HTMLVideoElement来获取视频的分辨率

/** Create stream with different video profiles */
AgoraRTC.createStream(): stream
/** Get actual resolution from html element */
HTMLVideoElement.videoHeight
HTMLVideoElement.videoWidth
复制代码

检测网络链接

第一步：使用AgoraRTC.createClient来建立一个发送客户端和一个接收客户端
第二步：使用AgoraRTC.createStream建立流
第三步：使用client.publish从发送客户端发布流
第四步：使用client.subscribe将发送的流订阅至接收客户端
第五步：使用stream.getStats获取网络链接状态数据

/**
 * Create two clients: a sender which will publish
 * a regular stream, and a receiver which will subscribe the
 * stream published by the sender.
 */
AgoraRTC.createStream(): stream
/** Get stream tranfer info by using getStats */
stream.getStats(callback: (stats:any) => void): void
复制代码

检测摄像头

向用户询问是否开启摄像头，若是确认开启，则在画面中显示用户摄像头采集到的图像。

测试工具的修改

若是你是 Agora 开发者，想要修改出一个适用于本身应用的测试工具，能够按照如下步骤操做：

1.将你的 App ID 填写到 ./src/utils 目录下的 settings.js 文件中。

2.安装 dependencies

npm install
复制代码

3.在本地运行应用

npm run dev
复制代码

在浏览器访问 localhost:8080

4.Build 应用

npm run build
复制代码

建立文件须要 HTTP 服务器。

完成以上步骤后，你也能够将它集成到本身的应用中，并根据须要，修改 UI。在用户使用产品以前，能够进行运行环境的检测，帮你提早排雷，提升用户体验。

点击这里进入 Github 获取代码

欢迎访问 RTC 开发者社区，与更多WebRTC、实时音视频开发者交流经验。