You need to enable JavaScript to run this app.
文档中心
视频直播

视频直播

复制全文
下载 pdf
最佳实践
Web 拉流 SDK 低延时 FLV 直播方案:将延迟降至 2-3 秒
复制全文
下载 pdf
Web 拉流 SDK 低延时 FLV 直播方案:将延迟降至 2-3 秒

传统的 HTTP-FLV 直播方案(即 FLV 协议拉流)延迟通常在 5 秒左右,这会影响观众的实时互动体验,让观众慢一步看到精彩瞬间。为了解决这一问题,视频直播 Web 拉流 SDK 提供了低延时 FLV 直播方案。该方案能将直播延迟降至 2-3 秒,并支持 3-5 档码率动态切换,在保障低延迟的同时,有效降低弱网环境下的卡顿率。本文将引导您快速接入该方案,为您的观众带来更低延迟和流畅的实时观看体验。

适用场景

如果您正在构建以下对实时性要求较高的直播场景,本方案将是您的理想选择:

  • 赛事直播:如足球、电竞等大型竞技赛事,让观众与现场同步。
  • 企业发布会:如媒体报道、新品发布等,确保信息第一时间触达。
  • 大型晚会:如跨年晚会、企业年会,营造身临其境的沉浸感。
  • 泛娱乐直播:满足各类互动性强的 Web 直播播放需求。

方案优势

接入本方案后,您的直播应用将获得以下核心优势:

  • 超低延迟,延迟低至 2-3 秒:通过优化 GOP 缓存策略、采用帧推送、零缓冲传输和播放器动态追帧技术,将直播延迟从 5 秒左右显著降低。
  • 弱网抗卡顿,卡顿率降低 30% 以上:方案内置自适应码率(ABR)技术,支持 3-5 档码率动态切换。播放器会根据观众的网络状况自动升降档位,在网络不佳时切换至低码率保障流畅,网络恢复后则切回高码率保障画质。

核心原理:为什么您的直播会有延迟?

要了解本方案是如何将延迟降至 2 秒的,首先需要了解直播延迟是如何产生的。其中,主播端推流和内容分发链路的耗时相对固定,而 CDN 节点缓存和播放端缓冲是造成延迟、且可被优化的两个关键瓶颈。

  1. 主播端推流:指视频从采集、编码、封装到推送到 CDN 节点的过程。此环节的延迟受设备性能、上行网络和 GOP(关键帧间隔)大小等影响,通常占比较低,优化空间有限。
  2. 内容分发链路:指视频流通过 CDN 全球节点进行传输的路径。尽管视频直播 CDN 采用“收到即转”的策略,但数据在网络中每经过一个节点(一跳),仍会产生约 100 毫秒的传输延迟。
  3. CDN 节点缓存(延迟关键瓶颈):为保障观众快速启播和流畅的观看体验,CDN 节点会缓存一段时间的视频内容(通常是一个或多个 GOP)。当观众请求播放时,CDN 会从缓存的最近一个关键帧(I 帧)开始传输数据。这段缓存时长会作为基础延迟,直接累加到观众最终感知的总延迟中。
  4. 播放端缓冲(延迟关键瓶颈):为应对观众端网络波动、避免频繁卡顿,播放器会预先加载并维持一个安全缓冲区(Buffer)。这个缓冲区的大小直接影响了观众看到的画面与直播现场的实时差距。

核心功能

直播平均延迟降至 2 秒,让观众与现场同步

传统的 HTTP-FLV 直播方案延迟通常在 5 秒左右,低延时 FLV 直播方案通过优化 GOP 缓存策略和播放器缓冲技术,成功解决了延迟的两大瓶颈,将直播延迟降至 2-3 秒,让观众几乎与现场实时同步,无论是体育赛事的进球瞬间,还是带货直播的限时秒杀,都能第一时间参与互动。

  • 更快的启播速度:优化了 CDN 节点的 GOP 缓存策略,让观众点击播放后能更快地加载到视频画面。
  • 持续的低延迟状态:为播放器引入了动态缓冲调整和倍速追帧机制。即使在播放过程中,也能动态调整缓冲区大小,始终将观众的画面保持在低延迟状态。

ABR 技术:智能切换档位,平衡流畅度与画质

在低延迟场景下,观众的网络波动容易引发视频卡顿。为解决这一问题,视频直播提供 ABR 技术。该技术可以在保障低延迟的同时,根据观众的网络状况自动平衡播放的流畅度与画质。

您可以配置 3-5 个不同清晰度的档位(如超清、高清、标清)。播放器会实时监测观众的网络状况,并自动在这些档位间无缝切换。

  • 当观众网络不佳时:自动切换至低码率档位,牺牲部分画质以保障播放流畅。
  • 当观众网络恢复时:自动切回高码率档位,以呈现更好的画质。

整个切换过程不仅能将弱网环境下的卡顿率降低 30% 以上,还能始终保持 2-3 秒的低延迟,为您的观众同时提供流畅、高清的观看体验。

无需发版,动态优化线上播放效果

除了预设的标准配置,如果您希望根据线上实际的播放效果进一步优化观看体验,可以随时联系视频直播技术支持为您调整播放策略。整个过程无需您修改代码或更新版本,让您可以快速、灵活地响应业务变化。

您可以动态调整的关键维度包括:

  • 低延迟模式:根据直播内容的重要性(如关键赛事、互动直播),按需开启或关闭低延迟模式。
  • 缓存策略:精细化调整缓存策略,在直播延迟与播放流畅度之间找到最适合您业务的平衡点。
  • 码率切换灵敏度:根据您的业务场景,灵活调整画质与流畅度的平衡策略。通过动态调整该策略,您可以根据不同直播场景,在复杂的网络环境下为观众提供良好的观看体验。
    • 优先保障流畅:在互动性强的直播中,可配置播放器在网络波动时快速降档,最大限度减少卡顿,确保互动体验。
    • 优先保障画质:在画质要求高的直播中,可配置播放器尽可能保持高码率播放,呈现更好的视觉效果。

动态配置让您的播放策略能够快速响应线上变化,在延迟控制、流畅度等关键指标上实现动态优化,从而为观众提供更稳定、更优质的直播观看体验。

计费说明

使用本方案会涉及以下费用:

  • SDK 高级版 License 费用:FLV 低延时和 ABR 功能均为高级版 License 功能。详见直播 SDK 计费。
  • 转码费用:使用 ABR 功能需要对源流进行多档位转码,此过程会产生转码费用。详见转码计费。

前提条件
  • 确保已在同一域名空间下,添加推流域名和拉流域名。详见添加域名。
  • 如果您使用 OBS 推流,建议采用以下关键配置,以实现良好的低延时效果。其中,关键帧间隔(GOP)建议设置为 1-2 秒,下图以 1 秒为例。
    Image

接入步骤

步骤一:在控制台添加转码配置

为实现 ABR 功能,需要在控制台为源流配置多档位转码。

  1. 登录视频直播控制台。
  2. 左侧导航栏选择功能配置,默认进入功能配置页面的转码配置页签。
  3. 在域名空间的下拉列表中选择域名空间,并单击添加配置。
  4. 在弹出的对话框中:
    1. 填写与推流地址一致的 AppName。例如推流地址为 rtmp://push.example.com/live/test?authinfo,则 AppName 为 live。
    2. 为超清、高清、标清和流畅档位添加转码配置,并设置易于识别的后缀,如 uhd、hd、sd、ld。
      其余配置可保持默认,详见转码配置。
      Image
  5. 联系视频直播技术支持,将您的转码流设置为 I 帧对齐,从而保证播放器在不同档位间的无缝切换。

说明

新增转码配置后,约有 3-5 分钟的生效延迟。请在延迟结束后重新推流,以确保新的配置生效。

步骤二:获取不同档位的 FLV 拉流地址

完成转码配置后,您需要为每个档位生成一个专属的 FLV 拉流地址。

  • 功能调试阶段:使用地址生成器生成拉流地址。
    • 地址类型: 选择拉流地址。
    • 选择域名: 选择添加转码配置时使用的域名空间下的拉流域名。
    • AppName 和 StreamName:填写与推流地址一致的 AppName 和 StreamName。例如推流地址为 rtmp://push.example.com/live/test?authinfo,则 AppName 为 live,StreamName 为 test。
      在转码流后缀下拉列表中,依次选择步骤一:在控制台添加转码配置中配置的后缀 uhd、hd、sd 和 ld,每次选择后复制生成的 FLV 拉流地址。重复此操作,直到获取所有档位的地址。
      Image
  • 功能正式上线:调用 GeneratePlayURL 或使用服务端 SDK 动态生成拉流地址。

示例

下表列出了不同档位的 FLV 拉流地址及对应码率的示例值。

档位FLV 拉流地址码率(kbps)
超清(UHD)https://pull.example.com/live/123456_uhd.flv3200
高清(HD)https://pull.example.com/live/123456_hd.flv2048
标清(SD)https://pull.example.com/live/123456_sd.flv1638
流畅(LD)https://pull.example.com/live/123456_ld.flv1024

步骤三:集成 Web 拉流 SDK

在您的项目中使用高级版 License 集成 2.11.2 及以上版本的 Web 拉流 SDK。详见集成 SDK。

其中,如果您使用 NPM 方式引入依赖,必须引入并注册 flv 和 abr 插件,以确保 FLV 低延时和 ABR 功能可用。示例代码如下所示。

import { flv, abr } from '@volcengine/veplayer-plugin'
register([flv, abr]);

由于部分移动端浏览器(如 iOS 16 之前的 Safari)无法播放 FLV 流,为确保直播在这些设备上仍能正常播放,SDK 提供了 HLS 降级方案。启用此方案后,当播放器检测到当前浏览器不支持播放 FLV 流时,会自动切换到备用的 HLS 流进行播放。为确保降级功能正常生效,如果您通过 NPM 方式引入依赖,请务必同时引入并注册 hlsjs 插件。示例代码如下所示。

import { flv, hlsjs, abr } from '@volcengine/veplayer-plugin';
register([flv, hlsjs, abr]);

步骤四:在 SDK 中配置 ABR 并开启 FLV 低延时

在创建播放器时,您可以通过以下配置,为观众打造低延迟、高流畅且全平台兼容的直播体验:

  • 配置 ABR 功能:ABR 功能在 SDK 中默认开启。您只需提供一个包含多个码率及对应 FLV 拉流地址的列表,播放器即可根据观众的网络状况,在直播期间自动切换档位,从而在保障流畅度的同时提供优质画质。
  • 监听档位切换事件:如果您希望在档位切换时实现自定义逻辑,例如更新 UI、上报切换数据等,可以监听以下事件:
    • ABR_SWITCH_START:开始切换档位。
    • ABR_SWITCH_SUCCESS:档位切换成功。
    • ABR_SWITCH_FAILED:档位切换失败。
  • 移动端 HLS 降级方案:部分移动端浏览器(如 iOS 16 之前的 Safari)不支持播放 FLV 流。为确保直播在这些设备上也能正常播放,您可以在配置 FLV 拉流地址的同时,提供一个备用的 HLS 拉流地址。当播放器检测到当前浏览器不支持播放 FLV 流时,会自动切换到 HLS 流进行播放。

示例代码如下所示。

注意

为确保 ABR 功能正常生效,请务必保证您在代码中为各档位设置的码率与控制台转码配置中的一致。

请特别注意单位换算:

  • 控制台中的码率单位: kbps
  • 代码中的码率单位: bps

因此,代码中设置的码率值必须是控制台数值的 1000 倍。

例如,控制台设置为 3200 kbps,则代码中应传入 3200000。

VePlayer.createLivePlayer({
    width: 640,
    height: 360,
    playlist: [
      {
        definitions: [
          // 初始播放档位的 FLV 拉流地址。
          'https://pull.example.com/live/123456_uhd.flv',
          // 用于降级播放的 HLS 拉流地址,可通过控制台的地址生成器生成。
          'https://pull.example.com/live/123456_uhd.m3u8',
        ],
      },
    ],
    flv: {
      abr: {
        // 初始播放档位的码率。单位为 bps。
        bitrate: 3200000,
        // 各档位的码率和 FLV 拉流地址。码率单位为 bps。
        urls: {
          3200000: 'https://pull.example.com/live/123456_uhd.flv',
          2048000: 'https://pull.example.com/live/123456_hd.flv',
          1638000: 'https://pull.example.com/live/123456_sd.flv',
          1024000: 'https://pull.example.com/live/123456_ld.flv',
         }
     }
  },
    fallback: {
      // 先尝试播放低延迟 FLV 流。当播放器检测到当前浏览器无法播放低延迟 FLV 流时,会自动降级播放 HLS 流。
      fallbackOrder: ['ll-flv', 'hls'],
    }
}).then(function (veplayer) {
    // 监听档位切换事件。
    veplayer.on(VePlayer.live.Events.ABR_SWITCH_START, function (data) {
      console.log('ABR_SWITCH_START', data.bitrate);
    });

    veplayer.on(VePlayer.live.Events.ABR_SWITCH_SUCCESS, function (data) {
      console.log('ABR_SWITCH_SUCCESS', data.bitrate);
    });

    veplayer.on(VePlayer.live.Events.ABR_SWITCH_FAILED, function (data) {
      console.log('ABR_SWITCH_FAILED', data.bitrate);
    });
})
最近更新时间:2026.09.10 20:18:15
这个页面对您有帮助吗?
有用
有用
无用
无用