這樣的情況,基於 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。在使用者使用產品之前,可以進行執行環境的檢測,幫你提前排雷,提高使用者體驗。