超低延时直播 Web 端接入规范

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

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

阅读对象

具有 WebRTC 基础的开发人员

规范与约束

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

兼容性

前提条件

• 已开通视频直播服务，完成域名添加。
• 已完成域名配置，详情请参见域名配置。
• 已完成 CNAME 配置。
• 使用地址生成器或手动拼接 RTM 拉流地址。
• 如果您的视频含 B 帧或音频为 AAC 编码；请先参考常见问题，删除视频的 B 帧并修改音频编码格式为 Opus。

交互流程

本节为您介绍 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>"}}

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

响应接口定义

响应示例如下所示。

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

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

code 码表

推拉流示例

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

// 获取音视频源
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
});

2. 通过 AddTrack 添加音视频。

userMediaStream.getTracks()
            .forEach(track => pc.addTrack(track, userMediaStream));

3. 在客户端通过 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
    };
})

4. 在客户端设置获取到的 SDP Answer，开始推流。

pc.setRemoteDescription(answer);

常见问题

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

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

Step 1：创建转码模版

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

Step 2：获取转码播放地址

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

3. 点击生成地址按钮，生成拉流地址。