全部產品
Search
文件中心

ApsaraVideo Live:RTS播放最佳實務

更新時間:Jun 30, 2024

如果瀏覽器不支援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

說明
 /**
   * 可以降級的情況:
   * 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自動降級邏輯,您只需要提供一個降級地址即可使用。

說明

  /**
   * 播放器預設播放 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中使用。