基於RTS超低延時直播最佳化強互動場景體驗
RTS 在阿里雲影片直播的基礎上進行底層技術最佳化，透過整合阿里雲播放器 SDK，支援在千萬級併發場景下節點間毫秒級延時直播的能力，彌補了傳統直播存在 3~6 秒延時的問題，確保了超低延時、低卡頓、秒開流暢的直播觀看體驗。本文介紹了基於 RTS 超低延遲直播最佳化強互動場景體驗的最佳實踐方案，並以阿里雲播放器 Aliplayer 為例，詳細介紹 RTS 超低延遲拉流接入、自動降級、排障資訊獲取等邏輯的實現，助力企業打造互動直播行業的產品競爭力。
適用場景
該方案適用於對超低延遲直播有訴求的客戶，尤其是業務中存在強互動場景直播的場景。強互動場景直播主要是指對主播和觀眾存在互動，或觀眾存在更高實時性觀看、畫面互動需求的情況，常見場景例如：
- 教育直播：應用於大班課，可以支援超大數量規模的同學同時線上超低延時與老師互動教學。
- 電商直播：賣家與買家實時互動答疑，交流商品資訊，互動效率提升轉化促進交易成單。
- 體育直播：直播精彩體育、電競等賽事，讓觀眾實時瞭解現場情況，積極參與平臺彈幕、評論等互動。
- 互動娛樂：主播可以在觀眾送禮物時及時反饋，增強與觀眾之間的互動體驗。
- 會議直播：大型會議內容實時分享，讓分佈各地參會者保持同步的會議體驗，會上溝通更敏捷。
業務介紹
背景
某線上知識分享產品為核心的技術服務商，客戶期望能基於產品的原有普通直播 Paas 能力進行升級，降低終端使用者的直播延遲，提供更優質的使用者觀看體驗。推薦客戶底層接入 RTS 服務實現超低延遲的平臺直播解決方案，最終封裝後作為 Saas 產品能力提供給外部使用者付費接入使用，透過超低延遲的直播體驗打造其 SAAS 產品在市場上的核心競爭力。
本文圍繞著升級過程中客戶核心訴求進行展開。特別地，會對如何使用 RTS 解決傳統 Web 端使用 HLS 播放存在高延遲的場景進行重點介紹。
業務場景
傳統直播升級 RTS 超低延遲直播過程中，僅涉及底層對接變更，無需改造終端使用者的功能使用習慣，直播核心功能訴求主要考慮推拉流側使用者場景：
- 主播推流：無連麥場景下直接推流 / 連麥場景平臺合流後轉推流。
- 觀眾拉流：在 HTML5 頁面中直接播放內容 / 在 HTML5 頁面中參與連麥並播放內容。
當前解決方案及痛點
主要場景
推流部分透過 rtmp 直推標準直播或者 webrtc 採集後合流轉推標準直播實現；而拉流時，為了滿足使用者無需安裝app即可便捷觀看的需求，需要重點考慮移動端的瀏覽器頁面對媒體流的相容性問題，相較 FLV 和 RTMP 協議在 HTML 5 頁面中不甚理想的表現，客戶優先考慮使用 HLS 格式進行拉流。
未接入 RTS 時的核心痛點
由於 HLS 協議特性，預設 Web 端觀看直播畫面延遲在 10s 以上，儘管傳統直播中，客戶可以在直播延遲中配置 HLS 為低延遲，但此時拉流端的延遲也仍在 3-6s 左右，對存在強互動需求場景的體驗並不友好。
除 HLS 協議自身導致的高延遲痛點外，Saas 直播廠商在未接入阿里雲標準直播前，還會額外面臨以下幾個痛點：
- 自建媒體流處理服務需要研發和維護成本，需要豐富的雲上媒體處理能力，滿足在音影片處理上的需求。
- 直播觀眾分散，使用者觀看體驗受到網路最後一公里鏈路的質量影響較大，需要海量節點滿足分發需求。
- 選擇 Paas 服務時，需要其具備強大的產品 API 管理能力，以便其產品能定製業務邏輯，完成快速迭代。
當前標準直播方案架構圖
當前業務整體架構圖
RTS 接入流程詳解
標準直播升級到 RTS 過程中，主要需要改造的部分為
- 播放器：客戶在網頁端播放時，需要使用阿里雲播放器，或者透過客戶自有播放器對接 Web RTS SDK。
- 直播服務端轉碼：原始推流內容進行 RTS 轉碼模板處理，滿足播放端相容性需求。
- 播放地址生成：在業務伺服器介面生成地址時，需要構造 RTS 地址格式、推薦一併返回播放器降級地址。
接入RTS後直播方案架構圖
實施步驟
準備工作
在正式開始接入前，預設您已經在控制檯完成開通直播服務、新增推流域名和播流域名、配置CNAME、關聯推流域名和播流域名，並開通了超低延時直播功能等基礎準備工作。
在本案例的業務升級流程中，覆蓋了常見場景下的推薦步驟及功能說明，其中非必要的改造會在步驟中進行標註，可根據實際業務訴求選擇性應用。
步驟一：RTS 推流地址及播放地址構造
構造推拉流地址前，需要準備好直播流的推流域名、播流域名、AppName（應用）、StreamName（直播流）、鑑權串（如有）。以常用的RTMP推流，RTS拉流為例，基礎拼接規則如下：
推流地址：rtmp://demo.aliyundoc.com/app/stream?auth_key={鑑權串}
構造規則：推流協議：//推流域名/AppName（應用）/StreamName（直播流）? 鑑權串
拉流地址：artc://example.aliyundoc.com/app/stream?auth_key={鑑權串}
構造規則：artc://播流域名/AppName（應用）/StreamName（直播流）? 鑑權串
步驟二：RTS 服務端轉碼配置
由於原生瀏覽器對 WebRTC 的限制，在 Web 端播放 RTS 流時存在以下限制：
- 影片編碼：不支援包含 B 幀（會出現畫面跳躍）。
- 音訊編碼：不支援 AAC 編碼（會出現噪音）。
相對的，在推流時推薦使用
- 影片編碼：H.264 編碼的 baseline 級別（預設不含B幀）。
- 音訊編碼：OPUS 編碼。
如果無法控制推流內容的編碼，或者僅無法支援 OPUS 的音訊編碼直推，可以配置轉碼模板來相容。不同轉碼配置對延遲影響略有不同，可參考如下配置說明進行選擇：
- 登入
，在控制檯左側導航欄，進入域名管理頁面，選擇需要配置的播流域名，單擊域名配置。
- 單擊模版配置 > 轉碼模板配置，單擊RTS轉碼頁籤，單擊新增。
- 選擇模板型別
|
模板型別 |
使用場景 |
模板優勢 |
|
原畫模板 |
僅需要去 B 幀或 OPUS 轉碼，推流編碼不含 B 幀時僅開啟 OPUS 轉碼即可 |
原畫僅 OPUS 轉碼時延遲最優 |
|
窄帶高畫質™模板 |
同等影片質量下，最高節省 20-40%頻寬 |
節省頻寬，頻寬成本最優 |
|
標準轉碼模板 |
傳統轉碼能力，對壓縮比例和延遲無極致需求。 |
|
|
純音訊轉碼模板 |
刪除影片只輸出 OPUS 音訊流 |
自動去影片畫面 |
在當前客戶案例中，客戶優先考慮延遲因素，因此轉碼模板選擇原畫模板，僅開啟 OPUS 轉碼，減少影片處理過程中的轉碼耗時，配置示例如下。
模板配置完成後，轉碼流的播放地址需要在原播放地址的基礎上進行修改。如下圖所示，建立模板 ID 中填寫 example 時，結尾會自動補全字尾-RTS ，即此時模板ID全名為 example-RTS 。
注意：配置轉碼後，轉碼流的播放地址對應為
轉碼流地址：artc://example.aliyundoc.com/app/stream _example-RTS?auth_key={鑑權串}
構造規則：artc://播流域名/AppName（應用）/StreamName（直播流） _轉碼模板ID? 鑑權串
特別提醒：如播放域名配置鑑權，鑑權串需要針對已拼接轉碼模板ID的地址進行籤算生成。
步驟三：RTS Web播放器對接
RTS超低延時直播以WebRTC信令互動方式為基礎，需要 HTML5 播放器播放時完成信令互動及媒體資訊的編解碼，RTS拉流播放時有三種選擇：
- 整合阿里雲播放器SDK（推薦），建議使用V2.9.23及以上版本，接入週期最短。
- 其他播放器整合Web RTS SDK作為外掛，適用於強依賴其他播放器的場景。
- 客戶自研播放器對接開放信令標準，需要具備WebRTC基礎的開發人員接入。
當前案例中，客戶使用阿里雲播放器 Aliplayer 完成 RTS 拉流接入、拉流自動降級、排障資訊獲取等邏輯的實現。阿里雲播放器已經整合了 Web RTS SDK，可以直接用於播放 RTS 流，並且內建了 RTS 自動降級邏輯，只需要提供一個降級地址即可使用，能夠實現快速業務上線。
當使用者播放時使用的瀏覽器不支援 WebRTC ，或者使用者端透過 RTS 拉流失敗時，為了保證業務的可用性，播放頁面可以選擇降級至 HLS、FLV 播放，目前主要支援的降級場景包括：
- 瀏覽器不支援 WebRTC 或 H.264。
- 信令請求失敗（拉流地址無效、HTTPS配置無效、RTS配置無效等原因）。
- 起播超時或中途斷流。
以下為阿里雲播放器 Aliplayer 示例程式碼，實現了基礎播放的邏輯（含降級），示例程式碼中的關鍵欄位說明：
- source：指定RTS播放地址（填寫步驟二生成的即可）。
- rtsFallbackSource：指定降級地址，如HLS拉流地址。
-
skipRtsSupportCheck：是否跳過客戶端瀏覽器版本相容檢查，推薦保持false即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge" >
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
<title>Aliplayer Rts Demo</title>
<link rel="stylesheet" href="
<script type="text/javascript" charset="utf-8" src="
</head>
<body>
<div class="prism-player" id="player-con"></div>
<script>
/**
* 播放器預設播放 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, // 對於不在 https://help.aliyun.com/document_detail/397569.html 中的瀏覽器，可以傳 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) {
console.log('[EVENT]rtsFallback', event.paramData);
// event.paramData.reason 降級的原因
// event.paramData.fallbackUrl 降級到的地址
})
player.on('error', function(event) {
console.log('[EVENT]error', event.paramData);
})
</script>
</body>
步驟四：低延遲推流配置
透過 RTMP 協議推流時，需要控制推流資料的關鍵幀間隔（GOP），GOP值越大，拉流延遲越高，推薦 GOP 設定為 1s。
以 OBS 軟體推流為例，需要在推流軟體的輸出設定中，設定以下影片編碼引數值。
- 輸出模式：高階
- 關鍵幀間隔（秒，0=自動）：1
- CPU 使用預設（高=較少的CPU佔用）：veryfast
- 配置（Profile）：baseline （去除B幀）
- 微調（Tune）：zerolatency
輸出引數配置完成後，推流地址正確填寫即可開始推流。
- 服務：選擇自定義。
- 伺服器：輸入已經生成的鑑權推流地址，例如：rtmp://demo.aliyundoc.com/app/stream?auth_key=1543302081-0-0-9c6e7c8190c10bdfb3c0************。
- 串流金鑰：串流金鑰為空。
步驟五：頁面播放測試及延遲觀測
完成推流和播放器對接後，可以在頁面播放器中手動輸入播放地址，或從業務後端介面獲取 RTS 播放地址進行播放。
延遲效果演示
步驟六：H5 頁面播放時獲取 TraceID
在傳統直播中遇到延遲高、卡頓或其他問題需要提交售後排障工單時，往往需要使用者協助採集多種客戶端資訊，排障效率較低，而在 RTS 接入直播時，我們只需捕獲信令互動階段中的traceid資訊，即可提供給工程師結合問題現象進行問題分析。
該步驟為可選步驟，為了線上業務在排障場景中的便捷性和資訊精準度，推薦作為接入改造步驟之一。以阿里雲播放器 Aliplayer / 其他播放器整合 RTS SDK 接入兩種場景為例，提供了排障資訊 TraceID 的獲取 Demo。
1.透過阿里雲播放器 Aliplayer 播放
需要透過 player._rts.traceid 主動獲取，使用者可以在出現卡頓時選擇上報資訊。
示例程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge" >
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
<title>Aliplayer Online Settings</title>
<link rel="stylesheet" href="
<script type="text/javascript" charset="utf-8" src="
</head>
<body>
<div class="prism-player" id="player-con"></div>
<button id="trace">獲取TraceId</button>
<script>
var btn = document.getElementById('trace');
var player = new Aliplayer({
"id": "player-con",
"source": "RTS拉流地址",
"width": "100%",
"height": "500px",
"autoplay": true,
}, function (player) {
console.log("The player is created");
}
);
btn.addEventListener('click', function() {
// 獲取 traceId，請使用 aliplayer 2.9.22 及以上版本
var traceId = player._rts.traceid;
console.log('traceId', traceId)
})
</script>
</body>
2.透過其他播放器整合RTS SDK接入
RTS SDK 可以透過註冊 customReporter 函式獲取所有訊息，當 msgid 為126即訂閱成功時，可以獲取 TraceID 。
示例程式碼：
AliRTS.createClient({
customReporter: (params) => {
const msgIds = [126/* 訂閱成功 */, 220/* 推流成功 */];
if (msgIds.includes(Number(params.msgid))) {
const args = JSON.parse(params.args);
const traceId = args.tcid;
console.log('traceId', traceId);
}
}
})
RTS超低延遲直播方案優勢
優勢一：自助接入便捷
無論直接接入阿里雲 RTS ，或是基於阿里雲標準直播升級為 RTS ，技術對接流程均支援自助化的極簡操作，1周可完成業務的接入到上線。
優勢二：超低延遲的多平臺支援
端到端延時從10秒以上降低至百毫秒，且支援大部分主流平臺播放。
Native端：相容 iOS、Andriod、Mac、Windows 平臺。
Web端：終端相容率大於94%，開放 WebRTC 信令自研接入規範。
優勢三：抗弱網能力
從 TCP 協議升級至 UDP 協議，疊加媒體特性，消除視窗阻塞和延時應答，並獲得更強的抗卡頓能力，在丟包30%的情況下可以流暢播放。
優勢四：提供高可用、靈活降級方案
服務端具備完善的推拉流全鏈路監控及告警能力，客戶端支援 RTS 拉流失敗或個別瀏覽器無法相容時自動降級，從客戶端和服務端雙重對業務高可用性進行保障。
優勢五：海量節點提供高併發支援
超低延時直播複用 CDN 節點架構，透過全球2800+節點提供服務。經過實踐檢驗的千萬級高併發影片雲直播技術，有效提升私域流量的商業轉化。
優勢六：強大轉碼能力
直播服務端轉碼配置極簡，觸發便捷，滿足對多位元速率、不同解析度、不同編碼的使用者需求。阿里雲獨有的窄帶高畫質™ 特性，保證畫質的同時降低位元速率，整體上幫助使用者降低成本，同等影片質量下最高可節省20%~40%頻寬。
優勢七：豐富API可對接管理
提供 137 個豐富靈活的API介面支援，滿足業務全面訴求。客戶支援 StreamID 流維度用量統計，結合 RTS 及普通直播的域名用量統計，可以精確統計各流的用量資料，便於使用者統計下行業務具體用量。
常見問題
如何解決部分安卓手機QQ瀏覽器無法推拉流？
部分安卓手機（如 vivo iQOO）安裝QQ瀏覽器後首次開啟可能無法拉起X5核心，導致WebRTC相容問題推拉流失敗（報錯：Failed to execute 'setRemoteDescription' on 'RTCPeerConnection’）。如果遇到該場景請按照以下操作確保X5核心初始化：
- 連線WIFI網路。
- 重新整理當前頁面並等待大約30秒。
- 重啟瀏覽器，再次訪問頁面即可恢復正常。
為什麼部分瀏覽器不支援Web RTS SDK？
對於Web RTS SDK暫不支援的瀏覽器，主要有以下原因：
- 瀏覽器未實現WebRTC相關API，或實現有缺陷（如IE瀏覽器、UC瀏覽器）。
-
瀏覽器支援WebRTC API，但不支援H.264編碼，僅支援VP8（如部分安卓手機系統自帶瀏覽器）。
更多邊緣雲產品資訊歡迎關注公眾號【阿里雲 Edge Plus】
來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/70018969/viewspace-2909283/，如需轉載，請註明出處，否則將追究法律責任。
相關文章
- 演變：機器學習和基於 Web 的體驗 ，快速、實時和完全互動機器學習Web
- 超低延遲傳輸網路架構在元宇宙場景的應用架構元宇宙
- 基於聲網 Flutter SDK 實現互動直播Flutter
- 小米 A/B 實驗場景基於 Apache Doris 的查詢提速最佳化實踐Apache
- Handler的三種互動場景
- 5G機遇 | 如何解決在核心場景的高併發、超低延遲需求？
- Jan Ozer：高畫質直播互動場景下的硬編碼如何選型？
- 基於Flink構建全場景實時數倉
- 桌面互動投影的使用場景有哪些？
- B站直播間基於檢視互動的架構演進架構
- 短影片app原始碼，藉助輪詢最佳化互動體驗APP原始碼
- 基於REDIS實現延時任務Redis
- 基於場景的設計方法
- 直播軟體搭建中如何把延時率降到最低
- 基於Web實現遠端與硬體互動Web
- 互動遊戲團隊如何將效能體驗最佳化做到TOP級別遊戲
- 皇室戰爭核心體驗：快節奏的RTS
- 直播教學系統原始碼搭建定製影片直播功能完善低延時負載強原始碼負載
- Curve 基於 Raft 的寫時延優化Raft優化
- 基於Redis的簡易延時佇列Redis佇列
- 雙十一雲起實驗室體驗專場，七大場景，體驗有禮
- 低延遲流式語音識別技術在人機語音互動場景中的實踐
- 騰訊雲助力韓國遊戲巨頭Nexon搭建虛擬世界平臺,支援300ms以內超低延時音影片互動遊戲虛擬世界
- Refresh Token的使用場景以及如何與JWT互動JWT
- Java Agent場景效能測試分析最佳化經驗分享Java
- 將渲染計算搬到雲端，開啟低成本、強互動、沉浸式體驗
- 基於 ResponderChain 的物件互動方式AI物件
- 基於ResponderChain的物件互動方式AI物件
- 快手基於 Flink 構建實時數倉場景化實踐
- 基於滑動場景解析RecyclerView的回收複用機制原理View
- 真人大屏互動系統，打造數字互動新體驗!
- 基於數值最佳化的自動駕駛實時運動規劃自動駕駛
- 基於多種場景DataGuard切換方案
- 社交場景下iOS訊息流互動層實踐iOS
- [ARKit]2-蘋果官方AR場景互動Demo解讀蘋果
- RAG新突破：塊狀注意力機制實現超低延遲檢索增強
- 低延時音影片技術在OPPO雲渲染場景的應用
- 多人沉浸式音樂互動，3DCAT實時雲渲染新業務場景來襲3D