這樣的情況，基於 WebRTC 開發產品的你是不是也曾遇到過？

一個基於 WebRTC 的視訊通話是否能成功建立起來，直接影響它的不一定是程式碼質量、服務端穩定性，還可能是使用者端那些你難以察覺的軟硬體相容性問題，還有謎一樣的使用者操作。但使用者卻不會管那麼多。他們的第一反應絕對是“你這個應用有 Bug 啊！”

我們聲網的工程師們也曾一度為之困擾。直到，他們自己寫了個 Troubleshooting 小工具。現在這個小工具開源了。它不僅適用於 Agora 開發者，同樣適用於 WebRTC 開發者和他們的使用者。

Agora WebRTC Troubleshooting

這個工具可以運行於 PC 端瀏覽器和手機端瀏覽器，可以幫助你自動檢測裝置瀏覽器是否能正常執行 WebRTC 應用。可檢測的專案包括：

• 瀏覽器相容性

• 麥克風錄音是否正常

• 揚聲器播放是否正常

• 目前裝置可支援哪些解析度

• 網路連線及當前網路下的音視訊位元速率、丟包率

• 攝像頭（使用者可選）

測試工具地址在這裡，可以給自己的瀏覽器做做“體檢”：

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

這個小工具使用起來很簡單，可以說老少咸宜，只需要按照頁面提示一步步操作即可。為了大家直觀瞭解使用方法，我們還是錄了一個 2 分鐘的小視訊（視訊約 2 分鐘，無聲音）。

如果你是基於 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 地址：https://github.com/AgoraIO/Tools/tree/master/TroubleShooting/Agora-WebRTC-Troubleshooting

歡迎掃碼關注「聲網Agora」 微信公眾號，瞭解更多實時通訊乾貨