整理自：https://webdemo.agora.io/agora_webrtc_troubleshooting/
這樣的情況，基於 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 andtrytoinit/play it */
AgoraRTC.createStream(): stream
/**
* accumulate audio level tocheck
* ifit isinan 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
npminstall
3.在本地運行應用
npmrun dev
在瀏覽器訪問 localhost:8080
4.Build應用
npmrun build
創建文件需要 HTTP服務器。
完成以上步驟後，你也可以將它集成到自己的應用中，並根據需要，修改 UI。在用戶使用產品之前，可以進行運行環境的檢測，幫你提前排雷，提高用戶體驗。