標籤：

關於 WebRTC 瀏覽器兼容性測試那些事

03-16

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

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

很久之前，我們聲網的工程師們也曾一度為之困擾。直到，他們自己寫了個 Troubleshooting 小工具。現在這個小工具開源了。它不僅適用於 Agora 開發者，同樣適用於 WebRTC 開發者和他們的用戶。隨手就可以測試電腦上的瀏覽器兼容性。

Agora WebRTC Troubleshooting

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

  • 瀏覽器兼容性
  • 麥克風錄音是否正常
  • 揚聲器播放是否正常
  • 目前設備可支持哪些解析度
  • 網路連接及當前網路下的音視頻碼率、丟包率
  • 攝像頭（用戶可選）

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

webdemo.agora.io/agora_

這個小工具使用起來很簡單，可以說老少咸宜，只需要按照頁面提示一步步操作即可。

如果你是基於 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。在用戶使用產品之前，可以進行運行環境的檢測，幫你提前排雷，提高用戶體驗。


推薦閱讀：

TAG:WebRTC |