关于视频直播:基于RTS超低延时直播优化强互动场景体验

26次阅读

共计 8078 个字符，预计需要花费 21 分钟才能阅读完成。

RTS 在阿里云视频直播的根底上进行底层技术优化，通过集成阿里云播放器 SDK，反对在千万级并发场景下节点间毫秒级延时直播的能力，补救了传统直播存在 3~6 秒延时的问题，确保了超低延时、低卡顿、秒开晦涩的直播观看体验。本文介绍了基于 RTS 超低提早直播优化强互动场景体验的最佳实际计划，并以阿里云播放器 Aliplayer 为例，具体介绍 RTS 超低提早拉流接入、主动降级、排障信息获取等逻辑的实现，助力企业打造互动直播行业的产品竞争力。

实用场景

该计划实用于对超低提早直播有诉求的客户，尤其是业务中存在强互动场景直播的场景。强互动场景直播次要是指对主播和观众存在互动，或观众存在更高实时性观看、画面互动需要的状况，常见场景例如：

  • 教育直播：利用于大班课，能够反对超大数量规模的同学同时在线超低延时与老师互动教学。
  • 电商直播：卖家与买家实时互动答疑，交换商品信息，互动效率晋升转化促成交易成单。
  • 体育直播：直播精彩体育、电竞等赛事，让观众实时理解现场状况，积极参与平台弹幕、评论等互动。
  • 互动娱乐：主播能够在观众送礼物时及时反馈，加强与观众之间的互动体验。
  • 会议直播：大型会议内容实时分享，让散布各地参会者放弃同步的会议体验，会上沟通更麻利。

业务介绍

背景

某在线常识分享产品为外围的技术服务商，客户冀望能基于产品的原有一般直播 Paas 能力进行降级，升高终端用户的直播提早，提供更优质的用户观看体验。举荐客户底层接入 RTS 服务实现超低提早的平台直播解决方案，最终封装后作为 Saas 产品能力提供给内部用户付费接入应用，通过超低提早的直播体验打造其 SAAS 产品在市场上的外围竞争力。

本文围绕着降级过程中客户外围诉求进行开展。特地地，会对如何应用 RTS 解决传统 Web 端应用 HLS 播放存在高提早的场景进行重点介绍。

业务场景

传统直播降级 RTS 超低提早直播过程中，仅波及底层对接变更，无需革新终端用户的性能应用习惯，直播外围性能诉求次要思考推拉流侧用户场景：

  1. 主播推流：无连麦场景下间接推流 / 连麦场景平台合流后转推流。
  2. 观众拉流：在 HTML5 页面中间接播放内容 / 在 HTML5 页面中参加连麦并播放内容。

以后解决方案及痛点

次要场景

推流局部通过 rtmp 直推规范直播或者 webrtc 采集后合流转推规范直播实现；而拉流时，为了满足用户无需装置 app 即可便捷观看的需要，须要重点思考挪动端的浏览器页面对媒体流的兼容性问题，相较 FLV 和 RTMP 协定在 HTML 5 页面中不甚现实的体现，客户优先思考应用 HLS 格局进行拉流。

未接入 RTS 时的外围痛点

因为 HLS 协定个性，默认 Web 端观看直播画面提早在 10s 以上，只管传统直播中，客户能够在直播提早中配置 HLS 为低提早，但此时拉流端的提早也仍在 3-6s 左右，对存在强互动需要场景的体验并不敌对。

除 HLS 协定本身导致的高提早痛点外，Saas 直播厂商在未接入阿里云规范直播前，还会额定面临以下几个痛点：

  • 自建媒体流解决服务须要研发和保护老本，须要丰盛的云上媒体解决能力，满足在音视频解决上的需要。
  • 直播观众扩散，用户观看体验受到网络最初一公里链路的品质影响较大，须要海量节点满足散发需要。
  • 抉择 Paas 服务时，须要其具备弱小的产品 API 治理能力，以便其产品能定制业务逻辑，实现疾速迭代。

以后规范直播计划架构图

以后业务整体架构图

RTS 接入流程详解

规范直播降级到 RTS 过程中，次要须要革新的局部为

  1. 播放器：客户在网页端播放时，须要应用阿里云播放器，或者通过客户自有播放器对接 Web RTS SDK。
  2. 直播服务端转码：原始推流内容进行 RTS 转码模板解决，满足播放端兼容性需要。
  3. 播放地址生成：在业务服务器接口生成地址时，须要结构 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 的音频编码直推，能够配置转码模板来兼容。不同转码配置对提早影响略有不同，可参考如下配置阐明进行抉择：

  1. 登录视频直播控制台，在控制台左侧导航栏，进入域名治理页面，抉择须要配置的播流域名，单击域名配置。
  2. 单击模版配置 > 转码模板配置，单击 RTS 转码页签，单击增加。
  3. 抉择模板类型
模板类型 应用场景 模板劣势
原画模板 仅须要去 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 拉流播放时有三种抉择：

  1. 集成阿里云播放器 SDK（举荐），倡议应用 V2.9.23 及以上版本，接入周期最短。
  2. 其余播放器集成 Web RTS SDK 作为插件，实用于强依赖其余播放器的场景。
  3. 客户自研播放器对接凋谢信令规范，须要具备 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="https://g.alicdn.com/de/prismplayer/2.9.23/skins/default/aliplayer-min.css" />
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.9.23/aliplayer-min.js"></script>
</head>
<body>
  <div class="prism-player" id="player-con"></div>
<script>
  /**
   * 播放器默认播放 source 提供的 rts 拉流地址，如果失败，则会主动降级至 rtsFallbackSource 提供的拉流地址（如 HLS 地址）。* 可能的降级场景包含：* 1. 浏览器不反对 RTS，间接降级
   * 2. RTS 信令申请失败（拉流地址有效、https 配置有效、RTS 配置有效等），间接降级
   * 3. RTS 起播超时或中途断流，按自定义策略重试失败后降级
   **/
  // 更多播放器配置请参考 https://player.alicdn.com/aliplayer/index.html
  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 播放地址进行播放。

提早成果演示

https://v.youku.com/v_show/id…

步骤六：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="https://g.alicdn.com/de/prismplayer/2.9.23/skins/default/aliplayer-min.css" />
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.9.23/aliplayer-min.js"></script>
</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（如局部安卓手机零碎自带浏览器）。

正文完
视频直播
发表至： 视频直播
2022-08-08
 0
关于视频直播:融云全球社交泛娱乐洞察视频社交为什么好赚钱难出圈
关于视频直播:视频直播源码技术知识分享连麦功能
关于视频直播:保利威荣获年度最佳直播服务商引领视频直播行业创新发展
关于视频直播:麒麟操作系统-kylinos-从入门到精通-影音娱乐-第七篇-通过PKS听音乐看视频