You need to enable JavaScript to run this app.
导航
超低延时直播 Web 端接入规范
最近更新时间:2024.06.25 13:05:26首次发布时间:2022.12.09 10:52:11

超低延时直播(RTM,Real Time Media)功能基于音视频处理技术和大规模内容分发技术,通过链路传输协议改造为 UDP 等底层技术优化,解决 TCP 协议自身局限和网络抖动引起延迟累加,除了配合火山引擎专用播放端 SDK 外,您可以使用浏览器 WebRTC 信令交互方式从直播节点推拉音视频流,实现千万级并发场景下的毫秒级延时视频直播。

本文将为您介绍 WebRTC 标准接入 SDP 信令协议的规范和流程。

阅读对象

具有 WebRTC 基础的开发人员

规范与约束

  • 信令、数据交互符合标准 WebRTC 规范,详情请参见 RFC8829
  • 支持采样率为 48kHz 的 Opus 音频编码格式,和不含 B 帧的 H.264 视频编码格式。

兼容性

客户端支持版本
Chrome96 及以上版本
Safari15.1 及以上版本
Edge96 及以上版本
Firefox(拉流)101 及以上版本
微信浏览器8.0.16 及以上版本

前提条件

交互流程

本节为您介绍 HTTP SDP 信令交互的流程。

  1. 客户端发送 SDP 信令请求

    • 客户端创建 PeerConnection,并添加音视频;
    • 客户端 PeerConnection 通过 POST 协议方式将 JSON 格式的请求信息发送至服务端;信令接口格式请参见信令接口定义
  2. 服务端接口返回 SDP Answer 响应,信令接口格式请参见信令接口定义

  3. 建立 STUN 与 ICE 连接

    • 客户端将收到的 SDP Answer 设置到 PeerConnection 中;
    • 客户端的 PeerConnection 根据响应信息,向服务端发送 STUN 包;
    • 服务端响应 STUN,ICE 连接建立;
  4. 服务端发送媒体数据至客户端。

信令接口定义

请求接口定义

请求示例如下所示。

{"version":"1.0","sessionId":"testId","localSdp":{"type":"offer","sdp":"<offer text>"}}

请求参数说明如下表所示。

参数
类型
是否必传
说明
version
String
"版本号,取值为 1.0"
sessionId
String
客户端生成的唯一 ID,用于标识一次会话
localSdp
Struct
请求 SDP 信息
type
String
SDP 的信令类型,发起请求时取值为 offer
sdp
String
SDP 文本

响应接口定义

响应示例如下所示。

{"code":200,"message":"success","remoteSdp":{"type":"answer", "sdp":"<answer text>"}

响应参数说明如下表所示。

参数
类型
是否必传
说明
code
Int
状态码,详情请参见 code 码表
message
String
状态信息
remoteSdp
Struct
响应 SDP 信息
type
String
SDP 的信令类型,响应请求时取值为 answer
sdp
String
SDP 文本

code 码表

code定义
200成功
100URL 错误
101JSON 参数不合法
401流信息错误
403鉴权失败
404流不存在
601内部错误。需要客户端强制降级,切到 RTMP、HTTP-FLV 或 HLS 协议

推拉流示例

  1. 在客户端设置音视频源,并创建 PeerConnection。以推流场景为例,代码示例如下所示。

说明

音视频方向性需要设置为 SendOnly 或者 RecvOnly。

  • SendOnly:表示推流,即 offerToReceiveAudioofferToReceiveVideo 同时为 0;
  • RecvOnly:表示拉流,即 offerToReceiveAudioofferToReceiveVideo 同时为 1。
// 获取音视频源
const constraints = {
            audio: {
                optional: [{
                    sourceId: audioSource
                }]
            },
            video: {
                optional: [{
                    sourceId: videoSource
                }]
            }
        };
const userMediaStream = await navigator.mediaDevices.getUserMedia(constraints);

// 创建 PeerConnection,并设置对音视频方向性的控制
pc = new RTCPeerConnection({
    offerToReceiveAudio: 0, 
    offerToReceiveVideo: 0
});
  1. 通过 AddTrack 添加音视频。
userMediaStream.getTracks()
            .forEach(track => pc.addTrack(track, userMediaStream));
  1. 在客户端通过 PeerConnection 创建 Offer,并通过 POST 协议方式请求下述 HTTP SDP 接口,获得 由服务端返回的 SDP Answer。
const offer = await pc.createOffer({
                offerToReceiveAudio: 0,
                offerToReceiveVideo: 0
            });
pc.setLocalDescription(offer);
let data = {
            version: "1.0",
            sessionId: "******",
            localSdp: offer
        };
        
fetch(rtmURLInput.value, {
    method: "POST",
    mode: "cors",
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(data)
})
.then(response => response.json())
.then(response => {
    const answer = {
                    type: 'answer',
                    sdp:  response.remoteSdp
    };
})
  1. 在客户端设置获取到的 SDP Answer,开始推流。
pc.setRemoteDescription(answer);

常见问题

如何删除视频 B 帧并修改音频编码格式为 Opus

您可以使用转码功能来删除视频 B 帧并修改音频编码格式为 Opus。

Step 1:创建转码模版

  1. 登录视频直播控制台。
  2. 选择转码配置 > 自定义转码 > 添加配置。
  3. 参考转码配置文档,配置转码模版。其中,B帧(帧间隔)需要填 0,音频选项选择 Opus,如下图所示。

Step 2:获取转码播放地址

  1. 进入地址生成器
  2. 选择拉流地址,转码模版配置选择上一步创建的模版。例如,模版后缀为 hd,则拉流地址配置如下图所示。

alt

  1. 点击生成地址按钮,生成拉流地址。