Tutorial: 收发 SEI 和自定义消息

在实时音视频通话中，除了音视频流之外，您可能还需要向房间内的其他用户发送一些应用层的数据消息，例如弹幕、点赞、答题状态、游戏指令等。TRTC Web SDK 提供了两种数据消息传输方式：自定义消息（Custom Message）和 SEI 消息（Supplemental Enhancement Information）。

• 自定义消息：通过独立的数据通道发送，与音视频流无关，适合传输控制指令、状态同步等对实时性要求较高的文本或二进制数据。
• SEI 消息：嵌入在视频帧的头部中随视频流一起发送，适合传输与画面强关联的信息，如直播答题倒计时、视频坐标标注、歌词同步等。

Demo

自定义消息

• 支持的 SDK 版本：v5.6.0+

• 仅 TRTC.TYPE.ROLE_ANCHOR 可以调用 trtc.sendCustomMessage。

• 请在 TRTC.enterRoom 成功之后调用此接口。

• 自定义消息会按顺序尽可能可靠地发送，但在极差网络下仍可能丢失消息。接收方也会按顺序接收消息。

发送自定义消息

const trtc = TRTC.create();
await trtc.enterRoom({ sdkAppId, userId, userSig, roomId: 12345 })
// 发送自定义消息
const data = new TextEncoder().encode('hello').buffer;
trtc.sendCustomMessage({ cmdId: 1, data });

接收自定义消息

监听事件 TRTC.EVENT.CUSTOM_MESSAGE 来接收自定义消息。

// 接收自定义消息
trtc.on(TRTC.EVENT.CUSTOM_MESSAGE, event => {
   // event.userId: 远端用户 ID。
   // event.cmdId: 消息 cmdId。
   // event.seq: 消息序号。
   // event.data: 自定义消息数据，类型为 ArrayBuffer。
   console.log(`收到来自 ${event.userId} 的自定义消息，内容: ${new TextDecoder().decode(event.data)}`)
})

SEI 消息

视频帧头部有一个称为补充增强信息（SEI）的头部块，它是插入到视频码流中的附加数据，用于传递额外信息。您可以在 SEI 中添加大量信息，例如摄像头或编码器参数、时间戳、字幕、歌词和版权信息等。

发送 SEI 消息

您可以使用 trtc.sendSEIMessage 发送 SEI 消息。由于 SEI 是插入到视频流中的，因此需要在启动本地视频之后调用。

// 1. 开启 SEI
const trtc = TRTC.create({ enableSEI: true })
// 2. 进房并启动本地视频
await trtc.enterRoom({ sdkAppId, userId, userSig, roomId: 12345 })
await trtc.startLocalVideo();
// 3. 发送 SEI
const unit8Array = new Uint8Array([1, 2, 3]);
trtc.sendSEIMessage(unit8Array.buffer);

注意：

1. 支持的 SDK 版本：v5.3.0+。支持的浏览器：Chrome 86+、Edge 86+、Opera 72+（基于 Chromium M86+ 的浏览器）。
2. 单次调用最大发送 1KB（字节），每秒最多调用 30 次，每秒最大发送 8KB。
3. 由于 SEI 随视频帧发送，网络不佳时视频帧可能丢失，因此 SEI 也可能丢失。可在频率限制内增加发送次数，业务侧需在接收端做消息去重。
4. 未调用 trtc.startLocalVideo 无法发送 SEI，未调用 trtc.startRemoteVideo 无法接收 SEI。
5. 仅支持 H264 编码器发送和接收 SEI。

接收 SEI 消息

参考 TRTC.EVENT.SEI_MESSAGE

// 1. 开启 SEI
const trtc = TRTC.create({ enableSEI: true })
// 2. 接收 SEI
trtc.on(TRTC.EVENT.SEI_MESSAGE, event => {
 console.log(`收到来自 ${event.userId} 的 SEI 消息，数据: ${event.data}，流类型: ${event.streamType}`)
})