小記
一次偶然的邂逅,讓我知道了TRTC實時音視訊這個神奇的東西,于是便開始研究起來這個鬼東西,接下來将詳細記錄一下開發過程,以便後期使用.
正文
實時音視訊（TRTC）
是騰訊雲提供的一套低延時、高品質的音視訊通訊服務，緻力于為騰訊雲客戶提供穩定、可靠和低成本的音視訊傳輸能力。您可以使用該服務快速建構“視訊通話”、“線上教育”、“直播連麥”、“線上會議”等對通信延時要求比較苛刻的音視訊應用。
如和使用
- 注冊騰訊雲賬号
- 登入實時音視訊控制台，選擇 開發輔助 > 快速跑通Demo。
- 單擊 建立應用 輸入應用名稱，例如 TEST；若您已建立應用可單擊 選擇已有應用。
新知實驗室TRTC初體驗小記正文運作效果展示代碼分析測試回報及問題解決總結 - 檢視應用
新知實驗室TRTC初體驗小記正文運作效果展示代碼分析測試回報及問題解決總結 - 下載下傳 Web 端 SDK 及配套的 Demo 源碼。
這裡有一個坑點需要注意
為啥我沒有用uniapp 而是選擇web 的呢 ?
首先如果選擇uniapp 或者小程式的話需要你自己注冊一個企業版的小程式賬号 ,并開通音視訊相關的外部接口, 然而我并沒有.是以我無奈的選擇了web 的sdk進行開發,進一步感受絲滑 ,哈哈哈
新知實驗室TRTC初體驗小記正文運作效果展示代碼分析測試回報及問題解決總結
- 擷取 SDKAppId 和 密鑰（SecretKey) ,這兩個值相當于使用者的token ,識别使用者用的 ,在調用sdk 的時候 需要給個輸入框讓其輸入 ,
- 接下來就是運作項目了 比較簡單
- 在這裡輸入 appid和秘鑰進入房間就可以了 .
新知實驗室TRTC初體驗小記正文運作效果展示代碼分析測試回報及問題解決總結
運作效果展示
還是棒棒的哦!!!
代碼分析
1.複制可使用連結
通過switchCase 來進行分流管理
switch (this.label) {
case 'userId': {
const userId = getUrlParam('userId');
this.infoValue = userId ? userId : `user_${parseInt(Math.random() * 100000000, 10)}`;
break;
}
case 'roomId': {
const roomId = getUrlParam('roomId');
this.type = 'number';
this.infoValue = roomId ? roomId : parseInt(Math.random() * 100000, 10);
break;
}
case 'sdkAppId': {
const sdkAppId = getUrlParam('sdkAppId');
this.type = 'number';
this.infoValue = sdkAppId ? sdkAppId : '';
break;
}
case 'secretKey': {
const secretKey = getUrlParam('secretKey');
this.infoValue = secretKey ? secretKey : '';
break;
}
default:
break;
}
将傳過來的參數通過
getUrlParam
方法快速生成分享連結
2. 擷取使用者簽名
<!-- rtc 房間 -->
<comp-room
:sdkAppId="Number(sdkAppId)"
:secretKey="secretKey"
:userId="userId"
:roomId="Number(roomId)"
:cameraId="cameraId"
:microphoneId="microphoneId"></comp-room>
調用元件,将相關參數傳入
元件内通過
new LibGenerateTestUserSig(sdkAppId, secretKey, 604800);
将
sdkAppid
,
secretKey
,
有效時間
傳入到封裝好的方法中, 這個封裝的方法官網提供,直接使用便可
同時
new LibGenerateTestUserSig
調用之後會傳回一個函數 , 我們通過函數中的
genTestUserSig
來擷取使用者的簽名,代碼如下
const { sdkAppId, secretKey, roomId } = this;
const inviteUserId = `user_${parseInt(Math.random() * 100000000, 10)}`;
const userSigGenerator = new LibGenerateTestUserSig(sdkAppId, secretKey, 604800);
const inviteUserSig = userSigGenerator.genTestUserSig(inviteUserId);
ok! , 關鍵代碼就是這些
測試回報及問題解決
1.推拉流問題
Web 端 SDK 日志中報錯 NotFoundError、NotAllowedError、NotReadableError、OverConstrainedError 以及 AbortError 分别是什麼意思？
| 錯誤名 | 描述 | 處理建議 |
|---|---|---|
| NotFoundError | 找不到滿足請求參數的媒體類型（包括音頻、視訊、螢幕分享）。 例如：PC 沒有攝像頭，但是請求浏覽器擷取視訊流，則會報此錯誤。 | 建議在通話開始前引導使用者檢查通話所需的攝像頭或麥克風等裝置，若沒有攝像頭且需要進行語音通話，可在 TRTC.createStream({ audio: true, video: false }) 指明僅采集麥克風。 |
| NotAllowedError | 使用者拒絕了目前的浏覽器執行個體的通路音頻、視訊、螢幕分享請求。 | 提示使用者不授權攝像頭/麥克風通路将無法進行音視訊通話。 |
| NotReadableError | 使用者已授權使用相應的裝置，但由于作業系統上某個硬體、浏覽器或者網頁層面發生的錯誤導緻裝置無法被通路。 | 根據浏覽器的報錯資訊處理，并提示使用者“暫時無法通路攝像頭/麥克風，請確定目前沒有其他應用請求通路攝像頭/麥克風，并重試”。 |
| OverConstrainedError | cameraId/microphoneId 參數的值無效。 | 確定 cameraId/microphoneId 傳值正确且有效。 |
| AbortError | 由于某些未知原因導緻裝置無法被使用。 |
2.播放問題
音視訊互通過程中出現有畫面沒有聲音問題？
因浏覽器自動播放政策限制，音頻播放會出現 PLAY_NOT_ALLOWED 異常，此時業務層需要引 導使用者手動操作 Stream.resume() 來恢複音頻播放，自動播放受限處理建議 。
未知異常導緻，請通過監控儀表盤查詢收發兩端的 audioLevel & audioEnergy。
運作 Web 端 SDK 時，出現錯誤：“RtcError: no valid ice candidate found”該如何處理？
出現該錯誤說明 TRTC Web SDK 在建立媒體傳輸通道時失敗，請檢查防火牆配置。
總結
對接起來還是有一定的難度, 自定義開發的話,缺少必要的文檔, 需要自己多查查相關文獻,
針對線上會議,或者多人會議的情況,有是會出現
NotReadableError
錯誤 , 不過疫情當下,能夠推出這個sdk還是很牛的 ,希望後期官方可以完善一下api文檔,