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、實時音視頻開發者交流經驗。