全部产品
Search
文档中心

视频直播:RTS播放最佳实践

更新时间:Jan 19, 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:
    }
  });

  // 检测浏览器是否支持
  // 对于不在视频直播 > 操作指南 > 超低延时直播 > 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, // 对于不在视频直播 > 操作指南 > 超低延时直播 > 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中使用。