如果瀏覽器不支援WebRTC或者RTS拉流失敗時,您可以選擇降級至HLS、FLV播放。本文為您介紹使用客戶自研播放器整合Web RTS SDK和直接使用阿里雲播放器Aliplayer兩種情境的降級播放。
概述
使用RTS播放可以考慮降級處理的情境包括以下情況:
瀏覽器不支援WebRTC或H.264。
說明Web RTS SDK依賴瀏覽器對WebRTC技術的支援,對市面上常見瀏覽器進行了相容性測試,支援情況詳見瀏覽器要求。通過Web RTS SDK提供的
isSupport
函數,可以檢查當前瀏覽器環境是否滿足要求。如果您的目標瀏覽器確定支援WebRTC但又不在上述列表中,您可以充分測試後針對這些瀏覽器選擇跳過isSupport
檢查直接進行拉流。信令請求失敗(拉流地址無效、HTTPS配置無效、RTS配置無效等原因)。
起播逾時或中途斷流。
下文分別介紹使用自研播放器整合Web RTS SDK和直接使用阿里雲播放器Aliplayer如何處理上述三種情況的降級。
情境一:使用自研播放器整合RTS
說明
需要Web RTS SDK為V2.5.1及以上版本,請參見發布日誌。
該樣本為精簡後的代碼,為方便開發人員使用,您可以下載RTS降級完整範例程式碼。
/**
* 可以降級的情況:
* 1. 瀏覽器不支援,在 isSupport().catch 中處理
* 2. 建連過程、播放中出現<重連失敗>錯誤,在 onError 事件監聽10410錯誤碼
**/
var pullStreamUrl = 'RTS拉流地址';
var fallbackUrl = '降級拉流地址,如HLS';
// 初始化 SDK
var aliRts = AliRTS.createClient();
aliRts.on('onError', (error) => {
console.log(error.errorCode, error.message); // 錯誤碼、錯誤資訊
// 降級判斷
switch(error.errorCode){
case 10410: // 拉流(訂閱)重連徹底失敗
fallback(); // 降級
break;
default:
}
});
// 檢測瀏覽器是否支援
// 對於不在ApsaraVideo for Live > 操作指南 > 超低延時直播 > Web RTS SDK > Web RTS拉流SDK > 其他播放器整合Web RTS SDK > SDK簡介 章節中的瀏覽器,可以選擇跳過 isSupport 檢查,直接執行 subscribeRts 拉流(有風險,需要自測保證)
aliRts.isSupport({ isReceiveVideo: true }).then(subscribeRts).catch(fallback)
function subscribeRts() {
aliRts.subscribe(pullStreamUrl, {
// mediaTimeout: 6000 // 自訂逾時事件的觸發時間
// retryTimes: 5, // 自訂重連次數 預設5
// retryInterval: 2000,// 自訂重連間隔 預設2000ms
}).then((remoteStream) => {
remoteStream.play(mediaElement);
}).catch(() => {})
}
// 降級至其他協議播放
function fallback() {
// 此處為樣本,可以根據您選擇的降級 url 選擇合適的播放器
hlsPlayer.play(fallbackUrl)
}
情境二:使用阿里雲播放器Aliplayer整合RTS
阿里雲播放器Aliplayer整合了Web RTS SDK,可以用於播放RTS流,並且內建了RTS自動降級邏輯,您只需要提供一個降級地址即可使用。
說明
需要Aliplayer為V2.9.23及以上版本,請參見Web播放器SDK。
該樣本為精簡後的代碼,為方便開發人員使用,您可以下載Aliplayer自動降級完整範例程式碼
/**
* 播放器預設播放 source 提供的 rts 拉流地址,如果失敗,則會自動降級至 rtsFallbackSource 提供的拉流地址(如 HLS 地址)。
* 可能的降級情境包括:
* 1. 瀏覽器不支援 RTS,直接降級
* 2. RTS 信令請求失敗(拉流地址無效、HTTPS配置無效、RTS配置無效等),直接降級
* 3. RTS 起播逾時或中途斷流,按自訂策略重試失敗後降級
**/
var options = {
"id": "player-con",
"source": "RTS播放地址",
"rtsFallbackSource": "降級地址,如HLS",
"width": "100%",
"height": "500px",
"autoplay": true,
"isLive": true,
"playsinline": true,
"skipRtsSupportCheck": false, // 對於不在ApsaraVideo for Live > 操作指南 > 超低延時直播 > Web RTS SDK > Web RTS拉流SDK > 其他播放器整合Web RTS SDK > SDK簡介 章節中的瀏覽器,可以傳 true 跳過檢查,強制使用 RTS(有風險,需要自測保證)
/**
* RTS 拉流逾時會預設重試
* 以下兩個參數用來控制降級之前的重試策略,比如 3000 毫秒逾時,重試一次,如果再拉不到流就降級,那麼總共等待 6000 毫秒降級
**/
// RTS 多久拉不到流會重試,預設 3000 ms
// rtsLoadDataTimeout: 2000,
// RTS 拉不到流重試的次數,預設 5,此參數建議設為 1,即重試 1 次後降級,可以減少降級等待時間
liveRetry: 1,
};
var player = new Aliplayer(options, function () {/* player ready */});
// 降級時會觸發此事件
player.on('rtsFallback', function(event) {
// event.paramData.reason 降級的原因
// event.paramData.fallbackUrl 降級到的地址
})
微信小程式可以使用Web RTS SDK嗎?
由於微信小程式無法解析RTS信令協議,所以Web RTS SDK無法在原生微信小程式中使用,但是可以將包含SDK的網頁嵌入到小程式Webview中使用。